Dashboards & Visualizations

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

sunnyB
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.

1 Solution

niketnilay
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!

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

View solution in original post

kmugglet
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

scombs
Explorer

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

niketnilay
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!

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

View solution in original post

deepak_93
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

jeffland
Champion

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

sunnyB
Explorer

This works as I intended, thank you.

renjith_nair
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>

sunnyB
Explorer

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

0 Karma

renjith_nair
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
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!