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!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...