Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 

Design studio 1.5 introduces a number of great new features. One of the ones I'm getting the most use out of is the new analysis components. Specifically the Navigation Panel, Chart type picker and Filter line components. Design studio is getting some serious analysis chops.

These new components are developed to a high degree in the new Data Discovery and Visualization template. It creates a generic Lumira-like analysis interface. By default there is a ton of logic built in here, both in interface interaction and data analysis. This blog post assumes that you'd like to take that template and make it something closer to a purpose built report. The idea is that it's faster to modify this template than to build all the logic they built into the interface.

And why would we use this template at all? It's fast and customizable. For BW users, you will find this as fast as Analysis for OLAP/ Analysis for Office, but you have the ability to add custom parameter displays, headers, your company logo, or whatever else your user community requires.

First, load Design studio 1.5, select a new application, and choose 'Data Discovery and Visualization' as your template

If you just run this app as-is, you'll get the ability to use any data source selected at runtime. This uses the new 'Backend Connection' control. For my purposes, we wanted to remove this functionality and have the template just load a specific data set. This will make it more of a standard report/analysis than a generic tool. Because this is going to be a specific report, we will then be able to make specific customizations to fit your user's needs.

So, with my apologies to those who designed this template, we are going to delete the backend connection from the report.

After deleting this connection, you will need to remove the references to Connection_1 in the code. Search the application for connection_1

You're not going to be using the DS_Select_next_button, so you can comment out all the code in the on_click

You're also not going to need what happens in startup. It just sets it up to data selection mode. Since we are hardcoding this to one datasource, we don't need that mode. Comment all that out.

The default interface has a data selection pane open up by default. We want to hide this for good. Find the DS_SELECT_MAIN and set it's visibility to false.

Now you can assign a datasource to the report. There is already DS_1 there, so find it and assign a datasource

Once you've done this, set 'load in script' to false. Also set your initial view of the datasource.

After that, you should be pretty much set. One additional thing I will share. If you want to start adding things which work with the datasource, you will want it to happen in the APP_SCRIPTS.startUp(). For example, I created a simple readout of the parameter values because my users wanted to see the parameters of the report at all times. So, I added this to my APP_SCRIPTS.startUp()


This function is of course a custom function I created. Do your future self and anyone who might maintain this application a favor and use descriptive coding practices.

Here is the body of that function

var aVariables = DS_1.getVariables();

aVariables.forEach(function(element, index)


          TEXT_3.setText(TEXT_3.getText() + element.text+ " ( " + DS_1.getVariableValueText(element) + " ) ");



Any feedback or questions? Post them down below. Thanks for reading.