Highlight Selected BloX Filter Button

[intapiuser]

1. Apply this widget script (found in the widget menu) to the BloX widget:

var ChooseYourHighlightColor = '#00cee6';

widget.on('ready',function(widget, args){
  var filterToFind = widget.metadata.panels[0].items[0].jaql.dim;
  var dashboardFilters = widget.dashboard.filters.$$items;
  var textOfButtonToFormat = dashboardFilters.filter(i=>i.jaql.dim == filterToFind)[0].jaql.filter.members[0]; 
  $('button.btn:contains('+textOfButtonToFormat+')').css({
  transition : 'background-color 1s ease-in-out', "background-color": ChooseYourHighlightColor 
  });
})

2. Save the script

3. Refresh the widget

4. Save the widget

If you need this to work on a Jaql that contains "last" (Last year for example) you can use this script:

var ChooseYourHighlightColor = '#00cee6';

widget.on('ready',function(widget, args){
var dashboardFilters = widget.dashboard.filters.$$items[0].jaql.filter.last;  //change item index based on the filter
if (typeof dashboardFilters != "undefined") {
$('button.btn:contains('+'Years'+')').css({
transition : 'background-color 1s ease-in-out', "background-color": ChooseYourHighlightColor
});
}

})

If your buttons should affect the same Filter as 10 years / 5 years you can use the code below:

//choose the highlight Color
var ChooseYourHighlightColor = '#00cee6';

//Define filter value - in case you have more than 2 filters add additional var
var FirstFilter = '10';
var SecondFilter = '5';

widget.on('ready',function(widget, args){
var dashboardFilters = widget.dashboard.filters.$$items[1].jaql.filter.last.count;

//First Filter Check
if (dashboardFilters == FirstFilter) {
$('button.btn:contains('+dashboardFilters+')').css({
transition : 'background-color 1s ease-in-out', "background-color": ChooseYourHighlightColor
});
}
//Second Filter Check
else if (dashboardFilters == SecondFilter) {
$('button.btn:contains('+dashboardFilters+')').css({
transition : 'background-color 1s ease-in-out', "background-color": ChooseYourHighlightColor
});
}

//in case you have more than 2 filters add additional if (REMOVE /*)
/*
//Third Filter Check
else if (dashboardFilters == ThirdFilter) {
$('button.btn:contains('+dashboardFilters+')').css({
transition : 'background-color 1s ease-in-out', "background-color": ChooseYourHighlightColor
});
}
*/

})