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

In the previous blog in this series, we learnt 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:

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.

Adding a radio button group

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

placing the radio button in the canvas

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.

configuring the radio button group

Change the display option to Horizontal in Styling Panel.

Styling options for radio button group

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.

hiding the chart before adding the table

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.

Adding the table to the canvas

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.

Hiding the table by default

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.

Hiding the table’s context menus

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);

}

Script for adding toggle functionality

Save & run the analytic application. You will be able to toggle between chart and table.

* * *

In the subsequent blog we will explore how to leverage Scripting in analytic applications.

Reach out to us here today if you are interested to evaluate if SAP Analytics Cloud is right for you.

The post SAP Analytics Cloud – Application Design Series: 4 – Dynamic Visibility appeared first on Visual BI Solutions.