Dashboards & Visualizations

How can I show and hide panels based on a checkbox?

jeffland
SplunkTrust
SplunkTrust

I'm trying to use a checkbox to show and hide panels. I'm using the depends attribute of a panel for visibility, setting and unsetting the tokens for those in the change events of the checkbox. Unfortunately, it doesn't seem to work the way I would expect it to. See the following dashboard:

<form>
  <label>_temp checkbox change events</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="unused">
      <label>Checkbox</label>
      <choice value="show_a">Show a</choice>
      <choice value="show_b">Show b</choice>
      <default>show_b,show_a</default>
      <change>
        <condition value="show_a">
          <set token="show_a">1</set>
          <unset token="show_b"></unset>
          <set token="conditionChecker">show a condition</set>
        </condition>
        <condition value="show_b">
          <unset token="show_a"></unset>
          <set token="show_b">1</set>
          <set token="conditionChecker">show b condition</set>
        </condition>
        <condition value="*">
          <set token="show_a">1</set>
          <set token="show_b">1</set>
          <set token="conditionChecker">* condition</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <p>unused: $unused$</p>
        <p>show_a: $show_a$</p>
        <p>show_b: $show_b$</p>
        <p>conditionChecker: $conditionChecker$</p>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$show_a$">
      <table>
        <title>a</title>
        <search>
          <query>| makeresults</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
      </table>
    </panel>
    <panel depends="$show_b$">
      <table>
        <title>b</title>
        <search>
          <query>| makeresults</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
      </table>
    </panel>
  </row>
</form>

As you can see, the value of unused is "show_a" or "show_b" if only one box is checked, and this should be the value passed to the condition. The condition only seems to trigger on value="*" however. I've read the documentation and nowhere does it say that you can't use change and condition with checkbox inputs, I've also gotten feedback from the docs team that the code should work (which obviously it doesn't).
This has also come up before, and I remember someone suggesting using multiple checkbox inputs. I've also done it before with radio inputs, where the conditions work as expected (with two checkboxes, that would require three radio inputs for the three possible combinations; it gets worse with more options). I don't want to resort to those methods, can anyone help me with a proper solution?

1 Solution

spammenot66
Contributor

@jeffland , the solution you've provided requires entering ever possible pattern match. For example if you start to click on it in reverse, it may not work. 

when you get a chance take a look at the solution below. you won't have to provide all possible with exact order, this one is a bit simpler 

<form>
  <label>_temp checkbox panel</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="check" searchWhenChanged="true">
      <label>$check$</label>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
      <change>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <set token="show_3">1</set>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_3">1</set>
          <unset token="show_2"></unset>
        </condition>
        <condition match="match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_2">1</set>
          <set token="show_3">1</set>
          <unset token="show_1"></unset>
        </condition>
        <condition match="$check$ = &quot;a b&quot;">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;b&quot;">
          <unset token="show_1"></unset>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;c&quot;">
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <set token="show_3">1</set>
        </condition>
        <condition>
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <unset token="show_3"></unset>
        </condition>
      </change>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Check: $check$      --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
    </panel>
    <panel depends="$show_1$">
      <title>Show 1</title>
    </panel>
    <panel depends="$show_2$">
      <title>Show 2</title>
    </panel>
    <panel depends="$show_3$">
      <title>Show 3</title>
    </panel>
  </row>
</form>

View solution in original post

0 Karma

spammenot66
Contributor

@jeffland , the solution you've provided requires entering ever possible pattern match. For example if you start to click on it in reverse, it may not work. 

when you get a chance take a look at the solution below. you won't have to provide all possible with exact order, this one is a bit simpler 

<form>
  <label>_temp checkbox panel</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="check" searchWhenChanged="true">
      <label>$check$</label>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
      <change>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <set token="show_3">1</set>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_3">1</set>
          <unset token="show_2"></unset>
        </condition>
        <condition match="match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_2">1</set>
          <set token="show_3">1</set>
          <unset token="show_1"></unset>
        </condition>
        <condition match="$check$ = &quot;a b&quot;">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;b&quot;">
          <unset token="show_1"></unset>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;c&quot;">
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <set token="show_3">1</set>
        </condition>
        <condition>
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <unset token="show_3"></unset>
        </condition>
      </change>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Check: $check$      --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
    </panel>
    <panel depends="$show_1$">
      <title>Show 1</title>
    </panel>
    <panel depends="$show_2$">
      <title>Show 2</title>
    </panel>
    <panel depends="$show_3$">
      <title>Show 3</title>
    </panel>
  </row>
</form>
0 Karma

jeffland
SplunkTrust
SplunkTrust

Of course, this is much nicer. It's still only a workaround, but still an obviously much better one - thanks!

spammenot66
Contributor

@jeffland  You’re right. BTW thanks for accepting this answer. Greatly appreciated 

0 Karma

jeffland
SplunkTrust
SplunkTrust

The simple workaround is to use the inputs token instead of $value$ during the change event:

<form>
  <label>_temp checkbox panel</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="check">
      <label>checkbox</label>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
      <change>
        <condition match="$check$ = &quot;a&quot;">
          <set token="show_1">1</set>
          <unset token="show_2"></unset>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;a b&quot;">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;a c&quot;">
          <set token="show_1">1</set>
          <unset token="show_2"></unset>
          <set token="show_3">1</set>
        </condition>
        <condition match="$check$ = &quot;a b c&quot;">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <set token="show_3">1</set>
        </condition>
        <condition match="$check$ = &quot;b&quot;">
          <unset token="show_1"></unset>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;b c&quot;">
          <unset token="show_1"></unset>
          <set token="show_2">1</set>
          <set token="show_3">1</set>
        </condition>
        <condition match="$check$ = &quot;c&quot;">
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <set token="show_3">1</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$show_1$">
      <table>
        <title>table 1</title>
        <search>
          <query>|  makeresults</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$show_2$">
      <table>
        <title>table 2</title>
        <search>
          <query>|  makeresults</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
    <panel depends="$show_3$">
      <table>
        <title>table 3</title>
        <search>
          <query>|  makeresults</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

niketn
Legend

@jeffland @frobinson_splunk I have documented a workaround to use an independent search to set tokens based on option/s selected in the checkbox. https://answers.splunk.com/answers/681330/can-i-hideunhide-specific-text-boxes-using-a-singl.html?ch...

Until there is a fix to the issue, the workaround can be used. It also has a reference to another Answer by @krdo to use Simple XML JS Extension to overcome the issue of Change Event Handler for checkbox with multiple options.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jeffland
SplunkTrust
SplunkTrust

Cool idea! Thanks for coming back with that.

niketn
Legend

@jeffland, for the row containing the two panels a and b, you can add depends to be associated with the check box input so that it gets hidden when both options are unselected:

 <row depends="$unused$">
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jeffland
SplunkTrust
SplunkTrust

That doesn't change the problem with the change and condition statements though.

0 Karma

frobinson_splun
Splunk Employee
Splunk Employee

Hello,
I've filed a bug to get our engineering team to investigate this issue further. I'll post an update when I have more information.

Hope this helps!

frobinson_splun
Splunk Employee
Splunk Employee

Definitely a bug--a fix is underway, so please stay tuned!

0 Karma

jeffland
SplunkTrust
SplunkTrust

@frobinson_splunk Appreciate your effort. Any news?

0 Karma

aferone
Builder

I am running into this exact issue as well. Any updates?

0 Karma

nkleck
New Member

is there any update on this bug fix?

0 Karma

niketn
Legend

Here is the option with single check box... Like @rjthibod mentioned, change event handler is not available for Checkbox or Multiselect control since both handle multi-values, even though the Splunk documentation mentions that change event is available for checkbox (http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference).

I have submitted a feedback for the broken functionality for Checkbox change event as listed out in the following Splunk Documentation. I am not sure of how to create an Enhancement request, until then you can try the following option to run a dummy search to set the token you need (it will be more expensive than previous approach I mentioned in comments).

  <fieldset submitButton="false">
    <input type="checkbox" token="showPanel">
      <label>Show/Hide Panels</label>
      <choice value="Panel1">Panel1</choice>
      <choice value="Panel2">Panel2</choice>
      <default>Panel1,Panel2</default>
      <initialValue>Panel1,Panel2</initialValue>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <search id="myDummySearch">
    <query>| makeresults
| eval checkBoxSelection="$showPanel$"
| eval Panel1=case(like(checkBoxSelection, "%Panel1%"),"true")
| eval Panel2=case(like(checkBoxSelection, "%Panel2%"),"true")
| eval flag=case(Panel1=="true" AND Panel2=="true",1,Panel1=="true",2,Panel2="true",3,1==1,4)
| table Panel1 Panel2 flag </query>
    <earliest>-1m</earliest>
    <latest>now</latest>
    <preview>
      <condition match="$result.flag$==&quot;1&quot;">
        <set token="showPanel1">true</set>
        <set token="showPanel2">true</set>
      </condition>
      <condition match="$result.flag$==&quot;2&quot;">
        <set token="showPanel1">true</set>
        <unset token="showPanel2"></unset>
      </condition>
      <condition match="$result.flag$==&quot;3&quot;">
        <set token="showPanel2">true</set>
        <unset token="showPanel1"></unset>
      </condition>
      <condition>
        <unset token="showPanel1"></unset>
        <unset token="showPanel2"></unset>
      </condition>      
    </preview>
  </search>

However, you need to define two depends tokens both for checkbox and also one set through above search. Token from checkbox will handle the scenario to hide both panels where both check boxes are unchecked.

For example

<table depends="$showPanel1$,$showPanel$">
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

rjthibod
Champion

Yea, there is definitely something not working as we all expect in 6.5.2 regarding this item.

Even you just tell Splunk to set a token to the current $value$ in the condition block, Splunk sets the token to the first value in the array $form.unused$ no matter what you check/uncheck after that. For example, I am talking about just doing the following with no other conditions and watching the value stored in $show_c$.

   <change>
     <condition value="*">
       <set token="show_c">$value$</set>
     </condition>         
   </change>

At this point, it looks like you would have to parse the token in some other place (e.g., another form/search) or write some JS.

0 Karma

niketn
Legend

You can create two independent Check Boxes one for each Panel/visualization. Then you do not need to code change event handler as the checkbox token is unset when checkbox is unchecked.

    <input type="checkbox" token="showPanel1">
      <label>Show/Hide Panels</label>
      <choice value="Panel1">Panel1</choice>
      <default>Panel1</default>
      <initialValue>Panel1</initialValue>
      <delimiter> </delimiter>
    </input>
    <input type="checkbox" token="showPanel2">
      <label></label>
      <choice value="Panel2">Panel2</choice>
      <default>ShowPanel2,Panel2</default>
      <initialValue>ShowPanel2,Panel2</initialValue>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>

Then you can associate each of the panel with corresponding token through depends

    <panel id="panel1" depends="$showPanel1$">

    ...

    <panel id="panel2" depends="$showPanel2$">
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jeffland
SplunkTrust
SplunkTrust

This is specifically what I didn't ask for. I've come across that solution, I don't want it. There has to be a better way.

0 Karma

spammenot66
Contributor

here's a minor change to your solution that makes it simpler 

<form>
  <label>_temp checkbox panel</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="check" searchWhenChanged="true">
      <label>$check$</label>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
      <change>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <set token="show_3">1</set>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;b&quot;)">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="match($check$,&quot;a&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_1">1</set>
          <set token="show_3">1</set>
          <unset token="show_2"></unset>
        </condition>
        <condition match="match($check$,&quot;b&quot;) AND match($check$,&quot;c&quot;)">
          <set token="show_2">1</set>
          <set token="show_3">1</set>
          <unset token="show_1"></unset>
        </condition>
        <condition match="$check$ = &quot;a b&quot;">
          <set token="show_1">1</set>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;b&quot;">
          <unset token="show_1"></unset>
          <set token="show_2">1</set>
          <unset token="show_3"></unset>
        </condition>
        <condition match="$check$ = &quot;c&quot;">
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <set token="show_3">1</set>
        </condition>
        <condition>
          <unset token="show_1"></unset>
          <unset token="show_2"></unset>
          <unset token="show_3"></unset>
        </condition>
      </change>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Check: $check$      --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
    </panel>
    <panel depends="$show_1$">
      <title>Show 1</title>
    </panel>
    <panel depends="$show_2$">
      <title>Show 2</title>
    </panel>
    <panel depends="$show_3$">
      <title>Show 3</title>
    </panel>
  </row>
</form>
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...