Creating Offline-Capable SAPUI5 Applications Using IndexedDB and Local Storage On premises.

By /

Introduction

Offline functionalities in SAPUI5 applications are crucial when users need to work without a continuous internet connection. The idea is to enable the application to function as seamlessly as possible even when it’s offline, syncing data when the connection is restored. Here I want to discuss offline capabilities of SAP UI5 application using IndexedDB and Local Storage. We can able to create fully functional offline applications/Hybrid applications but here I’m demonstrating SAP UI5 application with offline capabilities in any kind of on premises systems without using ECC/HANA servers. By using local data/ Local Storage Data and IndexedDB data with object (navigator) we are differentiating offline and online data storage with Local Storage and IndexedDB respectively.

Prerequisites

  1. SAP Business Application Studio (BAS) or SAP Web IDE or VS Code for development.
  2. Familiarity with SAPUI5 basics, JavaScript, and storage concepts (Local Storage/Session Storage/IndexedDB).

    Overview of Offline Storage Options

    SAPUI5 provides two main ways to manage data offline:

    Local Storage: Local Storage in JavaScript allows web applications to store data locally within the user’s browser with no expiration date. The data isn’t deleted when the browser is closed, and is available when the browser is opened again. Here we are using local storage to store data when application is online.

    IndexedDB: IndexedDB is a client-side storage mechanism that can store significant amounts of structured data, including files. Using IndexedDB for SAPUI5 apps allows for more control over offline data storage. It is a common way to cache API responses or persist data during offline scenarios. IndexedDB allows creating databases, object stores, and performing CRUD (Create, Read, Update, Delete) operations. This approach is useful when you want to store specific data structures locally, like JSON responses from APIs, and access them when the app is offline. Here we are using indexedDB to store data when application is offline.

     

    Creating the SAPUI5 Application: Here we are working with Business Application Studio. We need to create a basic SAP UI5 application from template.

    File->new project from template -> select SAP fiori/ui5 basic free style applicationànext ->Data Service and Service Selection(if required need to give OData service selection otherwise select none) -> next->Entity Selection(View name)->next->Project Attributes (Module name, Application title, namespace, description, folder path, Deployment Configuration and FLP Configuration)->finish.

    ChiruSAP_0-1732769156678.png

    Given application as “OfflineUI5App”.

    ChiruSAP_1-1732769195962.png

    Now I want to create a View with basic form template with input field and two buttons. One button is “Save Data” to save data in local storage/IndexedDB and one more button is to “Load Data” to load data from local storage/IndexedDB. And one text field to show the loaded data on screen.

    View1.view.xml:

    ChiruSAP_2-1732769255611.png

    Now we can see the required layout in our application as view.

    ChiruSAP_3-1732769297349.png

    Implementing the Controller Logic:

    In View1.controller.js file we are going to implement key functions like “onSave”, “onLoad”, “openDatabase”, “saveNoteOffline” , and “getNoteOffline”.

    Checking Network Status

    Use `navigator.onLine` to detect online/offline status.

    Creating the `onSave` and `onLoad` Functions:

    onSave: onSave function is used to collect the data from input field and saving it to local storage when application is online, to IndexedDB when application is offline by checking network status.

    onLoad: onLoad function is used to load the data from local storage when application is online and from IndexedDB when application is offline.

    Code for onSave and onLoad functions:

    ChiruSAP_4-1732769347889.pngChiruSAP_5-1732769372506.pngChiruSAP_6-1732769388426.pngChiruSAP_7-1732769407344.png

    IndexedDB Functions

    Code for initializing and working with IndexedDB:

    ChiruSAP_8-1732769435068.png

    Testing the Application

    To verify functionality, test both online and offline scenarios:

    Save data to localStorage when online.

    ChiruSAP_9-1732769505388.png

    By clicking on load data button, data will be fetching from localStorage.

    ChiruSAP_10-1732769538104.png

    Saving Data to IndexedDB when offline.

    ChiruSAP_11-1732769575002.png

    By clicking on load data button data is fetching from indexedDB.

    ChiruSAP_12-1732769606426.png

    Conclusion

    Using `localStorage` and `IndexedDB` in SAPUI5 enables effective offline data management. This documentation covers only offline capabilities of a SAPUI5 application with offline persistence. This is just an introduction to offline capabilities of SAP UI5 applications. Further to implementing offline capabilities in SAPUI5 applications requires a combination of OData offline models, local storage techniques, service workers, and potentially custom synchronization logic. Each method has its strengths depending on the use case and the amount of data that needs to be stored offline. These techniques ensure a smooth user experience by allowing users to continue working without an internet connection and seamlessly synchronizing when the network is available again. Further we are going to explore complete robust offline capable or hybrid applications with OData offline models, local storage techniques, service workers, and potentially custom synchronization logic.

     

Scroll to Top