how to show/hide multiple panels using multiple drop downs

[james_n]

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>

[manjunathmeti]

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>