Create Offline application in SAPUI5 (using pouch db)

[karthikarjun]

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




 

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.

 



 

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