Highlight Selected BloX Filter Button

Follow

Artem Yevtushenko

March 10, 2020 03:43

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

Cheers!

0

• Official comment

  

  Einav Shuker March 23, 2020 14:13 (Edited March 23, 2020 14:16)

  Hi Jim,

  The script I added was checking if the filter is including all values (meaning = not filtered) 

  if (typeof dashboardFilters != "undefined") 

   

  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
  });
  }
  */

  })

  Hope it helps!

  Regards,

  Comment actions Permalink
• 

  Benjamin Nissim March 10, 2020 09:27

  Nice!

  0

  Comment actions Permalink
• 

  Einav Shuker March 11, 2020 08:35 (Edited March 11, 2020 08:36)

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

  })

  1

  Comment actions Permalink
• 

  Jim Thomas March 17, 2020 20:24

  Einav,

  Your script is exactly what I need, but in my case it seems to set both buttons to the chosen background color.  I'm using Last 30 Days and Last 90 Days filter buttons.  So I changed $('button.btn:contains('+'Years'+')').css to $('button.btn:contains('+'Days'+')').css

  I also tried it on a Last Year and Last 2 Years BloX button widget.  Only the 2nd button (Last 2 Years) is ever highlighted.

  What am I doing wrong here?

  Regards, Jim

  0

  Comment actions Permalink
• 

  Jim Thomas March 23, 2020 16:55

  Einat,

  Interesting, but the challenge I am looking at is when the filter value contains Last such as Last Year or Last 2 Years or Last 90 Days for example.

  Regards, Jim

  0

  Comment actions Permalink
• 

  Tanvi Bansal March 30, 2020 08:07

  Hi

  I want to filter the dashboard using blox, so when i click on blox value it should filter all the dashboard.

  For that, What script should i use.

  0

  Comment actions Permalink

Please sign in to leave a comment.