Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Tuesday, 25 June 2019 20:22

SAPUI5 – Offline Application in 8 Steps

Written by  https://sapyard.com/sapui5-offline-application-in-8-steps/
Rate this item
(0 votes)

Let me make a confession. SAPYard is for beginners but the topics which I have covered so far or would cover in future are for advanced UI5 developers.

You need to have worked in some SAPUI5 projects to assimilate it. Or else, it might be all bouncers and you would have to duck through the articles. This is not to dissuade you but to give you a realistic picture of project requirements. What you learn in online/offline/class room training is not always what the clients demand in real projects. Very often than not, there is a huge gap between what we are trained for and what work we get in projects.

Coming back to yet another advanced topic. How to Build Offline SAPUI5 Applications?

Poor Internet Connectivity has direct correlation with the scope for Offline Applications. But sometimes Offline Application may be a business decision too and not just connectivity adversity.

Pre requirements:- Knowledge of creating Hybrid Applications and Simple CRUD batch operations using Odata Model

AlsoCordova should be installed in your system.

Step1:- Open cmd prompt

Step2:- Create Offline Project of Cordova


Step3:- Add the platform

Step4: Add the SQL Lite Plugin

Also Read:End to End ABAP on HANA Tutorials

Step5:- Add the Network information plugin

1
2
<code>cordovapluginaddcordova-plugin-network-information</code>

Step6:- Create a call back Function to perform Sync when device is online

1
2
<code>document.addEventListener("online", yourCallbackFunction, false);</code>

Step7:- Check for Online or Offline Status

navigator.connection.type if its not none then device is online. This is where the yourCallbackFunction can perform batch operation. Before any crud check if device is online else store in the Database of SQL

1
2
3
4
5
6
7
8
9
10
11
<code>vardb=window.sqlitePlugin.openDatabase({name:'my.db',location:'default',});
//Offlinescenarioexamplewherecrudisinsertoperationandnointernet
if(navigator.connection.type=="none"){
db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS DemoOffline (id, value)');tx.executeSql('INSERT INTO DemoOffline VALUES (?,?)',['100',101]);},
function(error){console.log('Transaction ERROR: '+error.message);},
function(){console.log('Populated database OK');});
}else{//PerformusualoModel.create("/Entity,oentity,{success:function(){},error:function(){}}");}</code>

Also Read:Bluetooth Device using SAPUI5 Hybrid App?

Step7:- Batch Operation once Online

Once device is online as per step6 you need to perform batch operation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<code>yourCallbackFunction:function(){
vararray=[];
db.transaction(function(tx){
tx.executeSql('SELECT * FROM DemoOffline',[],function(tx,rs){
//rs.rows.itempushitintoanarray
},function(tx,error){
console.log('SELECT error: '+error.message);
});
});
if(array.length>0){
//Createthebatchoperation
//CalltheoModel.submitChanges();
}
}</code>

Step8:- Build an APK file using the below final command

That’s all you need. It might look simple, but you need to sweat a little more for your first offline app. Please feel free to write your questions, feedback in the comment section below. We reply to each and every feedback.

If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 5000+ active SAP consultants from 6 Continents.

Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 187 times

1 comment

  • Comment Link Clifford Thursday, 05 September 2019 11:35 posted by Clifford

    You're so cool! I do not think I've truly read through anything like this before.
    So great to find somebody with genuine thoughts on this subject.
    Seriously.. many thanks for starting this up. This web site is something that is required on the web, someone
    with a bit of originality!

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.