Skip to Content
Author's profile photo Jitendra Kansal

HWC Application Development using Hybrid API Generation Approach

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

Assigned tags

      40 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Jitendra,

      I have one query. In the case of multiple HTML files how we will create a flow between html files. is it like a flow of HWC app screens.

      Dinesh.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Hi Dinesh,

      i am working on it. will post very shortly.

      Regards,

      Jitendra

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog 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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog 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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      Hi Jitendra,

      I was able to resolve the issue actually i didnt include HybridApp.js in the html file.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      How come you were able to resolve though you didn't include hybrid.js ?

      I didnt get you.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog 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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Great...good to hear your problem has resolved.

      Rgrds

      Jitendra

      Author's profile photo Former Member
      Former Member

      Nice one...

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Jyotiranjan Rout thanks 🙂

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Sowmya MN

      confirm

      if user is showing online?

      what do you see in logs when you assign an hybrid app to registered user ? Please share devices HWC logs

      Rgrds,

      Jitendra

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Sowmya MN

      You have to select HWC as template.

      Make sure there is no user registered for that simualator/device already.

      Rgrds,

      Jitendra

      Author's profile photo Former Member
      Former Member

      Thank You.

      Tried with new device and new user. Now the hybrid app is displaying

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      great  Sowmya MN

      You may close your thread if issue has been resolved.

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

      Rgrds,

      Jitendra

      Author's profile photo Former Member
      Former Member

      Please  share sample code related to submitting the form

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Please  share sample code related to submitting the form

      i didnt understand..

      submitting the form??

      Author's profile photo Former Member
      Former Member

      Sample code related to a form and on click of submit saving the details.

      Example : registration form

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      i haven't explored this option using hybrid API generation approach,

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog 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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      If you are running it at Android simulator, then check debug logs in DDMS.

      you will get complete info about this undefined syntex.

      Rgrds,

      JK

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Sowmya MN

      cool... 🙂

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi Sowmya,

      Can you share the code you used for accessing the personalization keys ?

      Best Regards,

      Harshit

      Author's profile photo Former Member
      Former Member

      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");

      Author's profile photo Former Member
      Former Member

      Thanks Sowmya, basically I need to read Personalization Keys through JS. Do you have any piece of code which does that?

      Author's profile photo Former Member
      Former Member

      Please elaborate your question. Didn't understand

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Midhun VP
      Midhun VP

      Good work!

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Thanks 🙂

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Very nice work, thanks for sharing.

      Warm Regards

      Hemendra