Implementing Online Lookup for Hybrid Apps

In this example, online lookup provides direct interaction between the data requester (client) and the enterprise information system (EIS), supplying real-time EIS data rather than cached data.

Prerequisites

Complete the procedure in Defining Load Arguments from Mapped Propagate to Attributes so that you have an MBO with the required attributes.

Task

This section describes how to invoke the Employee's findByParameter method.

Right-click on the mobile application project and choose Generate Hybrid App API.
Select the Employee MBO, choose Generate to an external folder, and add \html to end of the folder name.
Right-click on the generated html folder and select New > Other > General > File.
Enter online.html for the file name.

Open the online.html file and add this code:

<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-api.js"></script>
        <script src="js/hwc-comms.js"></script>
        <script src="js/hwc-utils.js"></script>
        <script src="js/WorkflowMessage.js"></script>
        <script src="js/HybridApp.js"></script>

        <script>
        function findEmp() {
            var deptID = document.getElementById("deptID").value;
            emp = new Employee();
            emp.deptIdLP = deptID;
            employee_findByParameter(emp, "supusername=supAdmin&suppassword=s3pAdmin", "onError");
        }
        
        function onError(e) {
            alert("An error occurred");
        }       
        
        hwc.processDataMessage = function (incomingDataMessageValue) {
            if (incomingDataMessageValue.indexOf("<M>") != 0) {
                alert("An error occurred!  " + incomingDataMessageValue);
            }
            var workflowMessage = new WorkflowMessage(incomingDataMessageValue);
            var values = workflowMessage.getValues();
            var empList = values.getData("Employee");
            var firstEmp = empList.value[0];
            var firstName = firstEmp.getData("Employee_emp_fname_attribKey").value;
            alert("The name of the first employee is " + firstName);
        }
        </script>
    </head>
    <body>
    <form>Dept Id: <input type="text" value="100" id="deptID"/></form><br>
    <button id="findEmpsButton" onclick="findEmp()">Find</button>&nbsp;&nbsp;&nbsp;
    <button id="closeWorkflow" onclick="hwc.close()">Close</button>
    </body>
</html>

Five of the included files are from <SMP_HOME>\MobileSDK23\HybridAp\API folder. The file named HybridApp.js is generated based on the operations and object queries of the MBOs selected in the Generate Hybrid App API wizard. When the Find button is clicked, the department ID is retrieved and set on the employee object, which is an input parameter to the method named employee_findByDeptId in HybridApp.js. Once the result returns from SAP Mobile Server, it is passed into the method processDataMesssage where the first employee's name is shown.

Navigate to SMP_HOME\MobileSDK23\HybridApp\PackagingTool and double-click the packagingtool.bat file if you are using a 32-bit JDK, or packagingtool64.bat if you are using a 64-bit JDK.
Click Browse to enter the file path for your project and click OK.
Select Project > New.
Fill in Patterns_Online and the location of where the generated files currently exist (the same location specified as the Generation folder above) for the Project name and Web root directory.
Fill in the MBO package name and version to match the deployed package.
Specify the files to include in the Hybrid App for each supported platform.
Only the selected files appear in the manifest.xml file.
Click Generate to generate a deployable Hybrid App package.
Deploy and assign the Hybrid App package using SAP Control Center.