Skip to Content
Author's profile photo Midhun VP

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.

Pic_109 Feb. 20 06.21.jpg

Develop MBO using the BAPI BAPI_PO_GETITEMSREL.

Pic_109 Feb. 20 06.26.jpg

Pic_109 Feb. 20 06.44.jpg

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.

Pic_110 Feb. 20 06.45.jpg

Pic_113 Feb. 20 06.56.jpg

Create two Personalization Keys to use as input to map with load parameters as given below

Pic_112 Feb. 20 06.49.jpg

Pic_113 Feb. 20 06.50.jpg

Deploy the SUP project to unwired server. And create a new mobile workflow forms editor.

Pic_113 Feb. 20 06.59.jpg

Pic_113 Feb. 20 07.13.jpg

Create two editboxes to use as input.

Pic_113 Feb. 20 07.14.jpg

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.

Pic_114 Feb. 20 07.19.jpg

Pic_113 Feb. 20 07.17.jpg

Pic_114 Feb. 20 07.17.jpg

Right click from the designer and click on “Generate Mobile Workflow Package“.

Pic_114 Feb. 20 07.21.jpg

Pic_115 Feb. 20 07.21.jpg

Customize

Under Generated Workflow open the Custom.js file.

Pic_115 Feb. 20 07.22.jpg

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.

photo (15).PNG


Feel free to share your feedback in the comments section.

Midhun VP

@midhunvptwit

Assigned Tags

      50 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      This is my last project,

      sencha and sup for order release.

      http://www.youtube.com/watch?v=i4ifNsyAGAs&feature=youtube_gdata_player

      Author's profile photo Former Member
      Former Member

      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 !

      Author's profile photo Former Member
      Former Member

      For some reason I cannot see any of the screen shots other than the first one. Is it possible to fix this?

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      Hi Midhun,

      Yes, I can see all the images now. Thanks

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Great Tom.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      excellent ...nice blog Midhun 🙂

      Author's profile photo Adriano Puleo
      Adriano Puleo

      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Sumeet Shahapeti
      Sumeet Shahapeti

      Nice Blog Midhun... 🙂 🙂 🙂

      Author's profile photo Former Member
      Former Member

      It's very useful coding for customizing screens .... good job Midhun 🙂

      Author's profile photo Former Member
      Former Member

      Great Blog..............

      Author's profile photo Former Member
      Former Member

      Hello,

      if the List is empty and numOfItems = 0.

      How can I add new values to the listview?

      Thanks

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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;

                 }

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Looks nice...I'll follow this.One query I have is: Have you used PhoneGap here to customize your UI.If yes,How?

      Author's profile photo Former Member
      Former Member

      Hi jyotiranjan,

      It is possible to use PhoneGap.Can u please tell me which version of SUP you are using?

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Thanks.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thanks you Midhun. 🙂

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      use the below code to navigate to the detail screen.

      $(".listClick").click(function(){  

                   

                   navigateForward("Detail_Screen",  this.id );   

                 

                   if (isBlackBerry()) {

                    return;

                   }

                  });

      Author's profile photo Former Member
      Former Member

      in Details Screen i am not Getting Data... Can you please help on that?

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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;

                   }

                  });

      Author's profile photo Former Member
      Former Member

      Hi Midhun,

      Screen is Opening But Data is Not Coming.

      Author's profile photo Former Member
      Former Member

      we need to write any Extra Code Display the Detail Screen with DATA.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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"

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      i create the NEE Thread, and i post my Code Also, Please check the following & Help me.

      http://scn.sap.com/thread/3442943

      Author's profile photo Former Member
      Former Member

      Useful information Midhun VP . . Thanks for sharing. . . 🙂 🙂

      Thanks,
      Soumya Vaishnavi

      Author's profile photo Former Member
      Former Member

      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 .

      Screen Shot 2014-05-28 at 3.09.03 PM.png

      Regard

      Ali

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      What is your requirement?

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Could you explain the requirement in detail.

      Author's profile photo Former Member
      Former Member

      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.

      iOS Simulator Screen shot Jun 2, 2014, 11.35.06 AM.png.

      Screen Shot 2014-06-02 at 11.20.37 AM.png

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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)

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      ok

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Thank you Midhun for help 🙂   its work.

      [Removed by Moderator]

      Regards

      Ali