Skip to Content

This blog focuses on creating an ‘offline’ mobile application with the mobile service for SAP Fiori, a service on SAP Cloud Platform.

I strongly recommend you to go thru the blog ‘How to mobilize your HTML5/SAPUI5 app with Fiori Mobile‘, which explains how to create a mobile app and run it on device.

I hope you really went thru the blog and created mobile app (or have a similar application running). We will take the app and make it offline enabled.

Now lets go thru:

  1. What is offline
  2. Things to consider
  3. Architecture overview
  4. Concepts in offline
  5. Step by step guide

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 (for example, there is no network coverage) or not allowed (for example, there are security limitation at customer site).

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 has to be downloaded to the device in advance while network connectivity is available and stored on the device locally.

 

Things to Consider:

Offline enablement requires thorough planning in advance and considering various aspects, such as

– offline working mode,

– the definition of the offline datasets,

– data synchronization strategies,

– handling of features not available in offline mode,

– and possible adaptation of existing OData services.

 

 Architecture Overview:

The offline OData technology is provided as a service on Fiori Mobile which leverages SAP HANA Cloud Platform mobile services.

The offline enabled Fiori app is implemented as a prepackaged Cordova application built for the specific mobile platforms

The Kapsel offline OData plugin contains the features required for the offline enablement with the necessary local database that will store all the data required for the operation of the app.

 

Lets get ourselves familiarised with some of the concepts in offline.

Offline Store:

The offline store is a local offline database that stores all data required for the operation of the app. It stores all data that is available offline for your application and the application will always use this database. Even when the device has network connectivity, your application will not access data that is part of the offline store directly from the back-end server but will use the local database.

One offline store can only be used with one OData service and you need to synchronise the store with the back-end database regularly when the device has network connection.

Offline Data Sets:

In order to provide sufficient data for the end user in offline mode, you need to determine which collections and which subset of these collections are required while working offline. During this process both data volume and functional consistency options should be considered, especially for performance reasons.

You can define the content and the structure of the offline store by a set of defining requests. A defining request is a static OData read request that targets the OData endpoint (back-end database) associated with the offline store and retrieves a subset of the back-end data.

The correct and proper configuration of the defining requests is crucial as this will significantly influence the operation and performance of the offline-enabled app. You can define multiple defining requests for each OData endpoint. Defining requests define the subset of data sent to the client by the OData Producer during the initialisation of the offline store. Defining requests become fixed for the offline store the first time it is opened.

Data Synchronisation:

Data synchronisation between the server and the local device has two directions: changes made on the device (for example, new, updated, and deleted records) are sent to the back end during flush operations, and data changes on the back-end server (for example, changes by other users or by the same user as a consequence of its previous flush) are downloaded to the device during refresh operations.

 

Switch off all your data networks (WiFi, mobile data,..) on your device and try opening the previous built mobile application on your device. It would throw the below error as its not able to connect and get the data.

 

Now lets make the application offline and get rid of this error.

Step-by-Step Guide:

1. Open the app (product listing) in WebIDE

 

2. Open the manifest.json file under webapp folder by double clicking and select ‘Code Editor’ tab at the bottom.

 

3. Add a new section sap.mobile in the manifest file. This section holds the offline store definition. Offline store has a name, (odata) service root and the defining requests (odata entities). If you want to limit the data to be stored offline, you can do so by appending odata filters at the end of defining requests.

    "sap.mobile": {

        "_version": "1.1.0",

        "definingRequests": {},

        "stores": [

            {

                "name": "PRODUCT_LISTING",

                "serviceRoot": "/northwind/V2/northwind/northwind.svc/",

                "definingRequests": {

                    "Products": "/Products"

                }

            }

        ]

    }

 

 

4. Deploy the application to ‘SAP Cloud Platform’

 

 

5. Choose the option to ‘Update an existing application’

 

6. After deployment, start the building of packaged app by right click on the project and select ‘Fiori Mobile’ >> ‘Build Packaged App’

 

7. You can leave the all the options(application icon, splash screen, signing profile,…) as is from the previous build (How to mobilize your HTML5/SAPUI5 app with Fiori Mobile) or change them and start ‘Build’.

 

8. Once the build is successful, scan the QR code, download and install (or update) the app.

9. After you logon to the app on device, you would notice a new screen which says ‘The local store is being provisioned’. At this stage, the app is creating a new offline store on device with the provided name (‘PRODUCT_LISTING’). After the store creation is successful, app syncs (refresh operation) the data from server to the device

10. Then the app is opened with the list of products. You need network for the initial synchronisation of the data.

11. Now you can kill the app, switch off all the data networks, and relaunch the app. The app will show the data from the device and it will be faster.

 

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

There are other concepts in offline like Flush, Exception Handling, Conflict Handling. Let’s discuss in the next part …

To report this post you need to login first.

35 Comments

You must be Logged on to comment or reply to a post.

  1. Sudhir Lenka

    Hi Radhakrishna Bodapati,

    When you say Data Synchronization between device and server by the following two operations..

    1. Flush Operation

    2. Refresh Operation.

    will it be taken care by the HCP automatically or we need to trigger these two operations?

    Could you please share some reference documents/links if you have for this synchronization mechanism?

    Thanks,

    Sudhir.

     

    (0) 
    1. Radhakrishna Bodapati Post author

      Initial sync(refresh – get data from server) is done automatically. But further flush/refresh operations on the offline store have to be done by application developer based on application design. In the next blog, I’ll explain how easily it can be done.

      (1) 
      1. Shubham Paidipill

        Hi Radhakrishna Bodapati,

        I am trying to implement this using Custom UI5 application.

        First time Refresh is done automatically but How to perform Refresh Operation further.

        Could you help How to perform Refresh Operation further.

        Waiting for your next Blog.

        Thanks,

        Shubham

        (0) 
  2. Karel Verbanck

    Great blog Radhakrishna Bodapati !

    Waiting for the next blog!

    Just one small questions. Let’s call it a sneak preview 😉

    How can I acces the offline store from the application to perform a flush and other operations on it?

    Normally i would call my instance that I saved in the devlogon.js, but in this example i haven’t got the saved instance…

    Is there any way to access it from the application?

    Kind regards,

    Karel Verbanck

     

    (0) 
  3. Sudheer kumar chinnabathuni

    Thank you Radhakrishna Bodapati for providing the great blog.

    Here i have followed each and every step in the above blog. i am able to run the mobile app in

    online mode and with out offline code.  But when i add the offline functionality

    code in Manifest file the app is not loading the data even in the online mode. Could you please find

    the below screen shots and please help me out from this problem.

     

     

    Thank you,

    Regards,

    Sudheer.

    (1) 
    1. Joel Provost

      Exact same thing here!

      I followed thoroughly each step (by the way, the code snippet for the manifest does not work, but the manifest screenshot below it seems like the way to go) although when opening the app, it does the local store provisionning step and then get stuck on loading data… Exactly as the screenshots Sudheer kumar chinnabathuni posted.

      Did anyone succeeded with these same steps? Did you modify the code snippet for the manifest and if so, how?

      Thanks in advance

      (0) 
    2. Britt Womelsdorf

      Sudheer – which template did you use for your app?  I’m having some issues myself, but they are slightly different than the ones you reported here.  I’m trying to work through them now.  Sorry for the late reply.

      (0) 
  4. Mutyala Rao Pasam

    Hi Experts,

    me also facing same problem.

    I am able to run the mobile app in online mode and with out offline code.  But when i add      the offline functionality code in Manifest file the app is not loading the data even in the online mode. Anyone solve this problem.

     

    Regards,

    mutyam.

    (0) 
    1. Britt Womelsdorf

      Could you post your entire manifest.json file?  I usually put the sap.mobile section right above sap.ui5 section.  If you put it on a different level it can cause app problems.

      (0) 
      1. Khaja Azizuddin

        Hi Britt

        I have followed all the steps and successfully using (project from sample application – Approve Purchase Order)  using Fiori mobile cloud build service. I have successfully tested it online , but the offline capability still doesn’t work, and I also don’t see that the initial “local store being provisioned” step. Below are my lines of code have added for your reference, kindly help

        Scenario.js

        jQuery.sap.declare(“nw.epm.refapps.purchaseorders.approve.offline.Scenario”);jQuery.sap.declare(“nw.epm.refapps.purchaseorders.approve.offline.Scenario”);nw.epm.refapps.purchaseorders.approve.offline.Scenario = {// The init function can be used to manipulate the local launchpad or for an time // based sync mechanismus (sync every 5 Minutes).    init: function () {
        }};

        manifest.json(added just above sap.ui5″)

        “sap.mobile”: { “sap.mobile”: { “_version”: “1.1.0”, “scenario”: “nw.epm.refapps.purchaseorders.approve.offline.Scenario”, “definingRequests”: {}, “stores”: [ { “name”: “PurchaseOrders”, “serviceRoot”: “/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/”, “definingRequests”: { “PurchaseOrders”: “/PurchaseOrders”, “PurchaseOrderItems”: “/PurchaseOrderItems” } } ] }

        ACF file

        {{     “applications”:[          {               “id”:”nw.epm.refapps.purchaseorders.approve”,               “cloudComponentId”:”nwepmrefappsextpoapvsub”,               “url”: “/sap/fiori/nwepmrefappsextpoapv”,        “scenario”:true           }], “appconfig”:{ “offline”:true } }

         

        Thanks

        (0) 
  5. Diego Borja

    Hi Radhakrishna,

    Is there any documentation from SAP on how to implement the flush and refresh for the Cloud Platform SMP scenario? I’ve been looking everywhere and I’ve only been able to find very basic information about this. For instance all I’ve found regarding the sap.mobile namespace for the manifest.json file has been this:

    https://help.sap.com/viewer/0ce0b8c56fa74dd897fffda8407e8272/7.5.6/en-US/7701636d088147569d99b4f08d418bd9.html

    And even for the example you give, webide complains about the syntax so I had to use these extra parameters that I found in another blog to make it work.

    It would be greatly appreciated if you or anyone else from SAP can point us to a guide that explains all the features of Fiori Mobile for Cloud Platform.

    Best Regards,

     

    (0) 
  6. Ana Gil

    Hi,

    The app is in white and its message is “Login with authentication type FORM failed” in log (development and operation).

    Thanks.

    (0) 
      1. Ana Gil

        Hi RadhaKrishna,

         

        The solution: Selecteding “Clear cached SAPUI5 library prior to initiating build” in the moment of compilation (Build Packaged App).

        I have a questions, Should I redefined GET_ENTITYSET_DELTA for build initial database?, Is ultralite the name for the database that is being used?

         

        Thank you

         

        (0) 
    1. Radhakrishna Bodapati Post author

      I think you must be using a different template when you created your project in Web IDE. Can you re-check if its ‘SAP Fiori Master-Detail Template’ as suggested in the referred blog https://blogs.sap.com/2016/12/08/how-to-mobilize-your-html5sapui5-app-with-fiori-mobile/

      (0) 
  7. Varsha Kollu

    Thank you Radhakrishna for such a good blog. This is very helpful.

    In the last step, after installing and opening the app, I cannot see the desired output. A blank screen is displayed as shown below. Could anyone help me out with the next steps?

     

    Thank you,

    Varsha.

     

    (0) 

Leave a Reply