This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services to build hybrid apps. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-l...
Parameter | Value |
Name | ES4 |
Type | HTTP |
Description | ES4 Gateway System |
URL | https://sapes4.sapdevcenter.com:443/sap/opu/odata |
Proxy Type | Internet |
Authentication | Basic Authentication |
User | <your registered user> |
Password | <your password> |
For Additional Properties fields click New Property and fill-up
Parameter | Value |
TrustAll | True |
WebIDEEnabled | True |
WebIDESystem | ES4 |
WebIDEUsage | odata_abap |
5. Click Save.
Or
3. Select Plugins. Find and check Hybrid App Toolkit to enable the plugin.
4. Click Save.
5.Click Refresh to reload SAP Web IDE
3. On Template Selection page, select SAP Fiori Application category and click on the CRUD Master-Detail Application to mark it as the template to be used for your new project
4. Click Next.
5. On the first page of the wizard, enter the Project Name as OfflineApp, Title as Products, and Namespace as com.sap.offlineapp
6. Click Next
7. On the Data Connection page click on Service Catalog as service source.
8. From the drop down box select the ES4 Gateway System entry.
9. Type “BASIC” in the Search input field to filter
10. Select GWSAMPLE_BASIC service.
11. Click Next.
12. On Template Customization page, fill up the Data Binding - Object section as below
Check the box for “Display only required fields when creating a new identity”
13. Scroll down to the Data Binding – Line Item section,fill up the section as below.
14. Click Next.
15. Click Finish to create the new application.
16. Run the newly generated web application
17. Congratulations! You developed your CRUD Master-Detail application and you see it already running in preview mode.
2. Switch to code editor view
3. Add the following code snippet at the end of the file
"sap.mobile": {
"_version": "1.1.0",
"definingRequests": {
"ProductSet": {
"dataSource": "mainService",
"path": "/ProductSet?$expand=ToSalesOrderLineItems"
}
}
}
4. Save and close the file
4. Select the button on the bottom panel that we just added. On the right-hand side canvas, we will see a Properties/Button setting panel. Delete values in Text and Width properties, add sap-icon://refresh to Icon property.
5. Now your bottom panel should look like this
6. On the right-hand side canvas, select Events setting. and Press, New Function
7. Enter onSyncData, click OK
8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.
9. Replace empty onSyncData function with the following code
,
/**
*@memberOf com.sap.offlinesample.controller.Master
*/
//Code to refresh/flush OfflineStore
onSyncData: function() {
if (sap.hybrid && sap.hybrid.isApplicationOnline()) {
this.getView().setBusy(true);
sap.hybrid.synAppOfflineStore(jQuery.proxy(this._syncSuccess, this), jQuery.proxy(this._syncFailed, this));
} else {
this._oODataModel.refresh();
}
},
//Synchronization Succeeds
_syncSuccess: function() {
sap.m.MessageToast.show("Data Synchronization succeeded", {
duration: 3000
});
this.getView().setBusy(false);
this._oODataModel.refresh();
},
//Synchronization Failed
_syncFailed: function() {
sap.m.MessageToast.show("Data Synchronization failed", {
duration: 3000
});
this.getView().setBusy(false);
this._oODataModel.refresh();
}
10. Save and Close both view and controller files
3. In the New Application pop up dialog, fill up with the following values
4. Click Save button. This saves the application and go to Edit Application page
5. In editing application page. Select Connectivity
6. Click on new destination Icon to create new destination
7. In Create Destination popup dialog, choose Mobile Destination for Type, and com.sap.offlineapp for Destination Name
8. Click Next
9. Fill-up the values as below
Parameter | Value |
URL | https://sapes4.sapdevcenter.com:443/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ |
Proxy Type | Internet |
10. Click Next
11. Choose Basic Authentication for SSO Mechanism
12. Click Next.
13. Fill in the User Name and Password for the backend account (SAP Gateway ES4 Demo System OData Service account).
14. Click Next and click Finish.
15. Go back to Edit Application page, and choose Security
16. Change Security Configuration to None, and then click Save
3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android
4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData
5. Click Save button
4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.
5. Tap Disable Passcode button to load the application. It will show the loading screen as below. This is an indication that our application is an offline application
6. After creating offline store, the application screen should be like below
3. Change the Currency Code from EUR to SGD.
4. Click Save button.
5. Now on the phone screen, we can see that the currency code of HT-1000 has been changed.
6. Switch to WebIDE, and click run, to run our web app. We can see that the currency code of HT-1000 remains at EUR. This is because the changes we make on mobile app is only stored on local store and not yet updated in backend service.
7. Switch to the mobile app, and click the Synchronization button, wait for the synchronization completed successfully.
8. Switch to the web app that we are running, and refresh the page. We can see that after synchronization, the currency code is finally updated to SGD.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
10 | |
9 | |
9 | |
9 | |
8 | |
6 | |
5 | |
5 | |
5 |