Solved: Re: 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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Event Series: Level up your SOC: Advancing with Splunk Enterprise Security

Announcing Modern Navigation: A New Era of Splunk User Experience

SOC4Kafka - New Kafka Connector Powered by OpenTelemetry

Join the Conversation