Dashboards & Visualizations

how to show/hide multiple panels using multiple drop downs

james_n
Path Finder

Hi,

I have sample xml as shown below, I'm trying to show the panel based on the choice but it is not working. Please help on this.

required:

If I select first drop down panel will be displayed dynamically and than if i select any value in 2nd drop down, Corresponding panel will be displayed at the same time first panel has be hided. same like 3rd drop down, if select any value in 3rd drop down than 1st & 2nd panels will be hided and 3rd panel will be opened.

Could you please check with my sample xml and suggest me where it wrong. Thanks in advance.

<form>
  <label>Test</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="tkn_sourcetype" searchWhenChanged="true">
      <label>Select Sourcetype</label>
      <fieldForLabel>sourcetype</fieldForLabel>
      <fieldForValue>sourcetype</fieldForValue>
      <choice value="*">ALL</choice>
      <initialValue>*</initialValue>
      <change>
        <condition label="sourcetype">
          <set token="token_sourcetype"></set>
          <unset token="token_component"></unset>
          <unset token="token_group"></unset>
        </condition>
      </change>
      <search>
        <query>index=_internal sourcetype=* 
|  dedup sourcetype 
|  table sourcetype</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="tkn_component" searchWhenChanged="true">
      <label>Select Component</label>
      <fieldForLabel>component</fieldForLabel>
      <fieldForValue>component</fieldForValue>
      <choice value="*">All</choice>
      <initialValue>*</initialValue>
      <change>
        <condition label="component">
          <set token="token_component"></set>
          <unset token="token_sourcetype"></unset>
          <unset token="token_group"></unset>
        </condition>
      </change>
      <search>
        <query>index=_internal sourcetype="$tkn_sourcetype$" component=*
|  dedup component 
|  table component</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="tkn_group" searchWhenChanged="true">
      <label>select group</label>
      <fieldForLabel>group</fieldForLabel>
      <fieldForValue>group</fieldForValue>
      <choice value="*">All</choice>
      <change>
        <condition label="group">
          <set token="token_group"></set>
          <unset token="token_sourcetype"></unset>
          <unset token="token_component"></unset>
        </condition>
      </change>
      <search>
        <query>index=_internal sourcetype="$tkn_sourcetype$" component="$tkn_source$"
|  dedup group 
|  table group</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
    </input>
  </fieldset>
  <row depends="$token_sourcetype$">
    <panel>
      <chart>
        <title>test</title>
        <search>
          <query>index=_internal sourcetype="$tkn_sourcetype$" | stats count by sourcetype</query>
          <earliest>-7d@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
  <row depends="$token_component$">
    <panel>
      <chart>
        <title>test</title>
        <search>
          <query>index=_internal component="$tkn_component$" | stats count by component</query>
          <earliest>-7d@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
  <row depends="$token_group$">
    <panel>
      <chart>
        <title>test</title>
        <search>
          <query>index=_internal component="$tkn_group$" | stats count by component</query>
          <earliest>-7d@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</form>
0 Karma

manjunathmeti
Champion

hi @james_n,

Use default element instead of using initialValue to set default value. And condition element is not required for dropdown value change. Try this.

<form>
  <label>Test</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="tkn_sourcetype" searchWhenChanged="true">
      <label>Select Sourcetype</label>
      <fieldForLabel>sourcetype</fieldForLabel>
      <fieldForValue>sourcetype</fieldForValue>
      <choice value="*">ALL</choice>
      <default>*</default>
      <change>
        <set token="token_sourcetype"></set>
        <unset token="token_component"></unset>
        <unset token="token_group"></unset>
      </change>
      <search>
        <query>index=_internal sourcetype=* 
 |  dedup sourcetype 
 |  table sourcetype</query>
        <earliest>-20m</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="tkn_component" searchWhenChanged="true">
      <label>Select Component</label>
      <fieldForLabel>component</fieldForLabel>
      <fieldForValue>component</fieldForValue>
      <choice value="*">All</choice>
      <default>*</default>
      <change>
        <set token="token_component"></set>
        <unset token="token_sourcetype"></unset>
        <unset token="token_group"></unset>
      </change>
      <search>
        <query>index=_internal sourcetype="$tkn_sourcetype$" component=*
 |  dedup component 
 |  table component</query>
        <earliest>-30m</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="tkn_group" searchWhenChanged="true">
      <label>Select Group</label>
      <fieldForLabel>group</fieldForLabel>
      <fieldForValue>group</fieldForValue>
      <choice value="*">All</choice>
      <default>*</default>
      <change>
        <set token="token_group"></set>
        <unset token="token_sourcetype"></unset>
        <unset token="token_component"></unset>
      </change>
      <search>
        <query>index=_internal sourcetype="$tkn_sourcetype$" component="$tkn_component$"
 |  dedup group 
 |  table group</query>
        <earliest>-60m</earliest>
        <latest>now</latest>
      </search>
    </input>
  </fieldset>
  <row depends="$token_sourcetype$">
    <panel>
      <chart>
        <title>test sourcetype</title>
        <search>
          <query>index=_internal sourcetype="$tkn_sourcetype$" | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
  <row depends="$token_component$">
    <panel>
      <chart>
        <title>test component</title>
        <search>
          <query>index=_internal component="$tkn_component$" | stats count by component</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
  <row depends="$token_group$">
    <panel>
      <chart>
        <title>test group</title>
        <search>
          <query>index=_internal group="$tkn_group$" | stats count by group</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
      </chart>
    </panel>
  </row>
</form>
0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...