Setting Filters Using APIs in an Effective Way

In this lesson, we will look at two scenarios that show how to use the setDimensionFilter API in an effective way. We'll start with a simpler scenario, using only one chart in a story, then move on to a more complex scenario with multiple charts.

In this scenario, we explore how to effectively set filters using APIs in an SAP Analytics Cloud story and analyze the impact on story performance using the Performance Insights tool. We look at avoiding additional data loading of the result set by preventing the initial data request using the setRefreshPaused API instead of setting a filter in the Builder panel.

Watch this video to learn how.

In the first scenario, the following steps helped to optimize the story performance and reduce the number of calls to the backend when using a single chart.

1. In the onInitialization event script, we add a script that defines a filter value on a dimension using the setDimensionFilter API. In our scenario, we specify the country as dimension, and Germany as value.
2. As we want to avoid additional data loading of the result set, we prevent the initial data request using the Always Pause option in the Data Refresh settings on the widget level of the story, combined with the setRefreshPaused(false) API in the onInitialization event script for the page.

12
Chart_1.getDataSource().setDimensionFilter("0D_NW_BP__0D_NW_CNTRY","DE");
Chart_1.getDataSource().setRefreshPaused(false);

In this scenario, we explore a more complex scenario where we have three charts and a dropdown that is used to select a dimension and apply it as a filter to all three charts. We start by looking at the onSelect event script required to read the dimension countries and write them into the dropdown that will act as the filter for the three charts.

We look at both the correct and incorrect way to write the script and use the Performance Insights tool to analyze performance and view script optimization recommendations to reduce the number of extra trips to the backend from three to one single trip.

Watch this video to learn how.

In the second scenario, the following steps helped to optimize the story performance and reduce the number of calls to the backend when using multiple charts.

1. In the onSelect script for the dropdown, use the copyDimensionFilter API to copy the fetched description of the first setDimensionFilter call.

   With the copyDimensionFilter API, we specify another data source from where the filter is to be copied. In our example, the data source of the first chart.

   Code Snippet

   Copy codeSwitch to dark mode

   1234
   var ds = Chart_1.getDataSource();
   ds.setDimensionFilter("0D_NW_BP__0D_NW_CNTRY",this.getSelectedKey());
   Chart_2.getDataSource().copyDimensionFilterFrom(ds);
   Chart_3.getDataSource().copyDimensionFilterFrom(ds);

2. In the onSelect event script, use a MemberInfo object to provide the filter value, instead of providing it as a string.

   The MemberInfo object is specified in JSON style using the curly brackets around the ID and the Description arguments. As we provided both elements when we created the entries in the onInitialization event, we can now use the getSelectedKey and getSelectedText methods to use them within the MemberInfo object.

   Code Snippet

   Copy codeSwitch to dark mode

   1234
   var ds = Chart_1.getDataSource();
   ds.setDimensionFilter("0D_NW_BP__0D_NW_CNTRY",{id:this.getSelectedKey(), description:this.getSelectedText()});
   Chart_2.getDataSource().copyDimensionFilterFrom(ds);
   Chart_3.getDataSource().copyDimensionFilterFrom(ds);