Changing Dashboard filter selection background color

Follow

Ronen Avidor

November 07, 2016 23:02

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:

 

0

• 

  Sanjoy Ghosh November 14, 2017 06:16

  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

  1

  Comment actions Permalink
• 

  Malinda Jepsen August 23, 2017 20:59

  Is there any way to do this via a style sheet if our license allows branding?

  0

  Comment actions Permalink
• 

  Sanjoy Ghosh November 10, 2017 05:47

  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

   

   

   

  0

  Comment actions Permalink
• 

  Sam Ovenshine November 10, 2017 15:49

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

  })

  0

  Comment actions Permalink
• 

  Sanjoy Ghosh November 13, 2017 05:26

  Hi Sam,

  I have replaced the script with the one you posted above but still the deselected values are not showing in red, but both deselected and selected values are showing same colour. I am using Version: 6.5.2.10062,

  Regard

  Sanjoy

  0

  Comment actions Permalink
• 

  Sanjoy Ghosh November 13, 2017 08:39

  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

  0

  Comment actions Permalink
• 

  Alexandros Antoniou December 18, 2017 12:16

  Hi guys,

  Would you kindly provide a script that changes colour only if the filter is untouched and equal to "Include all"?
  
  This way, in a dashboard I have with many filters, the user will be able to see quickly what filters he has touched.
  
  Thanks,
  Alex

  0

  Comment actions Permalink

Please sign in to leave a comment.