Offline-capable UI5-Application Part 2/2: IndexedDB and extended OData Model

During these times of the pandemic, more and more activities have been shifting to remote work, here in Germany known as “home office”. This additional data traffic has been increasingly burdening the infrastructure and there is a requirement to keep certain functions of an application available, even in areas free of Wi-fi and mobile communications. In this blog post, the local IndexedDB is used to store app data. The SAP oData v2 model is extended so that a failed communication with the SAP backend is automatically recognized. Endpoint, HTTP verb and payload are cached in the IndexedDB and sent again as soon as the application has an Internet connection again.

Contents Expertblog Part 2/2

Create Data: Online
Create Data: Offline
Delete Data: Offline
Synchronization
Outlook

1. Create Data: Online

The data is saved via the interface of the table model in the online state. The new data is created via the GUI and transferred to the backend.

Add new Gui Backend

Get Model save data response

The table shows the data read from the backend.

2. Create Data: Offline

For the test case, the network is deactivated via the Chrome browser options. For the user, the creation process on the surface is the same. As in online mode, the data is created via the GUI.

Deaktivierung Testfall

Add new on indexed

Request failed

View1.controller.js

After saving, it is read manually (S1)

Copy to Clipboard

Table.js

Copy to Clipboard

oData.js

After the Createcall has failed as planned the data to be saved, including the path, is forwarded to the IndexedDB. The data is given an additional attribute “_http” with the value “create” for later synchronization.

Copy to Clipboard

/**
 *@description extended CREATE
 *@memberOf oData
 *@param {String} sPath - A string containing the path to the collection
 * where an entry should be created.
 * The path is concatenated to the service URL which was specified in the
 * model constructor.
 *@param {Object} oData - Data of the entry that should be created.
 *@param {Object} mParameters - Optional parameter map, refer to API
 */
create: function(sPath, oData, mParameters)
{
   oData = this._trimPayload(oData);
   var that = this;
   mParameters.success = (function(success)
   {
      function fnExtend(data, oData)
      {
         success(data, oData);
         that._createSuccessCallback(data, oData, this)
      }

return fnExtend.bind({
         path: sPath,
         data: oData
      });
   }.bind({
      path: sPath,
      data: oData
   }))(mParameters.success);

mParameters.error = (function(error)
   {
      function fnExtend(data)
      {
         that._createErrorCallback(data, this)
            .then(function()
            {
               error();
            });
      }

return fnExtend.bind({
         path: sPath,
         data: oData
      });
   }.bind({
      path: sPath,
      data: oData
   }))(mParameters.error);

ODataModel.prototype.create.call(this, sPath, oData, mParameters)
},

…

/**
 *@description Extended CREATE ERROR function
 * Stores data in local Index DB
 *@memberOf oData
 *@param {Object} data - Data resulting from call
 *@param {Object} mParameters - 1: called sPath, 2:saved object
 */
_createErrorCallback: function(data, mParameters)
{
   console.error("CREATE ERROR: %s \n Property %s not Set", data.message, sPath);
   var sPath = mParameters.path;
   var oUnsavedData = mParameters.data;
   oUnsavedData._http = 'create';
   return this._oComponent.getIndexDb()
      .create(oUnsavedData, sPath);
},

IndexedDb.js

If necessary, a new table (sPath) is first created in the IndexedDB. The data is then stored there.

Copy to Clipboard

/**
 *@description stores data in indexeddb and creates Table if necessary
 * adds property _http to save the intended http action (CRUD)
 *@memberOf IndexedDb
 *@param {object} data - data to be stored in indexed db
 *@param {String} sTable - Name of table that data is added to
 */
create: function(data, sTable)
{
   var that = this;
   sTable = that._trim(sTable)[1];
   return Promise.resolve()
      .then(that._createTable.bind(that, sTable))
      .then(that._createData.bind(that, data, sTable))
      .catch(function(err)
      {
         console.error("Data could not be written to INDEXEDDB");
      })
},

…

/**
 *@description creates a new table
 *@memberOf IndexedDb
 *@param {String} sTable - Name of table that data is added to
 */
_createTable: function(sTable)
{
   if (!this._tableAvailable(sTable)) version++;

…

/**
 *@description create indexdb entry
 *@memberOf IndexedDb
 *@param {object} data - data to be stored in indexed db
 *@param {String} sTable - Name of table that data is added to
 */
_createData: function(data, sTable)
{
   return new Promise(function(resolve, reject)
   {
      var oTransaction = IndexedDb._db.transaction(sTable, "readwrite");
      var oDataStore = oTransaction.objectStore(sTable);
      oDataStore.add(data);
      IndexedDb._db.close();
      resolve();
   })
},

The entry can be found in the IndexedDB accordingly. An additional attribute (_http), which stores the http verb, was added for later processing

Subsequently, the data is read new and the table shows local data as well as data from the backend.

saved locally

3. Delete Data: Offline

Deletion of data should work the same way as the creation of data, if the application has no access to the SAP systems. The delete function, described below, removes local entries and also creates delete tokens for entries on the backend in the IndexedDB in the offline state.
The application is shifted to offline again in order to delete the first entry in the list (backend data).

The program sequence is as follows:

Programmablauf

View1.controller.js

Process-Start via ViewController:

Copy to Clipboard

Table.js

Forwarding the request:

Copy to Clipboard

oData.js

After the removal call has failed, the sPath is forwarded to the “_removeErrorCallback” method:

Copy to Clipboard

/**
 *@description extended REMOVE
 *@memberOf oData
 *@param {String} sPath - A string containing the path to the collection where an entry should be created.
 * The path is concatenated to the service URL which was specified in the model constructor.
 *@param {Object} mParameters - Optional parameter map, refer to API
 */
remove: function(sPath, mParameters)
{
   var that = this;
   mParameters.success = (function(success)
   {
      function fnExtend(data, oData)
      {
         success(data, oData);
         that._removeSuccessCallback(data, oData, this);
      }

return fnExtend.bind({path: sPath});
   }.bind({path: sPath}))(mParameters.success);

mParameters.error = (function(error)
   {
      function fnExtend(data)
      {
         error(data);
         that._removeErrorCallback(data, this.path);
      }

return fnExtend.bind({path: sPath});
   }.bind({path: sPath}))(mParameters.error);

ODataModel.prototype.remove.call(this, sPath, mParameters)
},

…

/**
 *@description Extended REMOVE ERROR function.
 * Stores items that are to be deleted in indexedDB
 *@param {Object} data - Data resulting from call
 *@param {String} sPath - called Path, including Key
 */
_removeErrorCallback: function(data, sPath)
{
   return this._oComponent.getIndexDb()
      .remove(sPath)
},

IndexedDb.js

As in the case of storing the data in the “Create” process, it is first checked as to whether a “Spath” table already exists. If this is not the case it will be created then. If the _removeData method does not find an entry under the path and key passed, it is stored locally as an entry to be deleted.

Copy to Clipboard

/**
 *@description Checks if affected tableentry exists. triggers creation of table if needed.
 * if data cannot be found in indexed db, the system asumes that the entry needs to be saved
 * to be deleted later
 *@memberOf IndexedDb
 *@param {String} sPath - Name of Spath that is read (most of it is also the iDB table name)
 */
remove: function(sPath)
{
   var that = this;
   var sKey = this._getKeys(sPath);
   var sShortPath = this._trim(sPath)[0];

return Promise.resolve()
      .then(that._createTable.bind(that, sShortPath))
      .then(that._removeData.bind(that, sShortPath, sKey, false))
      .catch(function(err)
      {
         that._removeData(sShortPath, sPath, true)
            .then(function()
            {
               console.log("deleteToken successfully written to IndexedDB")
            })
            .catch(function(err)
            {
             })
      })

…

/**
 *@description Removes entry from indexed DB
 * if entry is not found, affected key and table are stored to be dealt with later
 *@memberOf IndexedDb
 *@param {String} sTable - Name of Spath that is read (most of it is also the iDB table name)
 *@param {String} sKey - spath Key
 *@param {Boolean} bDeleteToken - remove a delete token from INDEXED DB (_http: remove).
 * if false, its assumed that a create entry is to be delete after it was successfully send to the backend
 */
_removeData: function(sTable, sKey, bDeleteToken)
{
   var that = this;
   var bIndexedEntryFound = false;

return new Promise(function(resolve, reject)
   {
      var request = indexedDB.open("localStorage", version);
      request.onsuccess = function(oEvent)
      {
         IndexedDb._db = oEvent.target.result;
         var objectStore = IndexedDb._db.transaction([sTable], "readwrite").objectStore(sTable);
         var request = objectStore.openKeyCursor(sKey);
         request.onsuccess = function(oEvent)
         {
            var cursor = oEvent.target.result;
            if (cursor)
            {
               bIndexedEntryFound = true;
               objectStore.delete(cursor.primaryKey);
               cursor.continue();
            }
            else
            {
               if (!bIndexedEntryFound)
               {
                  if (bDeleteToken)
                  {
                     that.create({ //...create indexeddb table with delete token, if it doesnt exist
                        'Id': sKey,
                        _http: 'remove'
                     }, sTable)
                        .then(function(data)
                        {
                           IndexedDb._db.close();
                           resolve();
                        })
                  }
                  else
                  {
                     reject();
                  }
               }
               else
               {
                  resolve(); //entry found + deleted
               }
            }
         };
      }
   })
},

4. Synchronization

The local data must be synchronized with the SAP system After the network is available again. There is now an entry for deleting and an entry for creating data.

On the IndexedDB a distinction which depends on the stored http verb is made as to whether data is to be created or deleted.

entscheidung_resolve

View1.controller.js

Process start:

Copy to Clipboard

IndexedDb.js

Processing of locally stored data:

Copy to Clipboard

/**
 *@description After the system is back online, this will synchronize local storage with Backend data
 *@memberOf IndexedDb
 *@param {String} sTable - Name of table that data is add
 *@return {promise}
 */
processLocalData: function(sTable)
{
   var that = this;
   return new Promise(function(resolve, reject)
   {
      that.getTable(sTable, true)
         .then(function(data)
         {
            data.forEach(function(line)
            {
               var sKey = line.Id;
               if (line._http === 'create')
               {
                  that._oComponent.getModel()[line._http](sTable, line, {
                     success: function()
                     {
                        that._removeData(sTable, sKey, false)
                           .then(function()
                           {
                              resolve()
                           });
                     },
                     error: reject
                  })
               }
               else if (line._http === 'remove')
               {
                  that._oComponent.getModel()[line._http](line.Id, {
                     success: function()
                     {
                        that._removeData(sTable, sKey)
                           .then(function()
                           {
                              resolve()
                           });
                     },
                     error: reject
                  })
               }
            });
         });
   })
},

4. Outlook

Depending on application area, it is conceivable to build an app that after initial loading works independently of the network. All functions are therefore available to the user at any time. Field service technicians or mechanics in large production halls can load the required master data for the application upon opening the app. Full functionality is still guaranteed even though you might be e.g. in storage rooms without reception or at the customer without WIFI. New data is simply created in the IndexedDB and synchronized when the network is available.

Back to Blogpost one