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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...