In part 2, you will learn how to enable OData offline capabilities for the ESPM application, using SAP FIORI Mobile service

Why Offline?

The basic concept of offline enablement is to provide a copy of the necessary business data – all data that is required for the operation of the app – in a local database on the device and let the application manipulate this local database.

Initially, you need to replicate the business data from the online OData service to the offline local database once; and during normal operation, you need to synchronize between the online and offline data sources regularly to provide consistent business processes.

Both the initial data replication and the regular synchronization need network connection.

You can use the application when network connectivity is not available, due to technical reasons, or not allowed.

It also provides better performance when accessing and manipulating data that is stored locally on the device.

At the same time, these advantages have a price: data must be downloaded to the device in advance while network connectivity is available and stored on the device locally.

The local database holds the offline data sets and is called as the offline store.

Step-by-step Guide to add OData Offline capability to the ESPM application

Prerequisites: You have completed the part 1 of the tutorial as mentioned https://blogs.sap.com/2017/05/04/fiori-mobile-service-with-enterprise-sales-and-procurement-model-espm-part-1/

Business Scenario – In ESPM application, we have the products catalog which the customer can browse for products, checkout and order a product(s). In this blog, we shall demonstrate how to bring the Products information in offline mode (no network connectivity) in the app.

Step1: Open the ESPM application in the SAP Web IDE

Step2: Open the manifest.json file under webapp folder by double clicking

Step3: Add a new section sap.mobile in the manifest file.

This section holds the offline store definition and scenario (explained in next step).

Offline store has a

• name – name of the Offline store
• (odata) service root – url of the backend oData service
• defining requests. – requests or entity data that will be populated in the offline store

Please copy and paste the below snippet in the manifest.json file as shown in the screen shot below.

"sap.mobile": { "_version": "1.1.0", "definingRequests": {}, "stores": [ { "name": "PRODUCT_LISTING", "serviceRoot": "/ESPM/espm-cloud-web/espm.svc/", "definingRequests": { "Products": "/Products" } } ] } 

Step 4: Save and deploy to SAP Cloud Platform

Save the files and deploy the app to SAP Cloud Platform. Choose the option to update an existing application.

Step 5 : Build the application

• In SAP Web IDE, right click the project and select Fiori Mobile > Build > Build Packaged app

• In the next popup, Provide the app info as shown in the screen shot and click on Next button
  • Enter App name, this is the application name for packaged app.
  • (optional) enter description
  • (optional) provide application icon and splash screen

• Select the Signing profiles for Android and iOS, that we have already generated/uploaded in the Fiori Mobile Admin console and click on Next button
  • (optional) Select Build debug enabled binaries, to debug the app from chrome console
  • (optional) Select Clear cached SAPUI5 library prior to initiating build, to clear the cache

• (optional) Push notification configuration. Click next button

• (optional) In case if you need multiple tile application, you can select Include additional Fiori applications in this packaged app. Click next button

• Click Build button. This build process will take some minutes. Please be patient.

Step 6: Download the packaged app binaries (APK, IPA)

• Once the build is successful, you will get the popup with QR code to download the file. Scan the QR code from your mobile to install the app on your device.

Note: Also, you would receive E-mail with the link to download the binaries

When you launch the offline app for the first time, it will take little longer as offline store needs to be created, and the data has to be synched to mobile.

You can check the offline capability by switching of the network (wifi, mobile data,…) and relaunching the app. The app should show already synched data – Products information

In this blog we covered the refresh feature (download data from server) for the first time in offline mode.