topic Re: Can I hide/unhide specific text boxes using a single checkbox? in Dashboards & Visualizations

Can I hide/unhide specific text boxes using a single checkbox?

sunnyB — Tue, 21 Aug 2018 00:31:02 GMT

Hi,

I am trying to get a checkbox to hide/reveal specific text boxes.

for example say I have the following checkbox with three choices:
- c1
- c2
- c3

Furthermore, I have three text boxes t1, t2, and t3.

If c1 is ticked I want t1 to be revealed otherwise I want it to be hidden.
c2 and c3 will perform the same function on t2 and t3 respectively.

How would I go about monitoring the state of all the choices simultaneously in order to set/unset new tokens such that I can pass said tokens as depends attributes to reveal/hide the individual text boxes.

Thank you for your time.

Re: Can I hide/unhide specific text boxes using a single checkbox?

renjith_nair — Tue, 21 Aug 2018 02:24:44 GMT

@sunnyB,

You could use the depends on the input type.

E.g.

<form>
  <label>Check Boxes</label>
  <fieldset submitButton="false">
    <input type="checkbox" token="c1">
      <label>C1</label>
      <choice value="A">A</choice>
    </input>
    <input type="checkbox" token="c2">
      <label>C2</label>
      <choice value="B">B</choice>
    </input>
    <input type="checkbox" token="c3">
      <label>C3</label>
      <choice value="C">C</choice>
    </input>
    <input type="text" token="t1" depends="$c1$">
      <label>T1</label>
    </input>
    <input type="text" token="t2" depends="$c2$">
      <label>T2</label>
    </input>
    <input type="text" token="t3" depends="$c3$">
      <label>T3</label>
    </input>
  </fieldset>
</form>

Re: Can I hide/unhide specific text boxes using a single checkbox?

sunnyB — Tue, 21 Aug 2018 04:06:50 GMT

This logic works, however three separate check boxes are created with the example source you have provided.

Re: Can I hide/unhide specific text boxes using a single checkbox?

renjith_nair — Tue, 21 Aug 2018 05:03:12 GMT

ok I thought you need 3 checkboxes. But if you want only one, we could do it by event handler as well.

  <fieldset submitButton="false">
    <input type="checkbox" token="C">
      <label>C</label>
      <choice value="c1">C1</choice>
      <choice value="c2">C2</choice>
      <choice value="c3">C3</choice>
      <change>
        <condition match="C==&quot;c1&quot;">
          <set token="c1">1</set>
          <unset token="c2"></unset>
          <unset token="c3"></unset>
        </condition>
        <condition match="C==&quot;c2&quot;">
          <set token="c2">1</set>
          <unset token="c1"></unset>
          <unset token="c3"></unset>
        </condition>
        <condition match="C==&quot;c3&quot;">
          <set token="c3">1</set>
          <unset token="c2"></unset>
          <unset token="c1"></unset>
        </condition>        

      </change>
    </input>

Re: Can I hide/unhide specific text boxes using a single checkbox?

niketn — Tue, 21 Aug 2018 09:29:53 GMT

@sunnyB, Since you are having a Single Check Box with Multiple Values, you would run into issue with Check Box <change> Event Handler where only the first selected value is picked up by as token value. Similar limitation also exist for Multiselect and is documented. Refer to previous Splunk Answers Post for similar issue: https://answers.splunk.com/answers/506563/how-can-i-show-and-hide-panels-based-on-a-checkbox.html

Following are two workarounds for this issue:
Option 1) Use independent search to set the required tokens based on the values returned from Check Box input with multiple options. Refer to previous post for this approach: https://answers.splunk.com/answers/641411/hidedisplay-panels-using-multiselect.html

Option 2) Use JavaScript to set the tokens manually through code. Refer to old answer: https://answers.splunk.com/answers/314505/how-to-pass-selected-checkbox-values-to-drilldown.html

For your use case you can try the following run anywhere example:

PS: The condition where all choices in the Check Box are unchecked is handled within Check Box's <change> event handler as there will be no token set for the check box and hence independent search will not execute.

Following is the complete Simple XML code for run anywhere example for you to test:

<form>
  <label>Checkbox with mutiple Values</label>
  <fieldset submitButton="false"></fieldset>
  <!-- Independent Search to Set Multiple Tokens from Single Check Box-->
  <search>
    <query>| makeresults 
| fields - _time 
| eval checkBox=if(isnull($tokShowTextBox|s$),"",$tokShowTextBox|s$) 
| eval checkBox=replace(checkBox,"\s",",")
| eval tokShowT1=case(match(checkBox,"c1"),"true")
| eval tokShowT2=case(match(checkBox,"c2"),"true")
| eval tokShowT3=case(match(checkBox,"c3"),"true")</query>
    <earliest>-1s</earliest>
    <latest>now</latest>
    <done>
      <condition match="$job.resultCount$==0">
        <unset token="tokShowT1"></unset>
        <unset token="tokShowT2"></unset>
        <unset token="tokShowT3"></unset>
      </condition>
      <condition>
        <eval token="tokShowT1">case(isnotnull($result.tokShowT1$),"true")</eval>
        <eval token="tokShowT2">case(isnotnull($result.tokShowT2$),"true")</eval>
        <eval token="tokShowT3">case(isnotnull($result.tokShowT3$),"true")</eval>
      </condition>
    </done>
  </search>
  <row>
    <panel>
      <input type="checkbox" token="tokShowTextBox">
        <label>Select Textbox to Show</label>
        <choice value="c1">C1</choice>
        <choice value="c2">C2</choice>
        <choice value="c3">C3</choice>
        <delimiter> </delimiter>
        <change>
          <!-- Handle Unset all tokens when no Check Box is checked. As independent search will not run -->
          <condition match="isnull($tokShowTextBox$)">
            <unset token="tokShowT1"></unset>
            <unset token="tokShowT2"></unset>
            <unset token="tokShowT3"></unset>          
          </condition>
        </change>
      </input>
      <input type="text" token="t1" depends="$tokShowT1$">
        <label>T1</label>
      </input>
      <input type="text" token="t2" depends="$tokShowT2$">
        <label>T2</label>
      </input>
      <input type="text" token="t3" depends="$tokShowT3$">
        <label>T3</label>
      </input>
      <html>
        <div>tokShowTextBox: $tokShowTextBox$</div>
        <div>tokShowT1: $tokShowT1$</div>
        <div>tokShowT2: $tokShowT2$</div>
        <div>tokShowT3: $tokShowT3$</div>
      </html>
    </panel>
  </row>
</form>

Please try out and confirm!

Re: Can I hide/unhide specific text boxes using a single checkbox?

sunnyB — Wed, 22 Aug 2018 01:10:38 GMT

This works as I intended, thank you.

Re: Can I hide/unhide specific text boxes using a single checkbox?

jeffland — Tue, 02 Apr 2019 06:14:28 GMT

I've found a vanilla Simple XML workaround using the inputs token instead of $value$ , documented in the old thread here.

Re: Can I hide/unhide specific text boxes using a single checkbox?

scombs — Wed, 06 Nov 2019 15:27:44 GMT

It seems that the <input> element's <change> event fires when that object is first rendered, however it's <initialValue> is not set until after this occurs. I found this can be overcame by pre-setting the checkbox token within the form or dashboard's <init> block. The following Simple XML then uses "eval" and "match" to catch the change conditions and sets the display tokens to either "true" or null (<unset>).

<dashboard>
  <label>Checkbox with mutiple Values (3)</label>
  <init>
    <set token="C">c1,c2,c3</set>
  </init>
  <fieldset submitButton="false">
    <input type="checkbox" token="C">
      <label></label>
      <choice value="c1">C1</choice>
      <choice value="c2">C2</choice>
      <choice value="c3">C3</choice>
      <initialValue>c1,c2,c3</initialValue>
      <change>
        <condition>
          <eval token="c1">if(match($C$,"c1"),"true",null</eval>
          <eval token="c2">if(match($C$,"c2"),"true",null</eval>
          <eval token="c3">if(match($C$,"c3"),"true",null</eval>
        </condition>
      </change>
    </input>
    <input type="text" token="t1" depends="$c1$">
      <label>T1</label>
    </input>
    <input type="text" token="t2" depends="$c2$">
      <label>T2</label>
    </input>
    <input type="text" token="t3" depends="$c3$">
      <label>T3</label>
    </input>
  </fieldset>
  <row>
    <html>
      <div>C: $C$</div>
      <div>c1: $c1$</div>
      <div>c2: $c2$</div>
      <div>c3: $c3$</div>
    </html>
  </row>
</dashboard>

Re: Can I hide/unhide specific text boxes using a single checkbox?

kmugglet — Thu, 19 Dec 2019 03:19:16 GMT

Just as an additional option, I use this method to toggle inputs on and off
I put the inputs in separate panels to the fieldset

  <fieldset submitButton="true" autoRun="true">
    <input type="time" token="timeToken" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="checkbox" token="showFreeText">
      <label>Free Text Search</label>
      <choice value="1">Yes</choice>
      <change>
        <condition value="1">
          <unset token="showFilters"></unset>
        </condition>
        <condition match="isnull(showFreeText)">
          <unset token="showFreeText"></unset>
          <set token="showFilters">foo</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$showFilters$">
      <input type="dropdown" token="tokenFilter1" searchWhenChanged="true">
        <label>Choose field to filter on</label>
        <fieldForLabel>key</fieldForLabel>
        <fieldForValue>field</fieldForValue>

    blah blah 

       </panel>
       <panel depends="$showFreeText$">
        <input type="text" token="tokenFreeSearch" searchWhenChanged="true">
          <label>free text Search</label>

By using the match isnull(tokenName) it will be true if the check box is UNticked

Re: Can I hide/unhide specific text boxes using a single checkbox?

deepak_93 — Wed, 24 Jun 2020 20:38:01 GMT

@niketn

That was amazing work. I want to learn more how independent search works and steps in which this code is running. Would you please explain.

Re: Can I hide/unhide specific text boxes using a single checkbox?

weidertc — Fri, 30 Sep 2022 19:40:15 GMT

This appears to be the cleanest way, thanks.