Currently Being Moderated

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 APIhttps://developers.google.com/feed/v1/jsondevguideNo 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

ui5_json1.jpg

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

ui5_json2.jpg


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

ui5_json3.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!

ui5_json4.jpg

ui5_json5.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 

ui5_json6.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.

ui5_json7.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';

ui5_json8.jpg

ui5_json9.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.

ui5_json10.jpg

ui5_json11.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,

ui5_json12.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.

ui5_json13.jpg

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

ui5_json14.jpg

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

ui5_json15.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,

ui5_json16.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,

ui5_json17.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!


Comments

Actions

Filter Blog

By author:
By date:
By tag: