Highlight Selected BloX Filter Button
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
});
}
*/
})Updated 03-02-2023
