Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
midhun_vp
Active Contributor

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

50 Comments
Labels in this area