Dashboards & Visualizations
Highlighted

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

Explorer

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.

Highlighted

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

SplunkTrust
SplunkTrust

@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>
Highlighted

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

Explorer

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

0 Karma
Highlighted

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

SplunkTrust
SplunkTrust

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>
0 Karma
Highlighted

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

Legend

@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:

alt text

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!




| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

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

Explorer

This works as I intended, thank you.

Highlighted

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

Champion

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

Highlighted

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

Engager

@niketnilay

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.

0 Karma
Highlighted

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

Engager

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>
0 Karma
Highlighted

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

Communicator

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

0 Karma