Developing HWC app with Customized List
Hybrid Web Container app’s look and feel can be changed by extending custom.js file comes with the app. Custom.js is an auto-generated file in Sybase Mobile Workflow project. It helps to do custom logic in the app. This blog is on how to create a custom listview in HWC app.
Develop HWC App
Create a new Mobile Application Project in Sybase Workspace.
Develop MBO using the BAPI BAPI_PO_GETITEMSREL.
Check the Release code and Release Group as input and PO Headers as output. Check the result checker to none.
Click next and select Created On and PO Number as attributes of the MBO.
Create two Personalization Keys to use as input to map with load parameters as given below
Deploy the SUP project to unwired server. And create a new mobile workflow forms editor.
Create two editboxes to use as input.
Drag and drop the PO_List MBO to flow design screen. It creates screens for PO list and a detail screen.
Create a menu item “Get PO List” on the start screen and configure Online Request for the menu item with success screen as PO List.
Right click from the designer and click on “Generate Mobile Workflow Package“.
Customize
Under Generated Workflow open the Custom.js file.
Inside Custom.js there are multiple functions. Based on the requirement custom codes are added in these functions.
Inside the function customBeforeShowScreen(screenToShow, screenToHide) write the below code which has the code for a custom listview.
if (screenToShow == ‘POList’)
{
var message = getCurrentMessageValueCollection();
var itemList = message.getData(“PO_List”);// MBO name
var items = itemList.getValue();
var numOfItems = items.length;
var i = 0;
var htmlOutput = “<div id=’supportViewList’><ul id=’Support_content’ data-role=’listview’ data-filter=’true’ data-inset=’true’>”;
while ( i < numOfItems ){
var currItem= items[i];
var PO_NUMBER = currItem.getData(“PO_List_PO_Number_attribKey”).getValue();
var CREATED_BY = currItem.getData(“PO_List_Created_By_attribKey”).getValue();
htmlOutput += “<li><a id ='” + currItem.getKey() + “‘ class=’listClick’ style= color:#484848 >”;
htmlOutput += “<font color=’#000066′>PO Number: </font>”+PO_NUMBER+”<br>”;
htmlOutput += “<font color=’#000066′>Created By: </font>”+CREATED_BY+””;
htmlOutput += “</a></li>”;
i++;
}
htmlOutput +=”</ul></div>”;
var listview = $(‘div[id=”supportViewList”]’);
if (listview.length > 0) {
var ul= $(listview[0]).find(‘ul[data-role=”listview”]’);
if (ul.length > 0) {
htmlOutput = htmlOutput.replace(“<div id=’supportViewList’><ul id=’Support_content’ data-role=’listview’ data-filter=’true’ data-inset=’true’>”,””);
ul.html(htmlOutput);
ul.listview(‘refresh’);
}
}
else{
$(‘#POListForm’).children().eq(0).hide();
$(‘#POListForm’).children().eq(2).hide();
$(‘#POListForm’).children().eq(3).hide();
$(‘#POListForm’).children().eq(1).after(htmlOutput);
}
return true;
}
Generate Mobile WorkFlow Package after modifying the Custom.js file.
Register a user in SCC> Assign this app to the user and Run.
Given below is the custom listview generated.
Feel free to share your feedback in the comments section.
Midhun VP
@midhunvptwit
The image I added for Get PO List menu item is not displaying. So I am adding the information in that image in words here.
Select the respective MBO "PO_List"
Select findall query.
Set "POList"as success screen.
This is my last project,
sencha and sup for order release.
http://www.youtube.com/watch?v=i4ifNsyAGAs&feature=youtube_gdata_player
Pretty nice example.
Let me show my demo for @sales,
on this link
http://www.youtube.com/watch?v=i4ifNsyAGAs&feature=youtube_gdata_player
Im working with Sencha 2.0 & Sup 2.1#3 & Sap Rfc's
Thank you !
For some reason I cannot see any of the screen shots other than the first one. Is it possible to fix this?
Tom,
I also faced this issue for some days. But now I am able to view all the screen shots. Are you able to see the screen shots now? If no please let me know I will bring it into notice of the SCN Moderators.
Hi Midhun,
Yes, I can see all the images now. Thanks
Great Tom.
excellent ...nice blog Midhun 🙂
Very very nice, i also see your Sales app, it's really great,
i have to realize something similar and i was wondering if you can help me with some hint
or some code
Thanks in advance
Adriano
Thank you for your comment Adriano Puleo
If you are good in HTML, JavaScript and CSS you can customize the HWC app to higher extend to make the look and feel similar to native apps.
I think my blog helped you to understand how to do that, rest you can do by writing your own code based on your requirement.
- Midhun VP
Nice Blog Midhun... 🙂 🙂 🙂
It's very useful coding for customizing screens .... good job Midhun 🙂
Great Blog..............
Hello,
if the List is empty and numOfItems = 0.
How can I add new values to the listview?
Thanks
Here if the numOfItems is greater than 0 only it will go inside of while loop. So you need an if else loop and add the while loop inside the if loop as we do in the normal coding. See the example below:
if (screenToShow == 'POList')
{
var message = getCurrentMessageValueCollection();
var itemList = message.getData("PO_List");// MBO name
var items = itemList.getValue();
var numOfItems = items.length;
if(numOfItems == 0){
var htmlOutput = "<div id='supportViewList'><ul id='Support_content' data-role='listview' data-filter='true' data-inset='true'>";
var PO_NUMBER = "10001";
var CREATED_BY = "Midhun";
htmlOutput += "<li><a id ='101' class='listClick' style= color:#484848 >";
htmlOutput += "<font color='#000066'>PO Number: </font>"+PO_NUMBER+"<br>";
htmlOutput += "<font color='#000066'>Created By: </font>"+CREATED_BY+"";
htmlOutput += "</a></li>";
i++;
htmlOutput +="</ul></div>";
var listview = $('div[id="supportViewList"]');
if (listview.length > 0) {
var ul= $(listview[0]).find('ul[data-role="listview"]');
if (ul.length > 0) {
htmlOutput = htmlOutput.replace("<div id='supportViewList'><ul id='Support_content' data-role='listview' data-filter='true' data-inset='true'>","");
ul.html(htmlOutput);
ul.listview('refresh');
}
}
else{
$('#POListForm').children().eq(0).hide();
$('#POListForm').children().eq(2).hide();
$('#POListForm').children().eq(3).hide();
$('#POListForm').children().eq(1).after(htmlOutput);
}
}else{
var i = 0;
var htmlOutput = "<div id='supportViewList'><ul id='Support_content' data-role='listview' data-filter='true' data-inset='true'>";
while ( i < numOfItems ){
var currItem= items[i];
var PO_NUMBER = currItem.getData("PO_List_PO_Number_attribKey").getValue();
var CREATED_BY = currItem.getData("PO_List_Created_By_attribKey").getValue();
htmlOutput += "<li><a id ='" + currItem.getKey() + "' class='listClick' style= color:#484848 >";
htmlOutput += "<font color='#000066'>PO Number: </font>"+PO_NUMBER+"<br>";
htmlOutput += "<font color='#000066'>Created By: </font>"+CREATED_BY+"";
htmlOutput += "</a></li>";
i++;
}
htmlOutput +="</ul></div>";
var listview = $('div[id="supportViewList"]');
if (listview.length > 0) {
var ul= $(listview[0]).find('ul[data-role="listview"]');
if (ul.length > 0) {
htmlOutput = htmlOutput.replace("<div id='supportViewList'><ul id='Support_content' data-role='listview' data-filter='true' data-inset='true'>","");
ul.html(htmlOutput);
ul.listview('refresh');
}
}
else{
$('#POListForm').children().eq(0).hide();
$('#POListForm').children().eq(2).hide();
$('#POListForm').children().eq(3).hide();
$('#POListForm').children().eq(1).after(htmlOutput);
}
}
return true;
}
Hi,
ul.listview('refresh'); does not work
Debuging I found that var ul= $(listview[0]).find('ul[data-role="listview"]'); is not correct but I have var ul= $(listview[0]).find('ul[data-role="none"]');
Then ul.listview('refresh'); crashes.
How can I set the paramtersKey to the values of the <li> tag, because I want to use the listview to be send to an MBO.
Thanks
nice sample.
But if suppose list is loaded with an object query i.e online request is made on menu item click and the flow remains on the same screen
i.e
If there is a menu item as get PO List on the Start Screen and on click of this menu the listview present in the same screen is loaded with data then in which method of custom.js should we write the custom code.
Looks nice...I'll follow this.One query I have is: Have you used PhoneGap here to customize your UI.If yes,How?
Hi jyotiranjan,
It is possible to use PhoneGap.Can u please tell me which version of SUP you are using?
HI,Using SUP 2.1.3.I'm also trying to find out how to use phone gap? Please let me know if you found something.
In SUP 2.1.3 you can customize the UI by adding your custom code in Custom.js as said by Mithun also. I have no idea about phone gap.
Thanks.
Here I haven't used PhoneGap to customize the UI. Phonegap is not for customizing the UI. It is used for adding the native functionalities to the HWC. You can use PhoneGap APIs inside the HWC to access the native features of the device. Ex: maps, contacts etc.
You can customize the UI by writing your own custom code inside custom.js file as I mentioned in this example. Again you can use Sencha to modify the UI of HWC.
- Midhun VP
Thanks you Midhun. 🙂
use the below code to navigate to the detail screen.
$(".listClick").click(function(){
navigateForward("Detail_Screen", this.id );
if (isBlackBerry()) {
return;
}
});
in Details Screen i am not Getting Data... Can you please help on that?
Use the default detail screen created by drag and drop of MBO. and use the below code
$(".listClick").click(function(){
navigateForward("Detail_Screen", this.id ); \\
if (isBlackBerry()) {
return;
}
});
Hi Midhun,
Screen is Opening But Data is Not Coming.
we need to write any Extra Code Display the Detail Screen with DATA.
There is no need to write code for the detail screen. Are you using the default details screen generated when you drag and dropped the MBO to the designer ? Also you can drag and drop edit box from the controls to this screen and give the key of the any item of the listview. it should bring the data to the detail screen. Ex : in the properties of editbox select the Inside input data binding key as "PO_List_Name_attribkey"
Yes, i use the same screen, Key are already mapped, in fact i create New Project & Tested also, Still Data is Not Coming.Only Blank Screen is Opened. Can Help / suggest more
You haven't deleted the list existing in the list screen right? The key of the list should be present in the screen. Better you can create a new thread that includes all the steps you performed hence I will get more information
i create the NEE Thread, and i post my Code Also, Please check the following & Help me.
http://scn.sap.com/thread/3442943
Useful information Midhun VP . . Thanks for sharing. . . 🙂 🙂
Thanks,
Soumya Vaishnavi
Hi midhun
i have sap mobile workspace 2.3 SP 04
when i try to create customised list so i cannot find the "Mobile workflow form editor" in my sdk can you kindly guide me .
Regard
Ali
The example I did was on SUP 2.2, in SMP 2.3 you may find "Hybrid App designer" instead of "Mobile Workflow Forms Editor". Both are same.
Midhun VP
Dear Midhun
thanks for your help 🙂 .
cau you guide me in this tutorial if i add a button in a cell and from this cell i need to push to detail screen what is the syntax.
Regard
Ali
What is your requirement?
i want push to next MBO when i get the success.
but i dont know from which function i get the response and how to push to next screen programatically.
please guide me.
ali naveed
You can try something like this,
Create a new function inside custom.js, ex.
function viewAttach(i){
// your code
return true;
}
And call this method inside the cells (you have to do it with a button, example is with <a>), ex. htmlOutput = htmlOutput + "<li><a id='" + i + "' name='" + i +"' onclick='return viewAttach("+i+");'>" + FILENAME + "</a></li>";
Midhun VP
Midhun VP
thanks for help.
i want push to next MBO when i get the success.
but i dont know from which function i get the response and how to push to next screen programatically.
please guide me.
Could you explain the requirement in detail.
my actual requirement is .
* when user login it show the employee detail.
but right now i am doing this
1) user come to "start" screen it has user name and password field and a login button.
2) when user press login button i do online request of ADAuthentication.
3) In response the service return "Success" or "fail".but i dnt know in which function i get
that response.
4) I push ADAuthentication on success.On ADAuthentication screen user click on submit
i call employee mbo.
5) i dont want to see the success screen i directly want to show the employee detail.
May have to go a bit tricky to do this.
1. Change the name of the screen name "ADAuthentication" to Employee (keep a different key for screen from the original employee screen,ex.Employee1).
2. Create a custom action ("GetEmployee") in this screen and give the properties same as submit button. Custom actions are same as menuitems but it will not it will not be visible in the screen. A method will be created for the custom action created,ex. "menuItemCallbackEmployee1GetEmployee" //Employee1 is the name of screenkey and GetEmployee is the custom action name.
3. Inside function customAfterNavigateForward add the below code:
hwc.customAfterNavigateForward = function(screenKey, destScreenKey) {
if(destScreenKey==="Employee1") {
menuItemCallbackEmployee1GetEmployee();
return true;
}
};
// So when the control comes to the screen, an online request will be executed and control goes to real original employee screen. To disable the back button in real employee screen follow the below code:
hwc.customBeforeNavigateBackward = function(screenKey, isCancelled) {
if(screenKey == "Employee"){
return false;
}
};
Midhun VP
Hi Midhun,
Same problem i faced 🙁
I have a service of user log in which return "Success" or "Fail". Which method return this success and failure in .js ?
Flow of my app is
User Login -> if success goto Home Screen else Error Screen (show same error as in the response)
Looks like the issue is not related to the discussion. If you can, please create a new thread regarding this issue/requirement with complete details/steps to help you further.
Midhun VP
ok
Hi Midhun,
Midhun VP
You can try something like this,
Create a new function inside custom.js, ex.
function viewAttach(i){
// your code
return true;
}
And call this method inside the cells (you have to do it with a button, example is with <a>), ex. htmlOutput = htmlOutput + "<li><a id='" + i + "' name='" + i +"' onclick='return viewAttach("+i+");'>" + FILENAME + "</a></li>";
i am using above code in my application for call the function viewAttach but its not working whenever it add the function
htmlOutput +=
"function updateTimeSheet(){" +
"alert(Hi!!!);" +
"}"
htmlOutput += "</script>";
its call otherwise not call.
kindly help.
Regard
Ali
Thank you Midhun for help 🙂 its work.
[Removed by Moderator]
Regards
Ali