Custom Data Source in SAP Design Studio 1.4
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/
Good startup, was starting something similar myself, to get started, so it was very helpful.
Jeroen
pretty basic and simple - this is how it should be!
for external services there will be only a challenge on solving the cross-domain topic.
I want to check the option to make similar data source, but capable to upload a simple CSV file. then also smaller reports on CSV could be made.
Karol,
I have a basic version of a "Bring your own CSV" uploaded example:
Design Studio SDK (1.4) - Datasource SDK Test
Later this week I plan on having a more refined version of this available.
at a first glance it also seems you have to build in the flexibility yourself as you have no initial view or the dataselect.
So some magic with the fetchData is required for now. Until off course those parts are coming then we can just wait it out.
Thanks @jeroen and @karol for your comments.
Hi Venu
I followed the steps and modifications given in this blog, but for some reason when I run the project from eclipse and the design studio opens. There in the custom data sources I can the sample CSV datasource but not the JSON data source. Can you hint me like where I can be doing wrong?
Hi Ranajay,
Did you changed the id in MANIFEST.MF file.
Thanks,
Nithyanandam
yes i did. PFA ... No output

Hi Ranajay,
I have attached the screenshot where you should make changes. hope this help you out. You can try this changes with the samplcsvdatasource source code.
step 1:(contribution.xml)
step 2:(component.js)
step 3:(contribution.ztl)
Thanks,
Nithyanandam
yeah its same. I checked, but still I can't see the json data source. Do you know how can i debug it or something!!
Hi Ranajay,
I have added the sample zip file where i changed the file names in samplecsvdatasource source code.
https://github.com/divakarvenu/jsondatasource.git
Thanks
Nithyanandam
Thanks a lot in advance... Would be a great help
This blog was quite helpful. Thanks
Hi Venu,
I am currently working on a data extension which retrieves data from a REST API via JSONP. I've mostly just re-purposed your code. It helped me understand the SDK quite a bit, so thanks for that!
I am currently trying to make the extension as generic as possible, trying to give the user the ability to select values for dimensions, or the measure at runtime. To that end, I was wondering, would it be possible to modify the JSON URL property at runtime using a BIAL script? If so, how?
Thanks and regards,
Yash
Hi Yash,
Thanks for the comment!
Its possible. Just define a setter function in your contribution.ztl for the url property. So that,it will be accessible using BIAL script.
Thanks,
Nithyanandam
Hi Venu,
I have tried your example but it doesn't work. The error is the variable "jsonText" when I call the method "processJsonText" the variable is undefinded. Hope you can help me.
Thanks,
Ihsan
Hi ishan,
Did you gave the proper url mentioned in the blog?. Check this out also, if you not did before
https://github.com/divakarvenu/jsondatasource.git
Thanks,
Nithyanandam
Hi,
I've checked the url. I use http://api.openweathermap.org/data/2.5/group?id=524901,703448,2172797,2643743&units=metric
Thanks,
Ihsan
Hi,
The URL is working fine. However there is some error with the JavaScript code you mentioned. Can you please check again from the blog on the steps you followed just to be sure you did not miss anything?.
Cheers
Nithyanandam
Hi,
I've checked everything didn't miss anything.
Thanks,
Ihsan
Hi ishan,
Seems weird, Maybe can you zip the code and sent it to me in message. We can try to debug it.
Thanks,
Nithyanandam
Hi Ihsan,
Have you accounted for the Same Origin Policy? That can prevent the application from accessing JSON data from a web service like Open Weather Map.
Update: Just noticed, your variable name is "jsonText" at line 69, and it is "JsonText" at like 75. I reckon if your code still isn't working, that's the reason why.
Regards,
Yash
Hi, can any one please help me I am using Design Studio 1.5 whenever i load this data source my design studio crashes unlike any other standard or custom data sources
Regards,
Rahul
Hi Rahul,
Sorry for the delay.Can you explain about this some more??
Thanks,
Nithyanandam
Hi Venu,
Does your approach work only for .csv / .xls saved online
Or will this work for any BO Webservices/ WSDL as well.
Hi Elayappan,
No it wont work for the BO Webservices/WSDL at this stage.
Thanks,
Nithyanandam
Hi Venu,
Following your approach would be feasible to develop a SDK custom datasource that consumes data from a BI Service?
Hi Alfons,
Sorry for the delay first of all. According to my assumption whatever service run through web can be consumed in Custom Datasource component. However there are some restriction for services like authentication and security things. I have not given any try to BI service. So, currently I have no idea on this. if i get my hands there, will let you know.
Thanks,
Nithyanandam
Hi Venu,
Its nice article, but I could not able to make it Design Studio 1.6 for testing.
I could not able view the data display. I downloaded your source code and tried.
Please help me for resolving data display issue.
Thanks & Regards
Appa Rao.Sampangi