In this blog, I am going to walk through the steps of creating an offline application based on CRUD Master-Detail template from SAP Web IDE using Hybrid App Toolkit

To follow the steps mentioned in this blog post, the following prerequisites needs to be met

Services 7377305

  • You need to install Hybrid App Toolkit local add-on in your local environment.The installation and setup instructions for Hybrid App Toolkit local add-on can be found here
  • To create a CRUD master-detail application, we need a backend destination setup in SAP Cloud Platform. For this blog, we use SAP Gateway ES4 Demo System OData Service. If you have not previously signed-up for SAP Gateway Demo System, you can sign-up here

Setting up backend destination

  1. Access Cloud Platform cockpit using
  2. On the left-hand side, select Connectivity tab, then Destinations tab.
  3. Click on the New Destination link to open new destination configuration form.
  4. Enter all fields as shown in below tables
Parameter Value
Name ES4
Description ES4 Gateway System
Proxy Type Internet
Authentication Basic Authentication

For Additional Properties fields click New Property and fill-up

Parameter Value
TrustAll True
WebIDEEnabled True
WebIDESystem ES4
WebIDEUsage odata_abap

5. Click Save.

Enable Hybrid App Toolkit Plugin in SAP Web IDE

Before creating the project using the SAP Web IDE Project template, we need to enable the “Hybrid App Toolkit” plugin, so that Hybrid Mobile features will be available in the SAP Web IDE.

  1. Open SAP Web IDE using the url  Replace the string “” with your HCP Trial Landscape account
  2. After entering SAP Web IDE, select Tools > Preferences or click on the Preference icon directly on the left bar

Tools 1172728


3. Select Plugins. Find and check Hybrid App Toolkit to enable the plugin.

4. Click Save.

5.Click Refresh to reload SAP Web IDE

Creating Offline Application based on SAP Web IDE CRUD Master

Create new project based on CRUD Master-Detail template

Now you will create a new application using the SAP Web IDE Project template wizard.

  1. In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
  2. Choose New > Project from Template to open the new project creation wizard.

Proj1 7565074

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

Proj3 7714829

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.

Proj5 7713210

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.

            Capture 22 2 9188023

14. Click Next.

15. Click Finish to create the new application.

16. Run the newly generated web application

Proj9 4120401

17. Congratulations! You developed your CRUD Master-Detail application and you see it already running in preview mode.

Configure Offline Application based on SAP Web IDE CRUD Master Settings to the project

  1. Go to Workspace, select OfflineApp/webapp/manifest.json and open it code editor.

2. Switch to code editor view

Off2 8211680

3. Add the following code snippet at the end of the file

"": { "_version": "1.1.0", "definingRequests": { "ProductSet": { "dataSource": "mainService", "path": "/ProductSet?$expand=ToSalesOrderLineItems" } } } 

4. Save and close the file

Add code to Synchronize data

In this step, we will add a button to the Master view and a javascript code to the button press event to synchronize data to and from back end to offline store on the device

  1. Go to Workspace, select OfflineApp/webapp/view/Master.view.xml
  2. Right click on Master.view.xml, choose Open With/Layout Editor
  3. Now we can view the file in Layout Editor. Drag the Button and drop to bottom panel of our app.

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

Butt2 4799448

6. On the right-hand side canvas, select Events setting. and Press, New Function

7. Enter onSyncData, click OK

Butt4 6024377

8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.

9. Replace empty onSyncData function with the following code

, /** *@memberOf */ //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() {"Data Synchronization succeeded", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); }, //Synchronization Failed _syncFailed: function() {"Data Synchronization failed", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); } 

10. Save and Close both view and controller files

Create an application on SAP Cloud Platform mobile services

  1. Go to your CPms Administration page ( Replace the string “” with your HCP Trial Landscape account
  2. Select Mobile Applications, then Native/Hybrid. Click new button

3. In the New Application pop up dialog, fill up with the following values

Cp2 9489870

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

Cp4 8390176

7. In Create Destination popup dialog, choose Mobile Destination for Type, and for Destination Name

8. Click Next

9. Fill-up the values as below

Parameter Value
Proxy Type Internet

10. Click Next

11. Choose Basic Authentication for SSO Mechanism

Cp6 5030859

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

Cp8 4188358

Configure Hybrid App Toolkit Local Add-on Settings

  1. Right click on OfflineApp, select Project Settings
  2. Choose Hybrid App Toolkit/ Hybrid App Configuration (Local Add-on)

3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android 

H2 8886741

4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData

5. Click Save button

Now we are ready to deploy the app to mobile devices through Hybrid app toolkit

Deploy the app to mobile devices

In this step we are going to deploy the app to selected mobile device and run the application in offline mode

  1. Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
  2. Wait for the HAT local add-on to created Cordova Project, Build the application in desired platform, Install the App on device and launch the application on device
  3. On start-up, application will load the Logon Screen as below

R1 9608535

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

R4 2234057

Testing the offline functionality of the app

To verify whether our app’s offline functions are working correctly, we can try the following steps

  1. Tap on HT-1000 row in master screen. This will navigate to detail screen.
  2. Click the Edit button on the detail page of item HT-1000.

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.

R2 4817367

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.

New NetWeaver Information at

Very Helpfull



User Rating: Be the first one !