Manual Refresh Button in SAP Design Studio Application

[Former Member]

As we all know, Design Studio is the future dashbaording tool from SAP, still the tool is lacking various nuances of what we get from SAP Dashboards such as cascading filters using drop downs, what-if analysis etc. One such thing is also having a manual Refresh button in the application for the user to refresh it without loading the whole page using a browser refresh button.

Design Studio has no built in function or button for refresh. However there is a small workaround to achieve the functionality of refresh in the application.

Lets look what a normal refresh function does. Majorly a refresh button in Dashboards will do below tasks:

1. Reload Datasources

2. Reset/clear all the filters

3. Repopulate and Reset all the items in selector components

Keeping the above tasks in mind, we can write a script to perform these above functions in Design Studio.

Lets look at it one by one.

Before diving in to scripting the above 3 tasks, lets create a sample application with 2 Data sources, one chart and one selector component as in the image.

The below application has a bar chart with the revenue for each period in a year. This bar chart can be changed based on the drop down filter on top of it with all the states listed in the dropdown.

Now, to refresh the application, lets just add a button component and write the necessary script in the onclick event.

In the code, there is

1. Datasource reload (DS_1 for bar chart, DS_2 for dropdown)

2. Clearing the filters for DS_1 for barchart)

3. Reset all the items in the drop down. (DROPDOWN_1.setItems(DS_2.getMemberList("OBJ_218", MemberPresentation.EXTERNAL_KEY, MemberDisplay.TEXT, 20,"ALL"));

When the refresh button is clicked, it triggers all the above events in the script which achieve the refresh function.

Note : If there are any pop-ups in the dashboard, its better to write a code to close the pop-ups as well to get back to the initial view of the application.

The code is as below:

POPUP_1.hide();