Color change on filter button click

#1

I have a dashboard with several buttons that apply filters to the visualization. I would like to figure out how to indicate which filters are applied by changing the color of the button. Ideally the button would change colors when clicked (and also apply the filter as it does now) and stay that color until another button is clicked. I am not at all experienced with scripts, but not sure if this is possible with the UI.

Thanks!

#2

Hi Molly,

You can use the following script in the click action of your button component to change the restBackground colour of the button clicked as well as of other buttons to show it highlighted.

You must add this script on the click action of your buttons (and will have to change the script names of the buttons that you want to “unselect”):

var selectedColor = new dundas.controls.SolidColorBrush("DundasOrange");
var unselectedColor = new dundas.controls.SolidColorBrush("DarkGrey");
this.restBackground = selectedColor;
button2.restBackground = unselectedColor;//button2-Script Name of your second button component

You can also create a function in the ready action of your dashboard and then can add this code to that function and then call that function on click of your buttons. This would be helpful in the event when you might want to make changes to the script in the future. To create a function, you can simply use some like the following in your ready/loading action of your dashboard:

window.changeHighlight = function(buttonTohighlight, otherButtons){
  var selectedColor = new dundas.controls.SolidColorBrush("DundasOrange");
  var unselectedColor = new dundas.controls.SolidColorBrush("DarkGrey");
  buttonTohighlight.restBackground = selectedColor;
  otherButtons.restBackground = unselectedColor;//You can then loop through the otherButtons array which you just contain the script names of all other button and then change their restBackground
}

I hope this help.

3 Likes
#3

Thank you, that worked!

1 Like