Custom Data Source in SAP Design Studio 1.4

[former_member194504]

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.


Note: Since I have not scripted dynamic refresh on data,we should manually refresh the browser or reload the component in design studio.



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.



This is where you enable them.



This is how it looks now, when 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!

SOURCE: http://visualbi.com/blogs/design-studio/custom-data-source-in-sap-design-studio-1-4/