Skip to Content

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

50 Comments
You must be Logged on to comment or reply to a post.
  • 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.

  • 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

    • 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.

  • 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.

  • use the below code to navigate to the detail screen.

    $(“.listClick”).click(function(){  

                 

                 navigateForward(“Detail_Screen”,  this.id );   

               

                 if (isBlackBerry()) {

                  return;

                 }

                });

      • 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;

                     }

                    });

          • 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

  • 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

    • 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

          • 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.

          • 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

          • 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

          • 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