Hi Team,
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