Skip to Content

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 !



<?xml version=“1.0” encoding=“UTF-8″?>
title=“SAP Design Studio SDK Extension Sample JSON Data Source”
title=“JSON Data Source”
tooltip=“JSON Data from openweather API”
title=“Valid Json url”
title=“Has Header Row”
title=“Has Header Column”





sap.designstudio.sdk.DataBuffer.subclass(“”, function() {
var that = this;
var _hasHeaderRow = false;
var _hasHeaderColumn = false;
var _jsonurl;
this.init = function() {
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() {
async: false,
url: _jsonurl,
}).done(function(jsonText) {
function processJsonText(jsonText) {
var city = [];
var day=[];
for(var i=0;i<jsonText.list.length;i++){
that.fillWithArray(city, that.hasHeaderRow(), that.hasHeaderColumn());

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’ –,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!


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

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

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

  2. 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?

        1. Former Member 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)


          step 2:(component.js)


          step 3:(contribution.ztl)

          3.PNGStep 4:(



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


    1. Former Member 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.


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





        1. Former Member Post author


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



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



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



        1. Former Member 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.



  6. Former Member

    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


Leave a Reply