Highlight Selected BloX Filter Button

Comments

6 comments

  • Official comment
    Avatar
    Einav Shuker (Edited )

    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
  • Avatar
    Benjamin Nissim

    Nice!

    0
    Comment actions Permalink
  • Avatar
    Einav Shuker (Edited )

    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
  • Avatar
    Jim Thomas

    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
  • Avatar
    Jim Thomas

    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
  • Avatar
    Tanvi Bansal

    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.