Dynamic Visibility with SAP Design Studio

One of the features that made me fall in love with Xcelsius (Dashboards) back in the day was the ability to easily show and hide components based on selections made in other components.  Later on Xcelsius introduced the ‘Tabs’ component in 2008 and made life even easier for showing multiple components dynamically.  However, I still preferred using the process that I discovered back with good ole Xcelsius 4.5.

That function became commonly know as Dynamic Visibility in Xcelsius.

 

Not only was it a great function, but it was very easy to implement.  To nobody’s surprise, over the last couple of years, SAP has been nudging customers to move their new dashboard development against Design Studio.

Some customers have begun that transition; however, the tools are quite different in many regards as well as the functionality available (one of them being dynamic visibility).

The good news is that the same functionality can be done in Design Studio using a little bit of JavaScript code.  Let’s walk through the steps below.

First off, let’s drag three components onto the canvas.  It doesn’t matter what two of them are, but let’s make the third one a radio button.

For purposes of this blog, we will use a cross table, a bar chart, and a radio button.

Next let’s click on the ‘Items’ section on the properties for the radio button.

And give the values for the two selections, which for this blog will be ‘Crosstab’ and ‘Bar Chart’.

Next we will click on the ‘On Select’ button under the Events section of the Radio Button properties, which will prompt the script editor.

Don’t let the script editor scare you if you are not a coder or not familiar with JavaScript.

We will use the Content Assist tool in the script editor to help us program the dynamic visibility to only show the crosstab component when it is selected in the radio button and vice versa for the column chart.

Content Assist is a great way to help the non-programmers get their feet wet with some JavaScript.

When the Content Assist tool is activated, we will see some stock calculation logic that can be selected to help us get started.

We will want to hover over the ‘If-If-Else-Block with Compare’ and see what the calculation looks like.

This is the skeleton of the logic that we will need, so we will select it.

At this point all that we will do is implement if-then logic just as we would do inside of a SQL database with a case statement or if-else logic inside of MS Excel.

If the value selected inside of the radio button equals “Column Chart” then make the chart component visible and the crosstab component invisible and vice versa.

That is it! Go ahead and execute your application locally and test it out.

Select the crosstab and the column chart should go away.

Select the Column Chart and the crosstab is gone!

There you have it.  Dynamic visibility inside of SAP Design Studio.  Not as out of the box as it was with Xcelsius but still only a few clicks with a little bit of code.

I hope this post was useful.  What other functions did you find useful in Dashboards that you would like to bring into SAP Design Studio?

Please share your thoughts below.