SAP Analytics Cloud – Application Design Series: 4 – Dynamic Visibility

In the previous blog in this series, we learned how to incorporate popups in analytic applications. In this blog, let us look at another common feature of analytic applications – dynamic visibility.

* * *

Our objective here is to enable the end user toggle between a table & a chart using a radio button group dynamically during runtime. The final application would look as follows:

SAP Analytics Cloud – Application Design Series: 4 – Dynamic Visibility — Dynamic Visibility in Analytic Applications

Following are the steps to set up dynamic visibility. (Note that we continue to use the same application that we leveraged earlier)

1. Add a Radio Button Group

Select the Radio Button Group from the insert menu.

Place the Radio Button Group on top right corner of the chart. You can see the default values arranged vertically.

2. Configure Radio Button Group

You can change the values – Value1 and Value2 – to Chart & Table in the Builder panel. Set the ‘Chart’ value as default.

Change the display option to Horizontal in Styling Panel.

The Radio Button Group is now configured accordingly.

3. Add a Table

Before adding the table, hide the chart on the main canvas so that it is easier to position the table. To do this, use the option ‘Hide’ under context menu of the widget in the outline view. Please note that this option hides the chart only during design time – the end user will still be able to view the chart during runtime.

Now add a table and place it in the desired position in the canvas. Make sure that the table widget is below the radio button group in the outline view – so that the radio button group always stays visible. Finally, map the table to your data.

4. Hide the Table by default

When the user runs the application, you do not want the user to see the table by default. To achieve this, unselect the option “Show this item at view time” from the Styling panel

Since we have the Radio Button Group on the top right corner, it is advisable to hide the table’s Context/Quick Menus from the end user to avoid confusion. This can be done from the Styling panel. Note that you may also hide functions such as Filter, Sorting or Ranking selectively.

5. Add Toggle Functionality (Using Scripting)

Now that the setup is complete, add the following toggle functionality to the onSelect() event of Radio Button Group.

If (RadioButtonGroup_1.getSelectedKey() === “Chart”) { Chart_State_Sales.setVisible(true); Table_Details.setVisible(false); }else{ Chart_State_Sales.setVisible(false); Table_Details.setVisible(true); }