Filter selections in Blox widget

[Community_Admin]

Question

How to show the values selected in the dashboard filter as a Blox widget?

Answer

Our example uses a filter/field called "Divison_name".

First, in your BloX widget's Editor tab:

1. Set "showCarousel" to "true", but add the following option to make the navigation arrows go away:

"showCarousel": true,
"carouselAnimation": {
  "showButtons": false
},

2. Within the specific Text Block / container you want to change, give it an "id" attribute of "text-to-change" and "wrap" attribute as shown in the bolded section below:

"type": "TextBlock",
"text": "{panel:Divison_name}",
"id": "text-to-change",
"wrap": "true",

(Explanation: the "id" helps the widget script in the next steps run properly, and the "wrap" helps all the selected options show up if your user selects lots of them).

Next, edit your widget's script by doing this:

3. Copy and paste the whole script below:

const filterTitle = "Divison_name";

widget.on("ready", (scope, args) => {
	let text = `${filterTitle}: All`;
	try {
		let foundFilter;
		const filter = scope.dashboard.filters.$$items.forEach((item) => {
			if (item.levels) {
				item.levels.forEach((level) => {
					if (level.title === filterTitle) {
						foundFilter = level;
					}
				});
			} else if (item.jaql.title === filterTitle) {
				foundFilter = item.jaql;
			}
		});
		const { filter: myFilter } = foundFilter;
		/*
		
			In Sisense we have different structures of the filter.
			For more details about possible options, please, check this article:
			https://sisense.dev/guides/querying/jaqlSyntax/#filtering
			
		*/
		text = myFilter.members ? `${filterTitle}: ${myFilter.members.join(", ")}` :
			myFilter.exclude ? `${filterTitle} excludes: ${myFilter.exclude.members.join(", ")}` :
			myFilter.contains ? `${filterTitle} contains: ${myFilter.contains}`: `${filterTitle}: custom filter`;
		
		$("#text-to-change", element).text(text);
	} catch(err) {
		console.warn(`Filter with title ${filterTitle} was not found`); 
		$("#text-to-change", element).text(text);
	}
});

1. Change the variable filterTitle to whatever your dashboard filter's title is instead of "Divison_name" - presumably something like "Country".
2. Save all the changes, then refresh the dashboard.
   
   
   Important: the structure of the JAQL filter is explained in the article below, so the script should be updated accordingly to the structure that is defined in the filter:
   https://sisense.dev/guides/querying/jaqlSyntax/#filtering

[Jake_Raz]

//ASSUMPTION: you're using an ordinary "List"-style filter

Would it be possible for this to work with a Text-style filter? The filter I'm using has too many values for a List-style filter to make sense. Rather than making users pick from that, we just use a text "contains" filter that they type in, as its much easier. 

[cmdaniels]

If I try adding this more than one time in a dashboard none of the widgets with the script applied display correctly. Is there a solution for implementing this for more than one filter result?

[Jake_Raz]

@Community_Admin @slosada - Not sure if you saw my earlier comment, about whether it's possible to make this work with a "Text" filter instead of a List-style filter, since List-style filters aren't always ideal for fields that contain many values.

I had a few other questions as well:

• Is it possible to display some other field, based on what's selected in the dashboard filter? For example, if I'm having users select someone's FULL NAME in the dashboard filter, but I'd like the BloX widget to just display that person's first name (instead of the actual full name that's selected in the filter). Basically, I would have the "full name" field as the filter, but the BloX widget would instead display the corresponding "first name" field instead.
  
  
• Is it possible to make the label change depending on whether its a single value versus multiple? In your example you use "Fake Names", but wouldi it be possible to have it switch between "Fake Name" (singular) for just one name and "Fake Names" (plural) for multiple?
  
  
• Is it possible to apply bold formatting to only the name being displayed, but not the label (or vice versa)? I tried experimenting with this on my own but the formatting seems all-or-nothing, and attempting to insert html-style bold tags (<b>) into the script doesn't work (it just breaks it...). 

[AssafHanina]

Hey @Jake_Raz ,

Please find example of the Use Case
Notes:

1. Filters have different element for Members such as Exclude, Contain, Not In and Etc 
2. The script cover the Include - select from a List. which can be single/multiple select.
   it also check for Disabled and Include all. 
3. It Cover also Bold text for the Select member (Full_name) and display the first name only.
   Applying bold style can be adjusted also by creating new element in the Blox 
4. the script doesn't cover dependent filters

Implementation:

1. Create a blox widget and attach the following Body 
   

   {
       "style": "",
       "script": "",
       "title": "",
       "showCarousel": true,
       "body": [
           {
               "type": "Container",
               "items": [
                   {
                       "type": "TextBlock",
                       "text": "Filter: <span id='filterName'></span> Members: <span id='members'></span>",
                       "id": "display_filter",
                       "style": {
                           "text-align": "center",
                           "font-size": "20px",
                           "margin": "20px"
                       }
                   }
               ]
           }
       ],
       "actions": []
   }​

2. Copy the Script and add it to the Blox widget script
   

   widget.on("ready", function(w, args) {
       
   	// update the filter name
   	const filter_title = 'Full_name';
   	const filter_display_name = 'First Name'
       
       // Define the include_all object for comparison
       const include_all = {
           explicit: false,
           multiSelection: true,
           all: true
       };
       
   	// fixed variables
       const filters = w.dashboard.filters.$$items; 
       let members_to_display = '';
       let filter_name = '';
   
       filters.forEach(function(item) {
           
           // Check if the filter's title includes the desired value
           if (item.jaql && item.jaql.title.includes(filter_title)) {
   
   			filter_name = item.jaql.title;
   
               // Check if the filter matches the "include_all" condition
               if (
                   item.jaql.filter && item.disabled === false && 
                   JSON.stringify(item.jaql.filter) === JSON.stringify(include_all)
               ) {
                   members_to_display = '<b>include all</b>';
               } else if (item.jaql.filter && item.jaql.filter.members && item.disabled === false) {
                   // Extract first names from members
                   const first_names = item.jaql.filter.members.map(name => `<b>${name.split(' ')[0]}</b>`);
                   members_to_display = first_names.join(', ');
               } else {
                   members_to_display = '<b>Inactive filter</b>';
               }
           }
       });
   
       // Update the Blox elements dynamically
       $("#filterName").text(filter_display_name);
       $("#members").html(members_to_display); // Use .html() to allow bold tags
   });
   ​

   
   
   
3. Replace the Script filter name with the dashboard filter name

Example with Single value:

Example with Multiple values:

Best Regards