Skip to Content
OBJECTIVE:
This Document explains steps how we can follow a different apporach for HWC based application ( this approach is different from creating workflow editor and dragging dropping palette in flow design screen and doing customization in custom.js and other files).
REQUIREMENT:
Tools used in developing the application are:
SUP/SMP version: 2.2.x
Simulator/device: any

STEPS:

1. create one MBO to the defined project test1. Here i have connected to sample database and created one MBO for available Customer table.
1.PNG
2. Here, i am inserting an object query findByStateCode to filter the result based on statecode.
    • Add one paramter StateParam and map it to the state
    • click on Generate
1.PNG
3. Deploy MBO to SMP server.
4. Once deployment is successful, Generate Hybrid App API by right clicking on project test.
1.PNG
5.  select Generate to an external folder option
    • at the end add html folder the the defined path
    • click on finish
1.PNG
6. it will generate below mentioned java script files under html folder.
1.PNG
7. next task is to add one html (you may add many more) file under html folder.
    • right click at html folder <New>other
    • search with html word, select HTML File
    • Give some file name (e.g. NewFile.html)
    • Click on Finish
1.PNG
8.  Replace the html code in NewFile.html with your desired one:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<meta name=”HandheldFriendly” content=”True” />
<meta http-equiv=”PRAGMA” content=”NO-CACHE” />
<meta name=”viewport” content=”initial-scale = 1.0 ,maximum-scale = 1.0″ />
<script src=”js/PlatformIdentification.js”></script>
<script src=”js/hwc-comms.js”></script>
<script src=”js/hwc-utils.js”></script>
<script src=”js/hwc-api.js”></script>
<script src=”js/WorkflowMessage.js”></script>
<script src=”js/workflow.js”></script>
<script>
function findByState() {
var stateCode = document.getElementById(“code”).value;
alert(“state code is” + stateCode);
cust = new Customer();
cust.StateParam = stateCode;
customer_findByStateCode(cust,”supusername=supAdmin&suppassword=s3pAdmin”, “onError”);
}
function onError(e) {
alert(“An error occurred”);
}
hwc.processDataMessage = function (incomingDataMessageValue) {
var workflowMessage = new WorkflowMessage(incomingDataMessageValue);
alert(“workflow message is” + workflowMessage);
var values = workflowMessage.getValues();
alert(“values  is” + values);
var custList = values.getData(“Customer”);
var firstCust = custList.value[0];
var firstName = firstCust.getData(“Customer_fname_attribKey”).value;
alert(“First name is ” + firstName);
}
</script>
</head>
<body>
<form>State Code: <input type=”text” value=”NJ” id=”code”/></form><br>
<button id=”findByStateCode” onclick=”findByState()”>Get Details</button>
<button id=”closeWorkflow” onclick=”hwc.close()”>Close this App</button>
</body>
</html>
NOTE: In case of SMP 2.3.x, replace workflow.js by HybridApp.js
The file named workflow.js (in case of SMP 2.3.x, it would be HybridApp,js) is generated based on the operations and object queries of the MBOs selected in the Generate Hybrid App API wizard. When the Get Details button is clicked, the State Code is retrieved and set on the Customer object, which is an input parameter to the method named customer_findByStateCode in workflow.js. Once the result retruns from Unwired server, it is passed into the method processDataMessage where teh first name is shown.
9.  Go to C:\Sybase\UnwiredPlatform\MobileSDK22\HybridApp\PackagingTool, click on packagingtool.bat     
    
          for 32-bit JDK, use packagingtool.bat
          for 64-bit JDK, use packagingtool64.bat
                  
1.PNG
    • select any desired location to place the package of this app
1.PNG
10. Once you click on OK, it will open Hybrid App Packaging Tool
1.PNG
11. Click on New
    • mention project name (test1)
    • Web Application Folder: html folder path for test1 application
    • Mention MBO Package Name: test
    • MBO Package version: 1.0
1.PNG
12. Select the platform you want to run this app
    • Here i am selecting Android, select all the files
    • mention HTML file name (right hand side)
    • click on Save and Generate
1.PNG
13. Once you click Generate, a window will pop up (confirmation message)
1.PNG
14. Open SCC (SAP Control Center).
    • click on Hyrbid Apps
    • select Deploy option
    • browse the file, (if it is valid file, you will see one message says.. Valid Hyrbid App File
1.PNG
15. Assign this Hyrbid Apps to the registered user.
1.PNG
16. Run the Android simulator
1.PNG
Your comments/suggestions are most welcome.
Regards,
Jitendra Kansal
To report this post you need to login first.

40 Comments

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

    1. Jitendra Kansal Post author

      Hi Dinesh,

      you can create mutliple HTML files. yes, it s like a flow of HWC apps screens.

      with reference to above eg in blog:

      as soon as first name (Michaels) is displayed, upon clicking OK you want to move to next screen. you can write below piece of code:

      if

      (firstName==“Michaels”)

      {

      window.location= “NewFile1.html”;
      }

      where i have added new HTML file and have written desired code to display on screen.

      Regards,

      Jitendra

      (0) 
  1. Anu Agarwal

    I tried the above example but the problem i faced was that i was just able to see the first alert only.

    I think it is not able to call the processDataMessage after onlineRequest.

    Kindly help.

    (0) 
    1. Jitendra Kansal Post author

      Hi Anu,

      What exactly you are seeing in that alert?

      Something like undefined?

      What is sup version ? 2.2.x

      From sup 2.2 sp 02 onwards,  workflow.js has been replaced with hybrid.js.. check this also.

      Rgrds,

      Jitendra

      (0) 
      1. Anu Agarwal

        Hi Jitendra,

        I m using SUP 2.2 SP02.

        The first alert given in the code which displays state code entered by the user  is appearing rest alerts are not being displayed which signifies that the method processDataMesage is not being called.

        (0) 
        1. Jitendra Kansal Post author

          Hi Anu,

          If you are referring mentioned sample code,

          Plz check object query once and recheck relevant parameters defined in the same code.

          Rgrds,

          Jitendra

          (0) 
          1. Anu Agarwal

            Hi,

            I was able to resolve my issue by including HybridApp.js which i dint included before.

            The sample is working fine.

            Thanks for the wonderful sample.

            Regards,

            Anu

            (0) 
  2. Sowmya MN

    Hi Jitendra,

    Thanks for sharing the steps. Its very helpful.

    Until 15th step I was able to proceed. After deploying the application. I checked in android and ios device in hybrid web container by assigning users.

    But unfortunately am unable to see the project listed in the hybrid apps.

    Please let me know your insight on this.

    Thanks,

    Sowmya M N

    (0) 
      1. Sowmya MN

        Jitendra,

        On seeing the connection in SCC. Below list is displayed.

        While adding new user/registering – should we need to give application ID as ‘HWC’ template or application name.

        (0) 
                  1. Sowmya MN

                    Please let me know if you find any samples related to this.

                    Have few queries,

                    1. Tried assigning one more user to the existing application created following your steps. But hybrid app is not displaying for that user.

                    2. Can we assign multiple apps to a single user. If so how will the apps get displayed. Once we open HWC all the assigned apps get listed?

                    (0) 
                    1. Sowmya MN

                      1. Tried assigning one more user to the existing application created following your steps. But hybrid app is not displaying for that user.

                      — With port set as 5001, its displaying the app

                      2. Can we assign multiple apps to a single user. If so how will the apps get displayed. Once we open HWC all the assigned apps get listed?

                      — Apps will display in the list in container

                      (0) 
                      1. Jitendra Kansal Post author

                        1. Tried assigning one more user to the existing application created following your steps. But hybrid app is not displaying for that user.

                        — With port set as 5001, its displaying the app

                        strange.. hw did you follow it? you may retry like

                        • register a new user in “Application Connections”
                        • select the same user and choose “hybrid apps” tab
                        • assign it from there itself


                        2. Can we assign multiple apps to a single user. If so how will the apps get displayed. Once we open HWC all the assigned apps get listed?

                        — Apps will display in the list in container

                        yup !!!

                        app1

                        app2

                        app3 so on

                        Rgrds,

                        Jitendra

                        (0) 
  3. Sowmya MN

    Have followed all the steps mentioned. Last alert was not displaying.

    Hence i tried alerting after this below line

    var custList = values.getData(“Customer”);

    alert(cusList);


    Its displaying as undefined.

    I need this issue to be solved ASAP. Please let me know how to proceed further.

    Thanking you in advance.

    (0) 
      1. Sowmya MN

        Thanks for your support.

        Am getting the alerts now.

        There was some issue with database connection at customer’s place which is rectified now.

        Will post if any other guidance required.

        (0) 
          1. Sowmya MN

            Hi Jitendra,

            It would be great if you can share some examples which describes the following:

            1.    Steps involved in registration of a client hybrid application with Sybase SUP 2.2 say for ex: active directory integration

            2.    Setting values to personalization parameters set from MBO (In Native apps, this can be done by accessing the class called PersonalizationParameters.java)

            Regards,

            Sowmya

            (0) 
  4. Sowmya MN

    We found the way to set the values to personalization parameters.

    Have one query:

    We created webservice which returns object array.

    Ex:

    There are two tables ‘A’ and ‘B’

    one parent record in  ‘A’ table can have multiple child records in ‘B’ table

    Corresponding webservices classes ‘A’ and ‘B’ has certain fields.

    Class ‘A’  has field1, field2, field3 (where field3 is an array obj, containing Class ‘B’  fields).

    After executing the ‘generate hybrid app api’ command, corresponding created ‘workflow.js’ file has all variable names in this format ‘ var A.field1’

    As variable name is having dot we are unable to consume in our scripts.

    Please let us know how to proceed further.

    Regards,

    Sowmya

    (0) 
      1. Sowmya MN

        Personalization key code example:

        var logininfo = new Authentication();

        logininfo.pks.put(Username_pk_pkKey, user_name);

        logininfo.pks.put(Password_pk_pkKey, pwd);

        authentication_findAll( logininfo , “supusername=supusername&suppassword=suppassword”,  “onError”);

        (0) 
    1. Sowmya MN

      Please let me know if anyone has update on the question (webservice datasource, creating MBO and connecting through javascript) posted.

      (0) 

Leave a Reply