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.
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
3. Deploy MBO to SMP server.
4. Once deployment is successful, Generate Hybrid App API by right clicking on project test.
5. select Generate to an external folder option
-
- at the end add html folder the the defined path
- click on finish
6. it will generate below mentioned java script files under html folder.
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
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”);
<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>
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
-
- select any desired location to place the package of this app
10. Once you click on OK, it will open Hybrid App Packaging Tool
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
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
13. Once you click Generate, a window will pop up (confirmation message)
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
15. Assign this Hyrbid Apps to the registered user.
16. Run the Android simulator
Your comments/suggestions are most welcome.
Regards,
Jitendra Kansal
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.
Hi Dinesh,
i am working on it. will post very shortly.
Regards,
Jitendra
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
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.
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
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.
Hi Jitendra,
I was able to resolve the issue actually i didnt include HybridApp.js in the html file.
How come you were able to resolve though you didn't include hybrid.js ?
I didnt get you.
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
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
Great...good to hear your problem has resolved.
Rgrds
Jitendra
Nice one...
Jyotiranjan Rout thanks 🙂
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
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
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.
Sowmya MN
You have to select HWC as template.
Make sure there is no user registered for that simualator/device already.
Rgrds,
Jitendra
Thank You.
Tried with new device and new user. Now the hybrid app is displaying
great Sowmya MN
You may close your thread if issue has been resolved.
http://scn.sap.com/thread/3435067
Rgrds,
Jitendra
Please share sample code related to submitting the form
i didnt understand..
submitting the form??
Sample code related to a form and on click of submit saving the details.
Example : registration form
i haven't explored this option using hybrid API generation approach,
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?
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
strange.. hw did you follow it? you may retry like
yup !!!
app1
app2
app3 so on
Rgrds,
Jitendra
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.
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
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.
Sowmya MN
cool... 🙂
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
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
Hi Sowmya,
Can you share the code you used for accessing the personalization keys ?
Best Regards,
Harshit
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");
Thanks Sowmya, basically I need to read Personalization Keys through JS. Do you have any piece of code which does that?
Please elaborate your question. Didn't understand
Please let me know if anyone has update on the question (webservice datasource, creating MBO and connecting through javascript) posted.
Good work!
Thanks 🙂
Very nice work, thanks for sharing.
Warm Regards
Hemendra