Dashboards & Visualizations

Hide/Show panel on text box value?

sarvesh_11
Communicator

Hello Splunkers,

I have 2 panel and 1 Text Box filter in my splunk dashboard.

I want to hide and show the panels depending on text box values.

Example, if text box is empty, then panel A should only be visible.

if text box is having some value, then panel b should only be visible.

Default is textbox is empty, hence only Panel A should be visible.

Labels (4)
Tags (3)
0 Karma
1 Solution

Gr0und_Z3r0
Contributor

Try this 

<form>
  <label>TextBox to Show-Hide Panels</label>
  <fieldset submitButton="false">
    <input type="text" token="token_text" searchWhenChanged="true">
      <label>Toggle Text Box</label>
        <change>
        <condition value="">
          <set token="show_panel_a">A</set>
          <unset token="show_panel_b" />
        </condition>
        <condition>
          <set token="show_panel_b">B</set>
          <unset token="show_panel_a" />
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$show_panel_a$">
      <single>
        <title>Panel A</title>
        <search>
          <query>| makeresults
| eval count =10</query>
          <earliest>0.000</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel depends="$show_panel_b$">
      <single>
        <title>Panel B</title>
        <search>
          <query>| makeresults | eval count =101</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

 
Please upvote if it helps

View solution in original post

Gr0und_Z3r0
Contributor

Try this 

<form>
  <label>TextBox to Show-Hide Panels</label>
  <fieldset submitButton="false">
    <input type="text" token="token_text" searchWhenChanged="true">
      <label>Toggle Text Box</label>
        <change>
        <condition value="">
          <set token="show_panel_a">A</set>
          <unset token="show_panel_b" />
        </condition>
        <condition>
          <set token="show_panel_b">B</set>
          <unset token="show_panel_a" />
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$show_panel_a$">
      <single>
        <title>Panel A</title>
        <search>
          <query>| makeresults
| eval count =10</query>
          <earliest>0.000</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel depends="$show_panel_b$">
      <single>
        <title>Panel B</title>
        <search>
          <query>| makeresults | eval count =101</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

 
Please upvote if it helps

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sarvesh_11 

You should try something like this.

<form>
  <label>TextBox Panel</label>
  <fieldset submitButton="false">
    <input type="text" token="field1">
      <label>field1</label>
      <change>
        <condition value="">
          <set token="show_panel_a">Hey</set>
          <unset token="show_panel_b" />
        </condition>
        <condition>
          <set token="show_panel_b">Hey</set>
          <unset token="show_panel_a" />
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$show_panel_a$">
      <html>Panel A</html>
    </panel>
  </row>
  <row>
    <panel depends="$show_panel_b$">
      <html>Panel B</html>
    </panel>
  </row>
</form>

 

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

0 Karma

sarvesh_11
Communicator

Hey Kamlesh,

Thanks for your response.

My text box input is not defined, meaning the value can be anything.

Also when i run your code as it is, only panel B is showing irrespective of value m giving in textbox.

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...