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
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.
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
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.
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.
Hello Karthik,
Will this work on Mobile Device ?
Thanks
Deborshi
Yes, it will work