Dashboards & Visualizations

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

Champion

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

Champion

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>

View solution in original post

Champion

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>

View solution in original post

SplunkTrust
SplunkTrust

@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!!!"

Champion

Cool idea! Thanks for coming back with that.

SplunkTrust
SplunkTrust

@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!!!"

Champion

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

0 Karma

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!

Splunk Employee
Splunk Employee

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

0 Karma

Champion

@frobinson_splunk Appreciate your effort. Any news?

0 Karma

Builder

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

0 Karma

New Member

is there any update on this bug fix?

0 Karma

SplunkTrust
SplunkTrust

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

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

SplunkTrust
SplunkTrust

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

Champion

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