Skip to Content

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

To report this post you need to login first.

50 Comments

You must be Logged on to comment or reply to a post.

  1. Midhun VP 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.

    (0) 
    1. Midhun VP 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.

      (0) 
  2. 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

    (0) 
    1. Midhun VP 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

      (0) 
    1. Midhun VP 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;

                 }

      (0) 
      1. 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.

        (0) 
  3. 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.

    (0) 
    1. Midhun VP 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

      (0) 
  4. Midhun VP Post author

    use the below code to navigate to the detail screen.

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

                 

                 navigateForward(“Detail_Screen”,  this.id );   

               

                 if (isBlackBerry()) {

                  return;

                 }

                });

    (0) 
      1. Midhun VP 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;

                     }

                    });

        (0) 
          1. Midhun VP 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”

            (0) 
            1. 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

              (0) 
              1. Midhun VP 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

                (0) 
  5. 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

    (0) 
    1. Midhun VP 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

      (0) 
      1. 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

        (0) 
          1. 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.

            (0) 
            1. Midhun VP 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

              (0) 
              1. 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.

                (0) 
                  1. 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

                    (0) 
                    1. Midhun VP 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

                      (0) 
                  2. 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)

                    (0) 
                    1. Midhun VP 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

                      (0) 
              2. 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

                (0) 

Leave a Reply