Changing Dashboard filter selection background color
In this post we will explain how to change the background color of the selected Dashboard filter for each field.
Let's look at the below example, we would like to change the selection color to be dark green instead of the default "sky blue" color:
In order to this we will need to add a short Java Script to the Dashboard. This is done by selecting "edit script" option from the Dashboard menu as seen below:
Paste the following example code , and change the color code to desire value.
dashboard.on('refreshend', function(dashboard, ev){
$('.uc-tag').css('background-color','#419974');
})
The result would be:
-
Hi Sam,
I modified the script to include object which I wanted and modified it's CSS. Now when deselecting values by unchecking the check box, the values unchecked are shown in red.
dashboard.on('refreshstart', function(dashboard, ev){
$('.uc-tag').css('background-color',' #1f4736');
var tags = $('.uc-container .uc-tagline-content.exclude .uc-tag');
for(var i=0; i<tags.length; i++) {
tags[i].setAttribute('style', 'background-color: #fb7571 !important');
}})
Regards,
Sanjoy
-
Hi Ronen,
This is a cool and handy option. But the filter background should have two colour options one for selecting and the other for deselecting values, else the user will be confused to understand for which value the dashboards are showing information. Currently the script is generating the same background colour for both options (selecting & deselecting).
Best
Sanjoy
-
You can use this script to modify the unselect color from the default gray (here using red);
dashboard.on('refreshstart', function(dashboard, ev){
$('.uc-tag').css('background-color','#419974');
var tags = $('.uc-tag.isDumb');
for(var i=0; i<tags.length; i++) {
tags[i].setAttribute('style', 'background-color: #ff0000 !important');
}})
-
Hi Sam,
Your scripts is working fine for changing unselected grey color but can you please provide us the script to make the filter selection background color to red when we are deselecting values by unchecking the checkbox.
When we are deselecting values by unchecking the check box, the values unchecked are also shown in green now keeping the users unable to understand whether the dashboard is showing information for selected filter values or deselected one
Best
Sanjoy
Please sign in to leave a comment.
Comments
8 comments