Skip to Content
Author's profile photo Nithyanandam Venu

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.

/wp-content/uploads/2014/12/1_600994.png

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.

/wp-content/uploads/2014/12/2_601085.png

This is where you enable them.

/wp-content/uploads/2014/12/3_601086.png

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

/wp-content/uploads/2014/12/4_601087.png

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/

Assigned tags

      29 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jeroen van der A
      Jeroen van der A

      Good startup, was starting something similar myself, to get started, so it was very helpful.

      Jeroen

      Author's profile photo Karol Kalisz
      Karol Kalisz

      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.

      Author's profile photo Mike Howles
      Mike Howles

      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.

      Author's profile photo Jeroen van der A
      Jeroen van der A

      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.

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Thanks @jeroen and @karol for your comments.

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Hi Ranajay,

      Did you changed the id in MANIFEST.MF file.

      Thanks,
      Nithyanandam

      Author's profile photo Former Member
      Former Member

      yes i did. PFA ... No output Capture.JPGUntitled.png

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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)

      1.PNG

      step 2:(component.js)

      2.PNG

      step 3:(contribution.ztl)

      3.PNGStep 4:(Manifest.mf)

      4.PNG

      Thanks,
      Nithyanandam

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thanks a lot in advance... Would be a great help

      Author's profile photo Former Member
      Former Member

      This blog was quite helpful. Thanks

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      SDK_6.png

      SDK_7.png

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member
      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Hi,

      I've checked everything didn't miss anything.

      Thanks,

      Ihsan

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Hi Rahul,

      Sorry for the delay.Can you explain about this some more??

      Thanks,

      Nithyanandam

      Author's profile photo Arvind Elayappan
      Arvind Elayappan

      Hi Venu,

      Does your approach work only for .csv / .xls saved online

      Or will this work for any BO Webservices/ WSDL as well.

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Hi Elayappan,

      No it wont work for the BO Webservices/WSDL at this stage.

      Thanks,

      Nithyanandam

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Hi Venu,

      Following your approach would be feasible to develop a SDK custom datasource that consumes data from a BI Service?

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      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

      Author's profile photo Divisional Engineer HANA
      Divisional Engineer HANA

      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