Skip to Content
Author's profile photo Former Member

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

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 …

Assigned tags

      45 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Raphael Pacheco
      Raphael Pacheco

      Great blog Former Member !

      Waiting for the next blog!

      BR,

      Raphael Pacheco.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you @Raphael Pacheco

      Author's profile photo Mutyala Rao Pasam
      Mutyala Rao Pasam

       

      Great blog Former Member !

      Waiting for the next blog!

      Regards,

      mutyam

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you Mutyam

      Author's profile photo Mutyala Rao Pasam
      Mutyala Rao Pasam

      pls upload the next blog Former Member

       

      Regards,

      Mutyam

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Sorry for the delay... its uploaded now

      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      Great blog Former Member.

      Thanks a lot for sharing this information.

      Thanks,

      Sudhir.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thankyou Sudhir

      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      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?

      Thanks,

      Sudhir.

       

      Author's profile photo Former Member
      Former Member
      Blog 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.

      Author's profile photo Sudhir Lenka
      Sudhir Lenka

      Thank you so much Radhakrishna for the information.

      Eagerly awaiting for your next blog...

      Thanks,

      Sudhir.

      Author's profile photo Former Member
      Former Member

      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.

      Thanks,

      Shubham

      Author's profile photo Danny Van der Steen
      Danny Van der Steen

      thx for the clear explanation

      looking forward to the next blog

      greetings Danny

       

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Danny.

      Author's profile photo Karunaharan V
      Karunaharan V

      Simple yet covers all the info. Good one Radha !!

      Author's profile photo Virendra Soni
      Virendra Soni

       

      Great blog Former Member

      Regards,

      Virendra Soni

      Author's profile photo Karel Verbanck
      Karel Verbanck

      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

       

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Sorry for the delay Karel. Next part is uploaded.

      Author's profile photo Sudheer kumar chinnabathuni
      Sudheer kumar chinnabathuni

      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,

      Regards,

      Sudheer.

      Author's profile photo Joel Provost
      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

      Author's profile photo Britt Womelsdorf
      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.

      Author's profile photo Kumar Gaurav
      Kumar Gaurav

      Hi Sudheer,

       

      Did you find any solution to make it work, I am also facing the same issue.

       

      Thanks & Regards,

      Kumar Gaurav

      Author's profile photo Mutyala Rao Pasam
      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.

      Author's profile photo Britt Womelsdorf
      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo CHARANRAJ THARIGONDA
      CHARANRAJ THARIGONDA

      Hi Britt,

      Even i am facing same issue. App shows " Local store being provisioned" please wait.... Message.

       

      Kindly tell me how to resolve this

       

      Regards

      Charan

      Author's profile photo Former Member
      Former Member

      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,

       

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Diego,

       

      I’ve updated the screen shot and extra parameter.

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

       

      Thank you

      Author's profile photo Former Member
      Former Member

      Hi,

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

      Thanks.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ana,

       

      Can you post a screen shot here?

       

      Thanks and regards

      RadhaKrishna

      Author's profile photo Former Member
      Former Member

      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

       

      Author's profile photo Former Member
      Former Member

      I am unable to find manifest.json in my project files. I have neo-app.json.

      I don't know what to do? There are too many confusion.

      Author's profile photo Former Member
      Former Member
      Blog 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/

      Author's profile photo Former Member
      Former Member

      Thanks Radhakrishna!

       

      Another solution that I'm using could be helpful for someone here. You can check DataScope (https://www.mydatascope.com) offline forms, they have a free version and you can sync when get internet back.

      Author's profile photo Former Member
      Former Member

      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.

       

      Author's profile photo Adam Harkus
      Adam Harkus

      How does this relate to jquery.sap.storage?

      What if the offline data would be too large to store on a mobile ?

      Author's profile photo Vladislav Volodin
      Vladislav Volodin

      It is a different thing. If you check the API of the j.s.s, you will see it works with the browser capabilities only: https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.storage.html

      Offline OData is a native implementation of the MobiLink synchronization, but using OData as a backend.

       

      Author's profile photo reshma a
      reshma a

      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.

       

      Regards

      Reshma

      Author's profile photo Philip Hargreaves
      Philip Hargreaves

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

      Regards

      Phil

      Author's profile photo Philip Hargreaves
      Philip Hargreaves

      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.

      Author's profile photo Jason Scott
      Jason Scott

      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?

       

      Author's profile photo Adam Harkus
      Adam Harkus

      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.

       

      Author's profile photo Jai Sharma
      Jai Sharma

      hey  Former Member ,

      after follow all this steps I got same error..

      PLEASE help me out for this ..

      thanks

      regard

      jai

      Author's profile photo SAP Implementation Team Techmahindra
      SAP Implementation Team Techmahindra

      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,

      Arijit

      Author's profile photo Jai Sharma
      Jai Sharma

      Hey Arijit,

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

      "/controller/BaseController",
      "sap/ui/model/json/JSONModel",
      "/model/formatter",
      "sap/ui/model/Filter",
      "sap/ui/model/FilterOperator",
      "sap/ui/comp/valuehelpdialog/ValueHelpDialog",
      "sap/ui/comp/filterbar/FilterBar",
      "sap/ui/comp/filterbar/FilterGroupItem",
      "sap/m/SearchField",
      "sap/m/Input",
      "sap/ui/core/routing/History"

       

      Only this lib is supported offline application .

       

      thanks

      regard

      jai sharma