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
- SAP Managed Tags:
40 Comments
