Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
JBARLOW
Contributor
2,715
The purpose of this Blog post is to demonstrate how text entered into a search (input field) can be used to filter a dashboard.
This can be useful if users want to be able to filter on multiple values (not currently possible using a drop down ) or if the list of values is too large to use in a radio button widget.

The example image below demonstrates functionality to allow users to search whilst ignoring the native case sensitivity inherent in Java script;  it also demos a basic partial string/search matching option.

You can see that users are able to enter a search string such as "san"  to filter the table and chart for all Locations containing that string.




Basic example - Filter using a case insensitive text value


Widgets:

Table Widget:  Table
Input Field:      INPUT_FIELD
Button:             B_FILTER

Script Variables:

IF1_VAL      (defined as type: String) (stores the value entered by the user in the Input Field)
MATCHES  (defined as type: String  & Array)


 

In this example the only code is present in the button: B_FILTER

The high level logic is:

1. Take the value entered by the user and store it in the variable 'IF1_VAL' as a lower case string
2. Store the dimension present in the table in a local variable
3. Remove any existing filters from the table
4. If the input field value isn't empty then ...

5. Get all the members of the dimension present in the table
6. Loop through each dimension member in turn and write them to a local variable as a lower case
string
7. At each run of the loop compare the lower case member description to the value entered
by the user in the input field.
8. If the lower case dimension member string contains the same sequence of characters entered
by the user then add the original dimension member description to the array variable 'MATCHES'

9. Finally filter the table by the dimension and the member values stored in the 'MATCHES' array
variable

More detailed comments are present in the code below.
// Declare variables and set the value of global variables

IF1_VAL = INPUT_FIELD.getValue().toLowerCase();
// get the value entered in the input field (values set to lower case)

var DIM = Table.getDimensionsOnRows()[0];
// get the dimension in the first column (row) of the table

MATCHES=[""];


Table.getDataSource().removeDimensionFilter(DIM);
// remove any existing dimension filter on the table

if(IF1_VAL.length > 0 )
{
/*
- Loop through the members of DIM (location in this example),
- Populate the variable DESC with the description value of the dimension member - MEM variable.
- At each loop push the DESC value into the array 'MATCHES' if it matches the text string entered in the input field
*/

var selections = Table.getDataSource().getDataSelections();
for (var i=0;i<selections.length;i++)
{var MEM = Table.getDataSource().getResultMember(DIM,selections[i]);
var DESC_LOWER_CASE = MEM.description.toLowerCase(); // set to lower case

var DESC_ORIGINAL = MEM.description;
// new var to take the Original description value - DESC_ORIGINAL will be pushed to the final filter array

if(DESC_LOWER_CASE.includes(IF1_VAL))
// Check if the lower case Input field value matches the lower case dimension.description value

{MATCHES.push(DESC_ORIGINAL); }
// Add DESC_ORIGINAL values to the 'MATCHES' array if the previous condition is met

} //END OF FIRST IF LOOP

/* Filter the table on the dimension DIM (location) with the values found in the array MATCHES */
if(MATCHES.length-1 >0) // Needed in case nothing matches the search string
{Table.getDataSource().setDimensionFilter(DIM,MATCHES);
}}

 

Summary


As shown in the graphic at the top of this Blog Post, you can further enhance the UX by allowing users to enable/disable case sensitivity & allow partial pattern matches.

The ability to filter a dashboard via a text search, frees users from having to enter or know explicit values when searching.
It also provides a cleaner UI when filtering on multiple values

 

Further help from the community can be found here: Analytic Designer Q&A
5 Comments
Labels in this area