There are lots of blog available which explains how to consume and build SAPUI5 application based on OData but not much information is available on consuming JSON data and hence I thought to write this blog.

By consuming easily available JSON data, we can develop “n” number of mashup web applications. It could be hybrid applications based on public JSON data along with SAP business suite data!

Another advantage I found with this approach is, it makes learning SAPUI5 very easy as you need not to depend on any SAP system for data, access etc. you can get pretty neat data to be consumed in your application and you can play around with that data by experimenting various UI controls.

In this blog, I will walk you through 4 SAPUI5 applications developed by me and based on JSON APIs.

This API basically detects your location based on IP address and gets the weather information for your current location. You can still use other APIs to which you need to provide query parameters as per API documentation.

Very important point is you cannot directly access the URL in your SAPUI5 application because you will be making call in the cross domain environment and you may get below kind of errors.

To set this data to various UI controls, we need to access value of the required JSON object by providing its access path.

For e.g. we want to display city name. As per JSON viewer, city full name can be accessed from path current_observation-->display_location-->full

And on similar lines, to set the value to UI control we need to use {/current_observation/display_location/full}

//Lable and TextField for City

oLabelCity = new sap.ui.commons.Label({

id : 'L-City',

text : 'City'

});

oTFCity = new sap.ui.commons.TextField({

id : 'TF-City',

tooltip : 'City',

editable : false,

value : '{/current_observation/display_location/full}',

width : '200px'

});

oLabelCity.setLabelFor(oTFCity);

oMatrix.createRow(oLabelCity, oTFCity);

If we want to manipulate data before setting it to UI control, we need to get the value using method getProperty of JSON model.

In the application, we want to display temperature with ºC symbol. For that purpose, first we need to get the temperature value and then append symbol to it.

var tempstring = oModel.getProperty("/current_observation/temp_c");

//Append Degree Celsius unit symbol to Temperature reading

var tempinC = tempstring + "\u2103";

The next important piece of code is to display nested array data into table UI control.

In the example application, we are displaying 2 tables with weather information. One of the tables contains Textual Forecast details which is accessible as forecast-->txt_forecast-->forecastday. Here forecastday is the array of objects which we want to display as table data.

As mentioned in below code, we need to first get the access using getProperty method and then by setting it to new JSON model using method setData, we can directly bind the array to the table as model.

//Create a model and bind the table rows to this model

var oModel1 = new sap.ui.model.json.JSONModel();

//Get the forecastday array table from txt_forecast object

var aData = oModel.getProperty("/forecast/txt_forecast/forecastday");

oModel1.setData({

modelData : aData

});

oTable.setModel(oModel1);

oTable.bindRows("/modelData");

oTable.placeAt('content');

And then column values will be simply provided as usual. Here image property srs is set to “icon_url” which is one of the fields of forecastday array

oTable.addColumn(new sap.ui.table.Column({

label : new sap.ui.commons.Label({

text : "Image"

}),

template : new sap.ui.commons.Image().bindProperty(

"src", "icon_url"),

width : "75px",

hAlign : "Center"

}));

One of the real fun with this API is it supports multiple languages. Below is the screenshot of the same application displayed inMarathi language.

This is just an attempt to share information on how we can consume JSON public APIs. I thought to develop SAPUI5 application which will access twitter, Facebook data but for that it requires access token with OAuth on which I do not have sufficient knowledge. May be some of you can try those things.

Personally the key benefit out of these things is my learning curve towards SAPUI5 significantly improved as I am experimenting various UI controls, methods on easily available JSON data. It is like getting self-assignments by looking at data and thinking different UI design, how I can utilize various UI controls etc.

The more complex JSON model, more it will be challenging to try out different UI designs and how we can make it look more better and better!

Now I am thinking why can’t we have SAPUI5 challenge on similar lines of Data Geek challenge? Here we can try out various SAPUI5 applications based on public JSON APIs. What do you guys say about this