In the previous blog in this series, we learnt about custom implementation of Linked Analysis using scripting. In this blog, let us see how to dynamically display measures and dimensions in widgets using scripting APIs.
* * *
Our goal is to let the user dynamically change the dimension and measure of a chart at run time as shown below. The checkbox is used to select the dimensions, and a dropdown is used to select the measure.

Dynamically assigning measures & dimensions to widgets
Following are the steps involved to implement this.
1. Create the widgets
Add a column chart which shows Sales by State. Then add Checkbox Group and Dropdown widgets as follows. We’ll configure these two widgets in the next step.
2. Configure the Selector Widgets
To configure the Checkbox Group/Dropdown we can either hardcode the values in the Builder options or populate the widgets using scripting. We’ll utilize both the methods here to respectively populate dimensions & measures.
Under the Builder options of the Checkbox Group add the values ‘State’ and ‘City’. Mark State as the default selection.
To populate the Dropdown widget, add the following script in the onInitialization() event of the main canvas. The script retrieves all members (from the Account dimension) and populates these values in the dropdown.
var measure_list = Chart_1.getDataSource().getMembers(“Account”);
for ( var i=0; i < measure_list.length; i++){
Dropdown_1.addItem ( measure_list[i].id, measure_list[i].displayId );
}
Dropdown_1.setSelectedKey(“[Account].[parentId].&[Sales]”);
Save and run the application. You can find the values populated in selector widgets. Remember that we still have not added the script measure/dimension selection to be reflected in the chart.
3. Create Global Variables
Create two global variables chart_dim and chart_measure. The variable chart_dim is a string array that can store selections from Checkbox Group and chart_measure is a string variable that can store the selected measure from dropdown. Make sure to assign the technical name of measure ‘Sales’ as default value to the global variable chart_measure.
4. Configure the Checkbox Group for interaction
Add the following script in the onSelect() event of the Checkbox Group. This allows the user to choose one or more dimensions to be displayed on the chart. Note that we first clear all the existing dimensions from the chart before processing the selected values in the checkbox group.
if ( chart_dim.length > 0 ) {
for ( var i=0; i < chart_dim.length; i++ ) {
Chart_1.removeDimension ( chart_dim[i], Feed.CategoryAxis );
}
}
chart_dim = ArrayUtils.create(Type.string);
var dimension_list = CheckboxGroup_1.getSelectedKeys();
for ( var j=0; j < dimension_list.length; j++ ) {
Chart_1.addDimension ( dimension_list[j], Feed.CategoryAxis );
chart_dim.push( dimension_list[j]);
}
5. Configure the Dropdown for interaction
Add the following script to the onSelect() event of Dropdown. This allows the user to dynamically change measures. The procedure is similar, with the removal of existing measures happening first followed by the addition of selected measures from the dropdown.
Chart_1.removeMeasure ( chart_measure, Feed.ValueAxis );
chart_measure = Dropdown_1.getSelectedKey();
Chart_1.addMeasure ( chart_measure, Feed.ValueAxis );
Save & Run the application. Now you will be able to dynamically change the measures and dimensions.
* * *
In the subsequent blog we will learn about data explorer in analytic applications.
Reach out to our team here if you are interested to evaluate if SAP Analytics Cloud is right for you.
Subscribe to our Newsletter
The post SAP Analytics Cloud – Application Design Series: 10 – Dynamically changing Measures and Dimensions appeared first on Visual BI Solutions.