Possibility to save HTML5 data locally on mobile devices

[saurabh_vakil]

Hi Experts,

I want to know if it is possible to save the data displayed in a HTML5 page locally on the device?

For example: The flight data example given at http://scn.sap.com/community/developer-center/front-end/blog/2012/10/15/consume-netweaver-gateway-se... displays data fetched from the gateway demo system in a table. Is there any way using which we can save this data locally to the mobile device (in any format - HTML/XML etc) so that we can view the data at any time later on, even with no data connection on the mobile device?

Regards,

Saurabh

[former_member182048 · Accepted solution]

Saurabh,

Interesting question.  I believe there would be many ways of achieving this, I'll mention a couple I can think of using code available in SAPUI5.

1./ There is a module in SAPUI5 that supports storing and retrieving data based on the local Web Storage API. It can support both string and JSON values.

https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.storage.html

To use

jQuery.sap.require("jquery.sap.storage"); 
this._oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local); //Define
this._oMyData =this._oStorage.get("myData");  //Get Data
this._oStorage.put("myData", his._oMyData); //Set Data

2./ There is a TodoList Mobile app which uses window.localStorage quite effectively, I extended this very easily to use Gateway services and localStorage

this._engine = engine || window.localStorage; //Define
this._records = $.parseJSON(this._engine.getItem(this._key) || "[]"); //Get Data
this._engine.setItem(this._key, JSON.stringify(this._records)); //Set Data

3./ DataJS the thirdparty library SAPUI5 uses for OData has a very cool Store API. Given the code is already there i dont believe it would take much to use. http://datajs.codeplex.com/wikipage?title=Using%20Stores

var store = datajs.createStore("MyStorage"); //Define
store.read(key,  successCallBack, errorCallback); //Get Data
store.add(key, value, successCallBack, errorCallback); //Set Data

Hope it helps

Cheers

John P

[saurabh_vakil · Accepted solution]

Thanks for your quick response John!!!

I will certainly try out your suggestions. The ToDoList mobile app that you talk about in your 2nd point, is this app hosted anywhere on SDN (like the SAPUI5 forums etc.)? I am pretty eager to take a look at how it uses the localStorage object.

Regards,

Saurabh

[former_member182048 · Accepted solution]

Hi Saurabh,

You can download the UI5 here http://scn.sap.com/community/developer-center/front-end.

Once installed you will find the TodoList app

http://localhost/sapui5/test-resources/sap/m/internal/performance/demo/DemoAppToDoList.html?sap-ui-x...

Cheers

John P

[saurabh_vakil · Accepted solution]

Hi John,

I have downloaded the UI Development toolkit from SDN. However, I did not find the test-resources folder under the sapui5 folder, but I can see it under sapui5-static folder.

Also in this folder at the path /sapui5-static/test-resources/sap/m/internal/performance I could not find any folder named demo, I just have 2 folders - images and js, and 2 HTML files - DemoAppEPMPerformance.html and result.html

Regards,

Saurabh

[saurabh_vakil · Accepted solution]

I found the DemoAppToDoList.html page at this path - sapui5-static/test-resources/sap/m/internal/demo

Thanks again, I will take a closer look at how this application uses the window.localStorage object.

Regards,

Saurabh

[saurabh_vakil · Accepted solution]

Hi John,

I am aware how to store simple values like form fields etc from a HTML5 web page using the localStorage object. But I want to know whether it is possible to store the values inside a UI5 table using this particular localStorage object.

I have searched this on google but haven't found anything which shows if this is possible to be done.

Any ideas?

Regards,

Saurabh

[former_member182048 · Accepted solution]

Hi Saubrabh,

Reading your other posts it is hard to tell if you are asking the right questions.

"I want to know whether it is possible to store the values inside a UI5 table using this particular localStorage object"

I will walk you through some simple scenarios. The Assumption being you are still asking with reference to AJAX calls to Gateway.

Standard scenario

1. We retrieve OData into an OData Model

2. We bind the Model to the Table

this.oModel=newsap.ui.model.odata.ODataModel("../sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT");
oTable.setModel(this.oModel);
oTable.bindRows("/TravelagencyCollection");

Storing OData results into the local storage scenario

1. We retrieve OData into an OData Model

2  When the data is reveived store it in local storage using one of the three techniques above

3. We bind the OData Model to the Table

this.oModel=newsap.ui.model.odata.ODataModel("../sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT");
this.oModel.read("/TravelagencyCollection", handleSuccess. handleError );
// in the success handler write returned data to local storage
handleSuccess(oData, oResponse) { 
    this.oStorage.put("TravelagencyCollection", oData.results); //Set Data
} 
oTable.setModel(this.oModel);
oTable.bindRows("/TravelagencyCollection");

Reading stored data when connection is down

1. Connection down,

2. Read data in local storage

3. Create a JSON model from the stored results

4. Bind the JSON Model to the table

if (navigator.online){
          this.oModel= new sap.ui.model.odata.ODataModel("../sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT");
          this.oModel.read("/TravelagencyCollection", handleSuccess. handleError );
}else{
           var jsonData = { "/TravelagencyCollection": this._oStorage.get("TravelagencyCollection") }; 
          this.oModel = new sap.ui.model.json.JSONModel();      
          this.oModel.setData(jsonData);
}
oTable.setModel(this.oModel);
oTable.bindRows("/TravelagencyCollection");

These are very simple examples, which are meant to guide you, if you want to find more on google check out some of the projects that use Amplify.Store and see how to cache AJAX requests to local storage, you will also find example on how to build models from locally stored data. Lots of examples that actually work, which can easily be translated to SAPUI5.

Hope it helps.

Cheers

John P

Message was edited by: John Patterson

[saurabh_vakil · Accepted solution]

Hi John,

One of the ways for achieving offline access for web applications is by using HTML5's application caching feature, which includes specifying in a manifest file the resources that should be cached by the browser for offline access and referencing this manifest file on a web page by adding the manifest attribute within the opening html tag.

The resources that I found regarding application caching state that this manifest file needs to be served with the correct MIME-type, which is "text/cache-manifest". This modification has to be done in the .htaccess file on the web server where we wish to achieve application caching.

But among all these different techniques for offline storage of web pages, I want to know if these are all compatible to be used on the Java Web Application Server. In my scenario I do not have any Web server, but only the NetWeaver WebAS Java application server.

For eg., if I want to be able to do application caching on the Portal server where I have hosted my HTML5 pages, where do I find this .htaccess file on the server?

Regards,

Saurabh

[former_member184238 · Accepted solution]

Hi John,

I want to do offline application using SAPUI5.

I have some knowledge on offline application in HTML5 using Application Cache.

The way what you said to do offline application is very clear to me. But I have one doubt.

My application is in one system and gateway server is in another system. I am consuming data from gateway server using Odata model.

I am using Eclipse and Tomcat server.My application is in Tomcat server.

Now my requirement is I want to store the data which is coming from back end locally and retrieve the information when it is in offline.

What is meany by offline?

When I stop the Tomcat server my application is not working.

When we have to declare that the application is in offline mode?

I am using Chrome.

I used the below code to check whether the application is in online or offline.

if (navigator.online){ 

alert("online");

}else{ 

alert("offline");

} 

In my code I am always getting online status even if I disconnect the network also.

How can we check online and offline modes to store the data and to retrieve the data ?

Please guide me.

Thanks&Regards

Sridevi

[former_member184238 · Accepted solution]

nobody

[mauriciolauffer · Accepted solution]

Hi Sridevi.

The command "navigator.online" doesn't work 100%.

If you are connected in a network, even without internet access, the command will return "online".

You should try another approach. Try to get something from somewhere using jQuery / AJAX.

You can check the code below as an example:

$.ajax({
  dataType : "json",
  url : "http://ip.jsontest.com/",
  data : "/?rand=" + $.now,
  success : function(evt) {
       alert('online');
  },
  error : function(evt) {
       alert('offline');
  }
});

It's more reliable than "navigator.online".