Filter selections in Blox widget

Community_Admin · ‎10-19-2021

Question

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

Answer

Our example uses a filter / field called "Fake Names"
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:Fake Names}",
"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);
	}
});

Change the variable yourFilterTitle to whatever your dashboard filter's title is instead of "Fake Names" - presumably something like "Country".

Save all the changes, then refresh the dashboard.

The structure of the JAQL filter is explained in this article, so the script should be updated accordingly the structure that is defined in the filter:
https://sisense.dev/guides/querying/jaqlSyntax/#filtering

In addition, the following widget script supports cascaded filters, as well as exclusions.

//========================   Configuration  ================================
var yourFilterTitle = "Filter Title Goes Here";
//==========================================================================

widget.on("ready", function(w, args) {
 
 var filterDetails;
 
 //Loop through all filters
 prism.activeDashboard.filters.$$items.forEach((itemFilter) => {
  
  //if the filter is cascaded
  if(itemFilter.isCascading == true){
   //loop through the levels
   for(var k=0; k<itemFilter.levels.length;k++){
    //If the filter title is equal to FilterName (the target filter)
    if(itemFilter.levels[k].title == yourFilterTitle){
     filterDetails = itemFilter.levels[k].filter
    }
   }
  }
  
  //If the filter is not cascaded:
  else{
   //If the filter title is equal to FilterName (the target filter)
   if(itemFilter.jaql.title == yourFilterTitle){
    filterDetails = itemFilter.jaql.filter
   }
  }
 });
 
 if(filterDetails.all === true) {
  $("#text-to-change").text(yourFilterTitle + ": All")
 }else if(filterDetails.exclude){
  $("#text-to-change").text(yourFilterTitle + ": NOT " + filterDetails.exclude.members.join(", "))
 } else {
  $("#text-to-change").text(yourFilterTitle + ": " + filterDetails.members.join(", "))
 }
});

Jake_Raz · ‎01-30-2024

//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 · ‎08-12-2024

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 · ‎12-06-2024

@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 · ‎12-15-2024

Hey @Jake_Raz ,

Please find example of the Use Case
Notes:

Filters have different element for Members such as Exclude, Contain, Not In and Etc
The script cover the Include - select from a List. which can be single/multiple select.
it also check for Disabled and Include all.
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
the script doesn't cover dependent filters

Implementation:

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": []
}

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
});

Replace the Script filter name with the dashboard filter name

Example with Single value:

Example with Multiple values:

Best Regards

Sisense Community

Filter selections in Blox widget

Question

Answer