Solved: Hide/Show panel on text box value?

sarvesh_11 · ‎11-23-2021

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.

Gr0und_Z3r0 · ‎11-25-2021

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 · ‎11-25-2021

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 · ‎11-23-2021

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

sarvesh_11 · ‎11-23-2021

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.

Hide/Show panel on text box value?

CSS

panel

simple XML

token

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes

Welcome to the Splunk Community!