Skip to Content
Technical Articles
Author's profile photo James Barlow

Use a text search to filter a dashboard

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.

Filter%20using%20text%20search


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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo James Vaillancourt
      James Vaillancourt

      thank you Mr. Barlow for helping me learn a few new concepts.

      The only way I could get this code to work was to change in the i loop through the data.

      var DESC_ORIGINAL = MEM.desciption;

      to

      Var DESC_ORIGINAL = MEM.id;

      Then the filtering would work with the key in the array rather than the description.

      Jim

      Author's profile photo James Barlow
      James Barlow
      Blog Post Author

      Good point,  I was using dummy data so the description worked,   but for 'proper' data  you're right.. Should use the id

      Author's profile photo Muthukkumaran KM
      Muthukkumaran KM

      Hi James,

      I have tried to implement the same scenario in our system, here while clicking the Reset button it will clear the results including the Input field, but here I'm trying to do the same can't get to it. Kindly help me on this case.

      Author's profile photo James Barlow
      James Barlow
      Blog Post Author

      Would you be able to share the code you've written?
      I didn't cover the reset button in my code example - just to keep things simple.

      But depending on your dashboard you just need to reset button script to clear the input field and remove the dimension filter from any widgets that are affected by it.