Offline Fiori App using local storage

[KarthikaMohan]

Hello SAP Community members,

This is my first blog post in the SAP Community and I am a bit anxious already 🙂 I started my career at SAP Labs 12 years ago in the development support of Materials Management domain (a mix of technical and functional knowledge) and found my passion for pure technology. After leaving SAP Labs, I focused as an SAP Development Consultant and since then, it has been an even more exciting journey learning and working on different SAP Technologies – Fiori Apps, Cloud Application Programming, SAP BTP etc.

In my quest for learning new exciting SAP tech, I have spent a lot of time browsing through and learning immensely from the SAP Blogs and thought-provoking discussions in this community. So with a grateful feeling in my mind, here it goes… my first blog!

Recently I worked on the development of an S/4 Fiori On-Premise app which involved ordering of products for a Retail chain in Europe – wherein the product list proposal populated by automatic replenishment runs in SAP F&R (Forecasting and Replenishment) can be adjusted by the Store employee when needed. A special feature needed was that, the employee should be able to operate the app when online and offline (say, when the employee is adjusting a product count when inside a walk-in freezer). Since the automatic replenishment run from F&R runs daily, the product list sent is valid only for a day.

   

Fiori architecture

App when Online

App when Offline

Because the data necessary to be available offline is not a huge set of data (each store has its own order list), the decision was made to use :

• Local Storage – data is stored in local storage – data is retained when you close the browser (sap.storage.Type.local)

 

Below are the various scenarios with the app usage and how the goal was achieved in Fiori :

• The check on online/offline status happens with the onLine function.


• When the app gets launched and the user is :
  
  
  
  • Online – product list data is retrieved from the backend, displayed and saved in local storage with a store-specific storage key (a combination of the store number and today’s date)
  
  
  • Offline – product list data is retrieved from the local storage with the store-specific storage key
  
  
  
  


• When the user updates the order quantity of a product and the user is :
  
  
  
  • Online – the updated order quantity is directly sent to the backend via a call to the OData service.
  
  
  • Offline – the new order quantity is updated in the local storage
  
  
  
  


• The items changed offline will be stored in the local storage until the user goes online again. Hence an explicit ‘Order’ button was introduced to send these changed items to the backend system.
  
  
  
  • This button is enabled when the user is online again and there are items which were changed offline.
  
  
  • An auto-sync feature was also introduced in the “init” method of the controller to check every 10 seconds - if the user is online. If so, an auto-update of the changed items to the backend is triggered.
  
  
  
  

 

• The browser local storage for all the previous dates - except the offline storage dated today – is removed.

• An additional feature was to have the ‘Order’ button in green color when the user is online & disabled when the user is offline. This informs a busy store employee if his PDA is online or not.

Even though a local storage is pretty commonly used in Fiori apps, it was an interesting experience for me to use local storage to store the whole product list, discuss more on different store employee scenarios and influence the user experience towards a quite seamless transition between online and offline modes.

Conclusion

After going through this post, you should be able to use the local storage to develop Fiori applications which can switch seamlessly between online and offline modes without losing data. If you have any feedback or comments, please feel free to leave them below.

• Please follow the SAP Fiori topic page for related updates.


• Post questions and answers on SAP Fiori here.


• Read other SAP Fiori blog posts here.


• Please follow my profile karthika_mohan13 for future posts.

Thank you! 🙂