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

 

 


 

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. 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.

    (1) 

Leave a Reply