Skip to Content

Creating an offline app with the mobile service for SAP Fiori – Part 1

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


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 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.

    "": {

        "_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 …

You must be Logged on to comment or reply to a post.
  • Hi Former Member,

    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?




    • 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.

      • Hi Former Member,

        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.



  • Great blog Former Member !

    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


  • Thank you Former Member 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,



    • 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

    • 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.

  • 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.




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

      • 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"nw.epm.refapps.purchaseorders.approve.offline.Scenario");"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")

        "": { "": { "_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 } }



  • 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 namespace for the manifest.json file has been this:

    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,


    • Hi Diego,


      I’ve updated the screen shot and extra parameter.

      Next part is published now, it has further details and references.


      Thank you

      • 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


    • 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

  • 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,



  • Hi,


    How do you handle dynamic service call scenario in this offline app? For instance, I have a drop down box Plant, once I select the same, the corresponding Storage Locations are fetched in a service call. If I have to add this sort of scenario for offline app how can that be achieved.




  • Hi Radhakrishna,

    Thanks for this blog. I have followed it to the end and all was working well until the last step. The application looks to be doing the right thing. I get the message about the local store being provisioned. Then the application starts to load the views but I get Suppliers (0). The message "No Suppliers are currently available". Any idea as to what I have done wrong?

    Even tried adding in the suppliers. (not sure if this is correct) in the manifest.json file.

    "definingRequests": {
    "Products": "/Products",
    "Suppliers": "/Suppliers"



  • Eventually got this working. The problem was in the following line of code which is in the modified Manifest.json file.

    "serviceRoot": "/northwind/V2/northwind/northwind.svc/", in my case it needed to be with a lower case "v2".

    Once I changed this together the the addition of the suppliers addition previously mentioned it all worked.

    Many thanks for all the effort you put into these articles. Much appreciated.

  • Thanks for the great blog post. I’ve followed along and have a test app working with offline on my iPhone as you’ve described (with a little extra kicking around to get the iOS provisioning profile).

    i can’t see mobile services fitting in anywhere here though? What benefits would routing the OData calls through mobile services bring and what are the best practices? This method is nice and handy.... which makes me wonder why does mobile services in the cloud platform exist for a hybrid mobile app?


  • I've deployed my own app, following your instructions..

    How did you manage to hide the Fiori Launchpad header?  As you can see I'd like to hide it on mine.


  • /
  • Hello ,

    I have followed all the steps given in the blog. Still I am not able to see any offline data . I only get 3 dots for waiting and the screen hangs forever once offline. Online it works fine.Please help.

    Thanks and Regards,


    • Hey Arijit,

      In your controller please remove extra sap.ui.define lib



      Only this lib is supported offline application .




      jai sharma