Skip to Content

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 !



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


You must be Logged on to comment or reply to a post.
  • 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.

  • 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,

          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:(



  • 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,


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


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





  • 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



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



  • 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