Skip to Content
Author's profile photo Karthik Arjun

Create Offline application in SAPUI5 (using pouch db)

Hi Everyone- As all of you know about what is offline, but few of them may not have many idea about offline. For them, this blog will be helpful. If not, please leave your comment.

What is offline application?

Offline data refers to data used for data-driven marketing on digital marketing channels and which originates from offline sources.

Required plug-in:

PouchDB has an asynchronous API, supporting both callbacks and promises.

 

Implementation steps in SAPUI5:

Step 1: //Add pouch db plug-in API Reference Refer this api and add this plugin in Index.html.

Step 2: //Create a list or combo box  by using models


Capture.PNG

 

Step 3: //Add methods to create/update/delete records in offline db

 

Get Records: db.get(docId, [options], [callback]

Post Records: db.put(doc, [docId], [docRev], [options], [callback])

Delete Records: db.remove(docId, docRev, [options], [callback])

 

 

Now your offline db is ready to use.

 

Capture.PNG

 

code snippet:

 

View: //JSON Model- Client Side Model

 

 

var checkBoxData = [{

   "options" : "Bangalore"

  },

                    {

   "options" : "Chennai"

  },

                    {

   "options" : "Hyd"

  },

                    {

   "options" : "Kerala"

  }];

  var jsonModel = new sap.ui.model.json.JSONModel(checkBoxData);

  var checkBox = new sap.m.CheckBox({

                id : "idCheckBox",

                text : "{checkBoxData>options}"

                });

  var vbox = new sap.m.VBox("idVbox",{

   items : {

     path : "checkBoxData>/",

     template : checkBox

   }

  });

 

 

  vbox.setModel(jsonModel,"checkBoxData");

  var Button = new sap.m.Button({

   text : "Store Offline Data",

   type : "Accept",

   press : oController.handleGetRecords

  });

  var Button1 = new sap.m.Button({

   text : "Get Offline Data",

   type : "Reject",

   press : oController.handleGetOfflineData

  });

  var Button2 = new sap.m.Button({

   text : "Update  Offline Data",

   type : "Accept",

   press : oController.handleUpdateOfflineData

  });

 

  var Button3 = new sap.m.Button({

   text : "Get All Offline Data",

   type : "Reject",

   press : oController.handleGetAllRecords

  });

  var Button4 = new sap.m.Button({

   text : "Delete  Offline Data",

   type : "Accept",

   press : oController.handleDestroyData

  });

  return new sap.m.Page({

  title: "Offline Application",

  content: [

            vbox,Button,Button3,Button4

  ]

  });

 

 

Controller:

 

 

//Create DB

var db = new PouchDB('offline_kar_storage');

var structure;

sap.ui.controller("offlineproject.LandingPage", {

  handleGetRecords : function(oEvent){

 

 

     var vboxItem = sap.ui.getCore().byId("idVbox").getItems();

     var SelectedText=[];



     jQuery.each(vboxItem,function(a,b){

       var sbool = b.getSelected();

       if(sbool){

          // SelectedText += b.getText() + ", \n";

       var subStructure = {

      "subArea" : b.getText()

       };

       SelectedText.push(subStructure);

       };

     });

      structure = [{

      _id: 'mydoc123',

      myArea : SelectedText

     }];

     this.getParent().getParent().getController().handleStoreDeepStructure();

  },

  handleStoreDeepStructure : function(){

  //Adding a record

  db.bulkDocs(structure, function(err, response) { if (err) {  return alert(err); }// handle response

    alert("Data stored in offline db");

  });

  },

  handleGetOfflineData : function(){

  db.get("mydoc123", function (err, doc) {

  debugger;

         alert("Get Record Object is ready to access");

  });

  },

 

  handleGetAllRecords : function(){

  var options = {};

  options.include_docs = true;

  options.attachments = true;

 

  db.allDocs(options, function(error, response) {

     var row = response.rows; // Calls an addrow() function

 

 

     row.map(function(f) {

       if (f) {

         debugger;

         alert("All-Doc Object is ready to access");

       }

     });

     debugger;

   });

  },

  handleUpdateOfflineData : function(){

  //Update a record

  db.get('mydoc123', function(err, doc) {

   if (err) { return alert(err); }

   db.put(structure._rev = doc._rev, function(err, response) {

     if (err) { return alert(err); }

     alert(response);

     // handle response

   });

  });

  },

  handleDestroyData : function(){db.get('mydoc123', function(err, doc) {

  debugger;

   if (err) { return console.log(err); }

   doc._deleted = true;

   db.put(doc, function(err, response) {

     if (err) { return alert(err); }

     // handle response

     alert("Data removed from offline db");

   });

  });}

});

 

 

Regards,

Karthik A

 

 


 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Miguel Angel Díaz López
      Miguel Angel Díaz López

      Thanks for sharing, We're working with pouch in SMP and we love it, We're saving all the offline data in pouch and sending request to CRM backend. The javascript Promises works with pouchdb perfectly.

      Author's profile photo Frans Sundjaja
      Frans Sundjaja

      Just curious, when you are sending the offline data to the CRM, are you using the pouch db replication capability?

      I dont think the CRM backend is a couchdb-compliant and how much work do you have to do? I heard pouch db can replicate to anydb but that would mean that the other db has to implement the replication protocol set by couchdb and it seems it is pretty daunting task.

      Thanks for your reply.

      Author's profile photo Deborshi De Sarkar
      Deborshi De Sarkar

      Hello Karthik,

      Will this work on Mobile Device ?

       

      Thanks

      Deborshi

      Author's profile photo Karthik Arjun
      Karthik Arjun
      Blog Post Author

      Yes, it will work