Implementing the Cached Data Pattern for MBO-based Hybrid Apps

For access to cached data, define a menu action and bind it to the findByDeptId object query.

Prerequisites

Complete the procedure in Defining the Mobile Business Object so that you have an MBO with the required attributes.

Task

Using cached data is efficient when access to cached data is sufficient to meet business needs. For example, it may be sufficient to refresh the cache once a day for noncritical MBO data that changes infrequently.

Generate the Hybrid App API:
1. Right-click the mobile application project and choose Generate Hybrid App API.
2. In the tree view, select the Employee MBO, which contains the findByDeptId object query.
3. Choose Generate to an external folder and add "\html" to end of the folder name.
  
  By default, the wizard creates a Generated Hybrid App folder under the project and a sub folder named APIs.
4. Click Finish.
Right-click the html folder and choose New > Other > General > File, and enter cached.html for the file name.

Copy and paste the following contents into the cached.html file:

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

        <script>
        function findByDept() {
            var deptID = document.getElementById("deptID").value;
            emp = new Employee();
            emp.deptIDLP = deptID;
            employee_findByDeptId(emp, "supusername=supAdmin&suppassword=s3pAdmin", "onError");
        }
        
        function onError(e) {
            alert("An error occurred");
        }       
        
        hwc.processDataMessage = function (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="findByDeptButton" onclick="findByDept()">Find</button>&nbsp;&nbsp;&nbsp;
    <button id="closeWorkflow" onclick="hwc.close()">Close</button>
    </body>
</html>

Open the packaging tool to create a deployable ZIP file of the Hybrid App by double-clicking on packagingTool.bat, which is located in <SMP_HOME>\MobileSDK22\HybridApp\PackagingTool\.
Enter a location for the generated ZIP file, for example, c:\patterns.
Choose Project > New.
Fill in Patterns_Cached and the location where the generated files currently exist 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 Deploy to create a deployable package.
Log in to SAP Control Center to deploy the Hybrid App package and assign the Hybrid App to an application connection.
Review the contents of the cached.html file.
The first four included files are from the Mobile SDK located in the <SMP_HOME>\MobileSDK22\HybridAp\API folder. The last file is generated based on the operations and object queries of the MBOs selected when you generated the Hybrid App API.
When you click the Find button, 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 the SUP server, it is passed into the method processDataMesssage, where the first employee's name is shown.