Custom JS to conditionally hide filters

[rdclapp]

We have a dashboard where certain filters need to be conditionally hidden/un-hidden. For example if a user selects a certain element in 1 filter, others show/hide accordingly. Any suggestions on how to accomplish this?

[rmazziero]

Hi @rdclapp,

When hiding the filter, you would still be selecting only 1 element of the dim I assume, right?

If that is the case, maybe another easier approach… you could do a combination of StrToSET and IIF, on the dimensions you would like to show/hide?
If the selection of the 1st filter is x, then force to be only 1 element, in the other conditions show the elements of the dim to be selected?
you can then disable the “subset editor” for this dim filter and you should have the same outcome I think.

in this quick example, If USA region, Only Local currency displays…

For others, show all currencies…

Mdx on Currency dim:

{StrToSET( 
    IIF( "$<<UX_Demo.Region.Region>>" = "13"
      , "{[Currency].[Currency].[Local]}" 
      , "{[Currency].[Currency].Members}" )
)}

Hope this helps!

Cheers

[rdclapp]

Thanks, this is what we have right now. It “works” but the element shown is the equivalent to a “Not applicable”. So we were trying to make it a bit more user friendly and not show users filters that don’t apply.

[rmazziero]

Hi @rdclapp ,

Ok, I guess then you have to go the JS route indeed…
there may be other or better ways of doing it, but here one method it should work, and you can then tweak it to add more filters, conditions, etc:

• Check the div ID of this global filter you’d like to hide dynamically using the inspect dev tools
  

• on the Custom folder, open the …\apq-c3-custom\js\jsfunctions-filterbar.service.js

• add a new function to check the relevant filter dimension and hide if that is the case, and use the div ID of the dimension to hide… Something like the code below, in this example I’m using the Region dim to drive if I hide or not the Currency div filter

  hideFilter() {

    let region = this.Settings.settings['UX_Demo.Region.Region'];
    let filter_currency = document.getElementById('global_filter_UX_Demo.Currency.Currency');

    // console.log('DEBUG Region', region);
    
    if( region == "13" || region == "6") {
        //console.log('DEBUG: HIDE!');
        filter_currency.style.display = "none";
    } 
    else {
        //console.log('DEBUG: Display..');
        filter_currency.style.display = "inline-block";
    }
  }

• on the Global filter for the relevant dimension you need the checking, on my example on the Region dimension, add the function on the JSFunction field at the bottom
  

This should get the whole Currency global filter dimension div to be hidden only for a few regions.
displaying:

hiding completely:

Hope this helps! happy coding

[ishapiro]

This is a good solution in dashboard to hide filters based on another filter value.

[monder]

Hi @rmazziero ,

With this way, can we also hide a toolbar button based on selection?

[rmazziero]

Hi @monder ,

Yes that should be possible. With the Buttons is just trickier, as they don’t have an ID for each… @ishapiro might have a more proper or better way of getting the button, but you could use the document.querySelector() to find the button data-cy attribute, which is normally the button display name, then change the display of the button to none. details below:

Inspect the button, in my demo i created a “Test Button”, see the data-cy attribute, note that this is normally the title name, if the name is changed on the pop-up, you would have to change the JS code as well…

then, on your JS function you use this name to get the button html code

let toolbar_button = document.querySelector('button[data-cy="Test Button"]');

with that you can then test and do the display to none conditionally same as before:

    if( region == "13" || region == "6") {
        // console.log('DEBUG: HIDE!');
        filter_currency.style.display = "none";
        toolbar_button.style.display = "none";
    } 
    else {
        // console.log('DEBUG: Display..');
        filter_currency.style.display = "inline-block";
        toolbar_button.style.display = "inline-block";
    }

the end result, screen:

if using a Region that should hide it: