Best Practice: Filter Table and Chart through Checkboxes (Multi Selection)
Learn how to filter a table or a chart using multiple measures selected from a checkbox
group widget in SAP Analytics Cloud, analytics
designer.
Prerequisites
-
You've already added a table and a chart widget to your canvas and placed
them on top of each other.
-
To follow all functions of this sample use case, you've completed the
exercise Best Practice: Switch between Chart and Table and can
now enhance your analytic application.
Context
Unlike the dropdown widget, the checkbox group widget lets you use multiple measures as
filters. In this use case, you add a checkbox group widget where you list all the
measures of your data source. On top of that, you add three buttons:
-
Button set selected to filter the table and the chart
according to the selected measures of the checkbox group
-
Button remove all to remove all the selected measures rather
than deselecting them one by one in the checkbox group
-
Button set all to display all the available measures in your
table and chart rather than selecting them one by one in the checkbox
group
Procedure
-
Click and place this widget on the left side of your table.
-
Change the name of the checkbox group to CheckboxGroup_Measures on
the Layout panel under .
-
Remove the initial values Value 1 and Value 2
from the checkbox group value list in the Builder panel:
Select these two values one after the other, click , and then click
Apply.
-
Add a label to the checkbox group that indicates to users that they can select measures
through the checkboxes.
-
Click .
-
Place the text widget on top of the checkbox group.
-
Enter a text, Measures, for example.
- Optional:
Resize the text widget.
-
For easy access to the checkbox group's measures, add the three buttons mentioned
above:
-
Click and place it beneath the label.
-
Repeat the step above for the other two buttons.
-
Select the first button, click , and enter Button_setMeasureFilter
as name and set selected as text.
-
Select the second button, click , and enter
Button_removeAllMeasures as name and
remove all as text.
-
Select the third button, click , and enter Button_setAllMeasures
as name and set all as text.
-
To access the values users select in the checkbox group, create two script
variables that act as global variables, which can be accessed from anywhere in
your application:
-
The first script variable, called AllMeasures, is set as an array and holds
all the measures that users can select in the checkbox group.
-
The second script variable, called CurrentMeasureFilterSelection, is set as
a string and holds the measures that users currently selected in
the checkbox group.
-
On the Layout panel under
Scripting, click (Add Script
Variable).
-
In the Script Variable panel under
Structure, enter
AllMeasures as name, leave type as
string, and toggle the Set As
Array button to YES.
-
To close the Script Variable panel, click
Done.
-
Add a second script variable, and in the Script Variable panel
under Structure, enter
CurrentMeasureFilterSelection as name, leave
type as string, and toggle the Set As
Array button to YES.
-
To close the Script Variable panel, click
Done.
-
To define what will happen when users select a filter value in the checkbox group, create a
script object. In this object, write a function that sets the measure filter
according to what the user has chosen from the checkbox group.
-
On the Layout panel under
Scripting, click (Add Script
Object).
-
To rename the folder, hover over ScriptObject_1, click , and enter Utils.
-
To rename the function, hover over function1, click , and enter setMeasureFilter.
-
Click on the function setMeasureFilter, and when the
Script Function panel opens, click
(Add
Argument).
-
Enter selectedIds as name of the argument, leave type as
string, toggle the Set As
Array button to YES, and click
Done twice.
-
To write the script for the function, hover over the setMeasureFilter
function in the Layout panel, click , and enter this script in the script editor:
Sample Code
// remove Measures
Table.getDataSource().removeDimensionFilter("Account_BestRunJ_sold");
if (CurrentMeasureFilterSelection !== [""]) {
for (var i=0;i<CurrentMeasureFilterSelection.length; i++){
Chart.removeMeasure(CurrentMeasureFilterSelection[i], Feed.ValueAxis);
}
}
// add Measures
Table.getDataSource().setDimensionFilter("Account_BestRunJ_sold",selectedIds);
for (i=0;i<selectedIds.length; i++){
Chart.addMeasure(selectedIds[i], Feed.ValueAxis);
}
// save the current selection into global variable
CurrentMeasureFilterSelection = selectedIds;
With this script you define what happens to the table and the chart when users select
filter values in the checkbox group:
-
You remove any already set dimensions of the table or
measures of the chart.
-
You add the captured values the users have selected in
the checkbox group as new dimensions of the table and as
new measures of the chart.
-
You take the currently selected measures and save them in
the script variable
CurrentMeasureFilterSelection.
-
Define what will happen when users click the buttons you created.
-
Hover over the set selected button in the Layout
panel, click , and enter this
script:
Sample Code
Utils.setMeasureFilter(CheckboxGroup_Measures.getSelectedKeys());
This onClick function script calls the
Utils.setMeasureFilter function and passes to
it the selected measures of the checkbox group.
-
Hover over the remove all button in the Layout panel,
click , and enter this
script:
Sample Code
CheckboxGroup_Measures.setSelectedKeys([""]);
Utils.setMeasureFilter([""]);
This onClick function script removes all the
selected measures from the checkbox group itself and passes an empty
array to the Utils.setMeasureFilter that updates your
table and chart as well as your global variable
CurrentMeasureFilterSelection.
-
Hover over the set all button in the Layout panel,
click , and enter this
script:
Sample Code
CheckboxGroup_Measures.setSelectedKeys(AllMeasures);
Utils.setMeasureFilter(AllMeasures);
This onClick function script sets the selected keys
of the checkbox group to the AllMeasures script
variable you defined before and passes the same variable to the
Utils.setMeasureFilter function.
-
Define what will happen when the analytic application is first run, by creating the
onInitialization function of the canvas itself.
-
Hover over the Canvas in the Layout panel,
click , and select
onInitialization.
-
Enter this script in the script editor:
Sample Code
// get all measures from the table data source
var measures = Table.getDataSource().getMeasures();
// define array or the selected Keys
var selectedKeys = ArrayUtils.create(Type.string);
if (measures.length > 0) {
for (var i=0;i<measures.length; i++){
// add the Measure to checkbox group
CheckboxGroup_Measures.addItem(measures[i].id,measures[i].description);
//add the measure to the selectedKeys
selectedKeys.push(measures[i].id);
CheckboxGroup_Measures.setSelectedKeys(selectedKeys);
console.log(["CurrentMeasure ", measures]);
}
}
console.log(["selectedKey ", selectedKeys]);
AllMeasures = selectedKeys;
Utils.setMeasureFilter(selectedKeys);
With this script you make sure that on initialization, you get all
the available measures of the table's data source.
You define a selected keys array of type string and, using a loop, you add the measures to
your checkbox group and the selected keys array. You also call on
the setSelectedKeys function of the checkbox group
and set its selected keys to your array.
Finally, you set the script variable AllMeasures and the
measure filter to the selected keys.
-
Save the application and click Run Analytic
Application.
Results
When you run the application, it looks like this:
If you
click the remove all button, all measures are deselected and there is
no table or chart (when you click on ).
If you
click the set all button, all measures are selected and the table (or
chart) looks the same as when you first ran the application.
Let's
select a few measures (Gross Margin Plan, Quantity Sold,
Original Sales Price abs Dev, and Discount) in the
checkbox group and click the set selected button. The table is updated
accordingly, (and also the chart when you click on ):