Skip to Content

Introduction –

For long time I was thinking to build SAPUI5 application based on JSON data. Lots of websites hosts web services or APIs to provide the useful data in the form of JSON format.


Below are the few websites which are exposing the data in the form of JSON APIs.

Website JSON API / Web Service Documentation link API / Access Key, OAuth Required
Open Weather Map

http://api.openweathermap.org/API

No Access Key Required
Weather Under Ground

http://api.wunderground.com/weather/api/d/docs

API Key Required
Rotten Tomatoes

http://developer.rottentomatoes.com/docs/read/JSON

API Key Required
GeoNames

http://www.geonames.org/export/ws-overview.html

API Key Required
Facebook

http://developers.facebook.com/docs/reference/api/search/

API Key Required, OAuth Access Required
Twitter

https://dev.twitter.com/docs/api/1.1/overview

API Key Required, OAuth Access Required

You Tube

https://developers.google.com/youtube/2.0/developers_guide_json

API Key Required, OAuth Access Required

LinkedIn

http://developer.linkedin.com/documents/api-requests-json

API Key Required, OAuth Access Required

Google Maps

https://developers.google.com/maps/documentation/webservices/

No Access Key Required
Google Feed API https://developers.google.com/feed/v1/jsondevguide No Access Key Required

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.


  • SAPUI5 Application based on Weather Underground JSON API
  • SAPUI5 Application based on GeoNames wikipediaSearch JSON API
  • SAPUI5 Application based on Rotten Tomatoes JSON API
  • SAPUI5 Application based on Open Weather Map JSON API


Let’s get into details of each application

     1. SAPUI5 Application based on Weather Underground JSON API


For this application, I used below JSON API Service URL.


http://api.wunderground.com/api/Your_Key/conditions/forecast/q/autoip.json


To use these APIs, you need to first sign up and get your API key.


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.


Origin http://localhost:54788 is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load http://api.example.com/api/xyz.json. Origin http://localhost:54788 is not allowed by Access-Control-Allow-Origin.


To make call without any error, we need to use cross domain Ajax request. Very well explanation on how to do it can be found in blog http://scn.sap.com/community/developer-center/front-end/blog/2013/06/14/useful-jquery-functions-for-sapui5-development

Also you can refer http://scn.sap.com/community/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp

Once you get the JSON data successfully, the next important step is to set this data to JSONModel.


Finally you need to understand data model of JSON format and how you will be able to read it, loop it etc.


You can refer SAPUI5 documentation at below link which very well explains the methods available to manipulate JSON data. https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.model.json.JSONModel.html

The best approach to see the structure of JSON data is to use online JSON viewer tools. One of the best tools I am using is available at http://jsonviewer.stack.hu/

Here you need to load JSON raw data by providing direct URL

/wp-content/uploads/2013/08/ui5_json1_255939.jpg

Once the data is loaded, it will be displayed in raw format.

/wp-content/uploads/2013/08/ui5_json2_255940.jpg


By clicking on Viewer, it will display JSON data into tree format with name/value pair, deep array, nested objects etc.

/wp-content/uploads/2013/08/ui5_json3_255947.jpg

Let’s see the complete code of the application


<!DOCTYPE html>
 <html>
<head>
<!-- Added charset='utf-8' to handle data in various langauges -->
<meta http-equiv='X-UA-Compatible' content='IE=edge' charset='utf-8' />
<title>Weather Forecast</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
          src='resources/sap-ui-core.js' data-sap-ui-theme='sap_platinum'
          data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>
 <script type="text/javascript">
     // create a JSONModel, fill in the data and bind the Table to this model 
          var oModel = new sap.ui.model.json.JSONModel();
          // service url for Weather Underground JSON API  
          var url = 'http://api.wunderground.com/api/Your_Key/conditions/forecast/q/autoip.json?callback=getJSON';
          // var url = 'http://api.wunderground.com/api/Your_Key/conditions/forecast/lang:MR/q/autoip.json?callback=getJSON';  //Example URL
          // var url = 'http://api.wunderground.com/api/Your_Key/forecast/conditions/lang:MR/q/France/Paris.json?callback=getJSON';   //Example URL
          //Ajax Call with Callback function and JSONP data type  
          $
                              .ajax({
                                        url : url,
                                        jsonpCallback : 'getJSON',
                                        contentType : "application/json",
                                        dataType : 'jsonp',
                                        success : function(data, textStatus, jqXHR) {
                                                  oModel.setData(data);
                                                  sap.ui.getCore().setModel(oModel);
                                                  // create matrix layout 
                                                  var oMatrix = new sap.ui.commons.layout.MatrixLayout({
                                                            id : 'matrix',
                                                            layoutFixed : false,
                                                            columns : 3,
                                                  });
                                                  var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                            colSpan : 3
                                                  });
                                                  var oTV = new sap.ui.commons.TextView(
                                                                      {
                                                                                id : 'TV-Head',
                                                                                text : 'SAPUI5 Application based on Weather Underground JSON API',
                                                                                design : sap.ui.commons.TextViewDesign.H1
                                                                      });
                                                  oCell.addContent(oTV);
                                                  oMatrix.createRow(oCell);
                                                  //Create a standard divider 
                                                  var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                            colSpan : 3
                                                  });
                                                  oCell.addContent(new sap.ui.commons.HorizontalDivider());
                                                  oMatrix.createRow(oCell);
                                                  //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);
                                                  //Lable and TextField for Latitute 
                                                  oLabelLat = new sap.ui.commons.Label({
                                                            id : 'L-Lat',
                                                            text : 'Latitude'
                                                  });
                                                  oTFLat = new sap.ui.commons.TextField(
                                                                      {
                                                                                id : 'TF-Lat',
                                                                                tooltip : 'Latitude',
                                                                                editable : false,
                                                                                value : '{/current_observation/display_location/latitude}',
                                                                                width : '200px'
                                                                      });
                                                  oLabelLat.setLabelFor(oTFLat);
                                                  oMatrix.createRow(oLabelLat, oTFLat);
                                                  //Lable and TextField for longitude 
                                                  oLabelLon = new sap.ui.commons.Label({
                                                            id : 'L-Lon',
                                                            text : 'Longitude'
                                                  });
                                                  oTFLon = new sap.ui.commons.TextField(
                                                                      {
                                                                                id : 'TF-Lon',
                                                                                tooltip : 'Longitude',
                                                                                editable : false,
                                                                                value : '{/current_observation/display_location/longitude}',
                                                                                width : '200px'
                                                                      });
                                                  oLabelLon.setLabelFor(oTFLon);
                                                  oMatrix.createRow(oLabelLon, oTFLon);
                                                  //Lable and TextField for Elevation 
                                                  oLabelElev = new sap.ui.commons.Label({
                                                            id : 'L-Elev',
                                                            text : 'Elevation'
                                                  });
                                                  oTFElev = new sap.ui.commons.TextField(
                                                                      {
                                                                                id : 'TF-Elev',
                                                                                tooltip : 'Elevation',
                                                                                editable : false,
                                                                                value : '{/current_observation/observation_location/elevation}',
                                                                                width : '200px'
                                                                      });
                                                  oLabelElev.setLabelFor(oTFElev);
                                                  oMatrix.createRow(oLabelElev, oTFElev);
                                                  //Create a standard divider 
                                                  var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                            colSpan : 3
                                                  });
                                                  oCell.addContent(new sap.ui.commons.HorizontalDivider());
                                                  oMatrix.createRow(oCell);
                                                  //Weather image 
                                                  var oImageWeather = new sap.ui.commons.Image({
                                                            src : '{/current_observation/icon_url}',
                                                            alt : '{/current_observation/icon}'
                                                  });
                                                  //Lable and TextField for weather 
                                                  oLabelWeather = new sap.ui.commons.Label({
                                                            id : 'L-Weather',
                                                            text : 'Weather'
                                                  });
                                                  oTFWeather = new sap.ui.commons.TextField({
                                                            id : 'TF-Weather',
                                                            tooltip : 'Weather',
                                                            editable : false,
                                                            value : '{/current_observation/weather}',
                                                            width : '200px'
                                                  });
                                                  oLabelWeather.setLabelFor(oTFWeather);
                                                  oMatrix.createRow(oLabelWeather, oTFWeather, oImageWeather);
                                                  //Create a standard divider 
                                                  var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                            colSpan : 3
                                                  });
                                                  oCell.addContent(new sap.ui.commons.HorizontalDivider());
                                                  oMatrix.createRow(oCell);
                                                  //Lable and TextField for temp_c 
                                                  oLabelTemp = new sap.ui.commons.Label({
                                                            id : 'L-Temp',
                                                            text : 'Temperature'
                                                  });
                                                  var tempstring = oModel
                                                                      .getProperty("/current_observation/temp_c");
                                                  //Append Degree Celsius unit symbol to Temperature reading  
                                                  var tempinC = tempstring + "\u2103";
                                                  oTFTemp = new sap.ui.commons.TextField({
                                                            id : 'TF-Temp',
                                                            tooltip : 'Temperature',
                                                            editable : false,
                                                            value : tempinC,
                                                            width : '220px'
                                                  });
                                                  oLabelTemp.setLabelFor(oTFTemp);
                                                  oMatrix.createRow(oLabelTemp, oTFTemp);
                                                  //Lable and TextField for Obervation Time 
                                                  oLabelObsTime = new sap.ui.commons.Label({
                                                            id : 'L-ObsTime',
                                                            text : 'Observation Time'
                                                  });
                                                  oTFObsTime = new sap.ui.commons.TextField({
                                                            id : 'TF-ObsTime',
                                                            tooltip : 'Observation Time',
                                                            editable : false,
                                                            value : '{/current_observation/observation_time}',
                                                            width : '220px'
                                                  });
                                                  oLabelObsTime.setLabelFor(oTFObsTime);
                                                  oMatrix.createRow(oLabelObsTime, oTFObsTime);
                                                  //Lable and TextField for Local Time 
                                                  oLabelLclTime = new sap.ui.commons.Label({
                                                            id : 'L-LclTime',
                                                            text : 'Local Time'
                                                  });
                                                  oTFLclTime = new sap.ui.commons.TextField({
                                                            id : 'TF-LclTime',
                                                            tooltip : 'Local Time',
                                                            editable : false,
                                                            value : '{/current_observation/local_time_rfc822}',
                                                            width : '220px'
                                                  });
                                                  oLabelLclTime.setLabelFor(oTFLclTime);
                                                  oMatrix.createRow(oLabelLclTime, oTFLclTime);
                                                  //Lable and TextField for relative humidity 
                                                  oLabelRelHum = new sap.ui.commons.Label({
                                                            id : 'L-RelHum',
                                                            text : 'Relative Humidity'
                                                  });
                                                  oTFRelHum = new sap.ui.commons.TextField({
                                                            id : 'TF-RelHum',
                                                            tooltip : 'Relative Humidity',
                                                            editable : false,
                                                            value : '{/current_observation/relative_humidity}',
                                                            width : '220px'
                                                  });
                                                  oLabelRelHum.setLabelFor(oTFRelHum);
                                                  oMatrix.createRow(oLabelRelHum, oTFRelHum);
                                                  //Lable and TextField for Wind 
                                                  oLabelWind = new sap.ui.commons.Label({
                                                            id : 'L-Wind',
                                                            text : 'Wind'
                                                  });
                                                  oTFWind = new sap.ui.commons.TextField({
                                                            id : 'TF-Wind',
                                                            tooltip : 'Wind',
                                                            editable : false,
                                                            value : '{/current_observation/wind_string}',
                                                            width : '220px'
                                                  });
                                                  oLabelWind.setLabelFor(oTFWind);
                                                  oMatrix.createRow(oLabelWind, oTFWind);
                                                  //attach it to some element in the page 
                                                  oMatrix.placeAt('content');
                                                  //Create an instance of the table control 
                                                  var oTable1 = new sap.ui.table.Table({
                                                            title : "Simple Forecast Details",
                                                            visibleRowCount : 4,
                                                            selectionMode : sap.ui.table.SelectionMode.Single,
                                                            navigationMode : sap.ui.table.NavigationMode.Paginator,
                                                  });
                                                  //Define the columns and the control templates to be used 
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Period"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "date/weekday"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.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 : "10px",
                                                            hAlign : "Center"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "High"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "high/celsius"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Low"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "low/celsius"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Avarage Humidity"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "avehumidity"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Max Humidity"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "maxhumidity"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Min Humidity"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "minhumidity"),
                                                            width : "10px"
                                                  }));
                                                  oTable1.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Chance of Precipitation"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "pop"),
                                                            width : "10px"
                                                  }));
                                                  //Create a model and bind the table rows to this model 
                                                  var oModel2 = new sap.ui.model.json.JSONModel();
                                                  //Get he forecastday array from simpleforecast object 
                                                  var aSimpleForecast = oModel.getProperty("/forecast/simpleforecast/forecastday");
                                                  oModel2.setData({
                                                            modelData : aSimpleForecast
                                                  });
                                                  oTable1.setModel(oModel2);
                                                  oTable1.bindRows("/modelData");
                                                  oTable1.placeAt('content');
                                                  //Create an instance of the table control 
                                                  var oTable = new sap.ui.table.Table({
                                                            title : "Textual Forecast Details",
                                                            visibleRowCount : 8,
                                                            selectionMode : sap.ui.table.SelectionMode.Single,
                                                            navigationMode : sap.ui.table.NavigationMode.Paginator,
                                                  });
                                                  //Define the columns and the control templates to be used 
                                                  oTable.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Period"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "title"),
                                                            width : "50px"
                                                  }));
                                                  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"
                                                  }));
                                                  oTable.addColumn(new sap.ui.table.Column({
                                                            label : new sap.ui.commons.Label({
                                                                      text : "Forecast"
                                                            }),
                                                            template : new sap.ui.commons.TextView().bindProperty(
                                                                                "text", "fcttext_metric"),
                                                            width : "300px"
                                                  }));
                                                  //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');
                                        }
                              });
</script>
</head>
<body class='sapUiBody'>
          <div id='content'></div>
          <p></p>
          <div id="footer">
                    <div style="float: right; text-align: right;">
                              <img src="http://icons-ak.wxug.com/graphics/wu2/logo_130x80.png"
                                        border="0" alt=""><br> <span style="padding-top: 20px;">Weather          data provided by Weather Underground, Inc.</span>
                    </div>
          </div>
</body>
</html>


Now let me show you the output screen after running SAPUI5 application. Based on geolocation determined by IP address, it will display weather information.

Yes currently its rainy season here in Pune! ๐Ÿ™‚

/wp-content/uploads/2013/08/ui5_json4_255948.jpg

/wp-content/uploads/2013/08/ui5_json5_255949.jpg

I created view with few textfields and two table UI controls. After getting data from JSON API, I am mapping these fields to textfields and tables.


Let’s understand the code in detail,


Below code makes Ajax call with datatype as JSONP to external JSON APIs. JSON data will be then set to oModel using setData method.


// create a JSONModel, fill in the data and bind the Table to this model 

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

// service url for Weather Underground JSON API  

var url = http://api.wunderground.com/api/Your_Key/conditions/forecast/q/autoip.json?callback=getJSON;

       //Ajax Call with Callback function and JSONP data type       

       $

                     .ajax({

                           url : url,

                           jsonpCallback : ‘getJSON’,

                           contentType : “application/json”,

                           dataType : ‘jsonp’,

                           success : function(data, textStatus, jqXHR) {

                                  oModel.setData(data);

                                  sap.ui.getCore().setModel(oModel);

});

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 

/wp-content/uploads/2013/08/ui5_json6_255953.jpg

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.

/wp-content/uploads/2013/08/ui5_json7_255954.jpg

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 in Marathi language.

For that, I supplied URL as var url = ‘http: //api.wunderground.com/api/Your_Key/conditions/forecast/lang:MR/q/autoip.json?callback=getJSON’;

/wp-content/uploads/2013/08/ui5_json8_255955.jpg

/wp-content/uploads/2013/08/ui5_json9_255956.jpg

To display text in different languages, we need to change the page encoding to UTF-8   

For this purpose, I added below code.

<!– Added charset=’utf-8′ to handle data in various langauges –>

<meta http-equiv=‘X-UA-Compatible’ content=‘IE=edge’ charset=‘utf-8’ />


โ— P.S – even after setting page encoding, if you execute application by web preview in eclipse, you will not see correct output. But it works perfectly fine in Google’s chrome browser.

     2. SAPUI5 Application based on GeoNames wikipediaSearch JSON API

Let’s see UI of the 2nd application.

/wp-content/uploads/2013/08/ui5_json10_255957.jpg

/wp-content/uploads/2013/08/ui5_json11_255958.jpg

This application basically takes 2 parameters as input. Query string and max number of rows which are then passed to JSON service url as,

//GeoNames WikipediaSearch JSON API service URL

                                  var url = http://api.geonames.org/wikipediaSearchJSON?formatted=true&q=

                                                + qString

                                                + ‘&maxRows=’

                                                + maxRow

                                                + ‘&username=<Your_User_Name> &style=full’;

     3. SAPUI5 Application based on Rotten Tomatoes JSON API


Third application is based on Rotten Tomatoes JSON API which basically provides movie related data.

UI of this application is as below,

/wp-content/uploads/2013/08/ui5_json12_255965.jpg

I am providing option to select different type of movies and DVDs along with number of movies to be returned. These values then mapped to URL parameter as below,

// Rotten Tomatoes API’s JSON service url 

                     var url = http://api.rottentomatoes.com/api/public/v1.0/lists/

                                  + ddKey + ‘/’ + ddValue

                                  + ‘.json?apikey=<your_api_key> &limit=’

+ maxRow

                                  + ‘&callback=getJSON’;

Here I am getting current box office movies and returning just one movie. On row selection, I am displaying the cast of the movie.

/wp-content/uploads/2013/08/ui5_json13_255966.jpg

Here I am querying upcoming movies. By default, it will return 10 movies as per API documentation.

/wp-content/uploads/2013/08/ui5_json14_255967.jpg

Here I am getting In Theaters movies. Based on value selected, I am setting the table title.

/wp-content/uploads/2013/08/ui5_json15_255971.jpg

Please pay attention on how row selection event is handled and how 2nd table for cast of the movie got displayed. Source code can be accessed at https://github.com/CmIm/sap-ui5


     4. SAPUI5 Application based on Open Weather Map JSON API

This last application is based on open weather map API and this do not required any API key or registration to web service. Below is the UI for this application,

/wp-content/uploads/2013/08/ui5_json16_255972.jpg

I am getting city name and passing it to JSON URL as below,

// service url for Open Weather Map JSON API

                                  var url = http://api.openweathermap.org/data/2.5/weather?q=+ qString + ‘&mode=json&units=metric&callback=getJSON’;

Let’s see how the current weather of Walldorf, Germany looks like,

/wp-content/uploads/2013/08/ui5_json17_255973.jpg

You can access the source code for all these applications at https://github.com/CmIm/sap-ui5

Closing Remarks –

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 ๐Ÿ™‚


Happy Learning and Coding! ๐Ÿ™‚ ๐Ÿ™‚ ๐Ÿ™‚


To report this post you need to login first.

33 Comments

You must be Logged on to comment or reply to a post.

  1. L. van Hengel

    Hi Chandrashekhar,

     

    Cool blog! I really like that you not choose 1 but 4 for examples to share with us and also put them on GitHub. Excellent work!

     

    Good idea about a SAPUI5 challenge. I want to accept the challenge

    I am currently working on my own mashup application with some public API’s. Similar to your examples and running on the HANA Cloud Platform. Hope to share it soon

     

    Cheers,

    Leo

    (0) 
  2. Aamod Dhople

    Thanks Chandrashekhar for this great blog. I am trying to do the same using standard UI5 project template. However when I use the getProperty method on the Model, I get the result as undefined. Below is my code:

     

          var tempc = oModel.getProperty(“/current_observation/temp_c”);

     

    I have placed the code in view.js file. I am able to see the others values which are bound the text fields. However when I run the application, tempc is undefined. So I am unable to proceed with the tables either as new models are declared using the getProperty method.

    (0) 
  3. Ken Lei

    Thanks for the info. But I had a question about getting the data. I am just wondering is it possible to use Model.loaddata(sURL=url) to get data instead of using a separated Ajax called ?

    (0) 
  4. Siddu Sid

    Hi chandrashekhar,

     

    Very Nice Blog but  I am not able to call my SICF service which is authenticated with username and password to get the json in SAP UI5 ajax call in front end. please find below code and help me to resolve my issue.

    //ajax call

    $.ajax({

          url: ‘http://…/sap/bc/test_sui5‘,

            type: ‘GET’,

            contentType : “application/json”,

            dataType: ‘json’,

            username:’abc’,

            password:’abc123′,      

            timeout: 10000,

            cache: false,

            success: function(data, textStatus, xhr) {

                alert(“success”);

                alert(textStatus);

           },

            error: function(xhr, textStatus, errorThrown) {

                alert(“error”);

                alert(textStatus);

            }

        });

     

    Regards,

    Sid!!!

    (0) 
  5. Silvio Miranda

    Thank you for you work.. very good to me as a reference.. congratulations!!!

    (0) 
  6. Anuradha Krishnarao

    Hello Chandrasekhar ,

     

    Very useful blog . Thanks for the same . However I’m absolutely clueless about to go ahead with a scenario where the external  API which requires API Key OAuth Access Required. For eg : A linkedin Scenario . Can you please throw some light on how to achieve that ?

     

    Thanks in advance

    (0) 

Leave a Reply