It’s been only a few days since the release of SAP Design Studio 1.4 & it has already created so much buzz among the community. One of the features that I have been excited about, is the ability to have custom data sources. For those of us who have worked with SAP Dashboards (Xcelsius), data connectivity to flat files, web services among others, has always been on our wish list.

Although, it is not straightforward connectivity(I wish…), SAP has provided Data Source SDK which can be used to create custom data sources that can take data from any number of sources.

I have been playing around with the SDK and came up with something interesting. Here, I have used the sample CSV Data Source provided by SAP and made changes to it, to accept JSON Data from a Web Service – the REST API ‘openweathermap’. Here is the code !

Contribution.xml

<?xml version=“1.0” encoding=“UTF-8”?>
<sdkExtension

xmlns=“http://www.sap.com/bi/zen/sdk”

id=“com.sap.sample.jsondatasource”

title=“SAP Design Studio SDK Extension Sample JSON Data Source”

version=“14.0”

vendor=“visualbi”>

<component

id=“JsonDataSource”

title=“JSON Data Source”

tooltip=“JSON Data from openweather API”

icon=“res/icon.png”

handlerType=“datasource”>

<jsInclude>res/js/component.js</jsInclude>

<property

id=“Jsonurl”

title=“Valid Json url”

type=“Url”/>

<property

id=“hasHeaderRow”

title=“Has Header Row”

type=“boolean”/>

<property

id=“hasHeaderColumn”

title=“Has Header Column”

type=“boolean”/>

</component>
</sdkExtension>
</xml>

component.js

sap.designstudio.sdk.DataBuffer.subclass(“com.sap.sample.jsondatasource.JsonDataSource”, function() {

var that = this;

var _hasHeaderRow = false;

var _hasHeaderColumn = false;

var _jsonurl;

this.init = function() {

this.defineDimensions([{

key: “cols”,

text: “City”,

“axis”: “COLUMNS”,

“axis_index”: 0

}, {

key: “rows”,

text: “Date”,

“axis”: “ROWS”,

“axis_index”: 0

}], {

key: “measures”,

text: “Measures”,

containsMeasures: true,

members: [{

“key”: “measure”,

“text”: “Temprature”,

“scalingFactor”: 2,

“formatString”: “0.00 EUR;-0.00 EUR”

}]

});

};

this.jsonurl = function(value) {

if (value === undefined) {

return _jsonurl;

} else {

_jsonurl = value;

return this;

}

};

this.hasHeaderRow = function(value) {

if (value === undefined) {

return _hasHeaderRow;

} else {

_hasHeaderRow = value;

return this;

}

};

this.hasHeaderColumn = function(value) {

if (value === undefined) {

return _hasHeaderColumn;

} else {

_hasHeaderColumn = value;

return this;

}

};

this.afterUpdate = function() {

$.ajax({

async: false,

url: _jsonurl,

}).done(function(jsonText) {

processJsonText(jsonText);

});

};

function processJsonText(jsonText) {

var city = [];

var day=[];

city[0]=[“”,”Londen”,”Kiev”,”Moscow”,”Morins”];

day[0]=[“01-12-2014”];

for(var i=0;i<jsonText.list.length;i++){

day[i+1]=parseInt((JsonText.list[i].main.temp));

}

city[1]=day;

alert(city);

that.fillWithArray(city, that.hasHeaderRow(), that.hasHeaderColumn());

that.fireUpdate(true);

}

});

In the init function, I have defined a column dimension, a row dimension and an external dimension. I have used the second method of SDK extension – the one using ‘that.fillWithArray’, because data is in a 2D array. Data is the current temperature in the cities, on that day. The ‘that.fireupdate’ function is to notify the SDK framework that your SDK data source contains updated data. I have installed the component and created an application called JSON_DATA. We give the URL of the REST API, in ‘Properties’ – http://api.openweathermap.org/data/2.5/group?id=524901,703448,2172797,2643743&units=metric

After the Data Source is assigned to the Column Chart

After the Data Source is assigned to the Column Chart

This screenshot has been taken after the Data Source is assigned to the Column Chart. A,B,C…and 1,2…are displayed because ‘Has Header Row’ and ‘Has Header Column’ have not been set to true. So the default values provided by the SDK are displayed.

Default values provided by the SDK

Default values provided by the SDK

This is where you enable them.

Enabling ‘Has Header Row’ and ‘Has Header Column’

Enabling ‘Has Header Row’ and ‘Has Header Column’

This is how it looks now, when run on a browser.

Run on a browser

Run on a browser

I have hard-coded the date and the cities here, for simplicity – because the focus is mainly on using a custom data source in SAP Design Studio 1.4 (JSON Web Service). This new feature of custom data sources opens a whole new door of possibilities – mine is just a beginning to tap into the huge variety of open online data, available for analytics. So, let’s keep exploring!

 

Learn more

Subscribe to our Newsletter

5600 Tennyson Pkwy
Suite 120
Plano TX 75024.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com