topic Re: How can I show and hide panels based on a checkbox? in Dashboards & Visualizations

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

jeffland — Tue, 29 Sep 2020 13:02:58 GMT

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?

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

niketn — Wed, 01 Mar 2017 09:14:37 GMT

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$">

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

jeffland — Wed, 01 Mar 2017 13:28:00 GMT

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.

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

rjthibod — Wed, 01 Mar 2017 13:56:11 GMT

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.

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

niketn — Wed, 01 Mar 2017 15:55:00 GMT

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$">

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

frobinson_splun — Wed, 01 Mar 2017 19:19:46 GMT

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!

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

frobinson_splun — Fri, 03 Mar 2017 19:40:43 GMT

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

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

nkleck — Fri, 14 Jul 2017 23:00:48 GMT

is there any update on this bug fix?

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

niketn — Sun, 27 Aug 2017 12:42:10 GMT

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

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

jeffland — Mon, 28 Aug 2017 07:08:05 GMT

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

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

jeffland — Mon, 28 Aug 2017 07:09:13 GMT

@frobinson_splunk Appreciate your effort. Any news?

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

aferone — Thu, 14 Dec 2017 20:30:29 GMT

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

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

niketn — Tue, 21 Aug 2018 09:32:37 GMT

@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?childToView=682360#answer-682360

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.

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

jeffland — Tue, 21 Aug 2018 10:41:40 GMT

Cool idea! Thanks for coming back with that.

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

jeffland — Tue, 02 Apr 2019 06:11:23 GMT

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>

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

spammenot66 — Sun, 28 Mar 2021 03:20:17 GMT

@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$,"a") AND match($check$,"b") AND match($check$,"c")"> <set token="show_1">1</set> <set token="show_2">1</set> <set token="show_3">1</set> </condition> <condition match="match($check$,"a") AND match($check$,"b")"> <set token="show_1">1</set> <set token="show_2">1</set> <unset token="show_3"></unset> </condition> <condition match="match($check$,"a") AND match($check$,"c")"> <set token="show_1">1</set> <set token="show_3">1</set> <unset token="show_2"></unset> </condition> <condition match="match($check$,"b") AND match($check$,"c")"> <set token="show_2">1</set> <set token="show_3">1</set> <unset token="show_1"></unset> </condition> <condition match="$check$ = "a b""> <set token="show_1">1</set> <set token="show_2">1</set> <unset token="show_3"></unset> </condition> <condition match="$check$ = "b""> <unset token="show_1"></unset> <set token="show_2">1</set> <unset token="show_3"></unset> </condition> <condition match="$check$ = "c""> <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>

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

spammenot66 — Sun, 28 Mar 2021 03:23:59 GMT

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

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

jeffland — Mon, 29 Mar 2021 06:11:37 GMT

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

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

spammenot66 — Mon, 29 Mar 2021 16:04:25 GMT

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