Dashboards & Visualizations

How to load dashboard panels based on dropdown values which should be dependent on submit button?

admin12345678
Path Finder

Hi,

I have a dashboard where I have a dropdown with three values A, B and C, now if I click on value A it should set panel A, and If I choose value B it should load panel B and same for C also. now that code I have developed but in the dashboard added a submit button and disabled searchwhenchange but still prior to click on submit button panels load automatically after choosing values from the dropdown.

I need help on the submit button it should load panels only after clinking on the submit button.

please find the code below which I have developed.

 

 

<form>
  <label>My Dashboard</label>
  <fieldset submitButton="true">
    <input type="dropdown" token="dropdown_token" searchWhenChanged="false">
      <label>dropdown_token</label>
      <default>A</default>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <choice value="C">C</choice>
      <change>
        <condition match="'value'==&quot;A&quot;">
          <set token="panelA">true</set>
          <unset token="panelB">false</unset>
          <unset token="panelC">false</unset>
        </condition>
        <condition match="'value'==&quot;B&quot;">
          <unset token="panelA">true</unset>
          <set token="panelB">false</set>
          <unset token="panelC">false</unset>
        </condition>
        <condition match="'value'==&quot;C&quot;">
          <unset token="panelA">true</unset>
          <unset token="panelB">false</unset>
          <set token="panelC">false</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$panelA$">
      <table>
        <title>Panel A</title>
        <search>
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
    <panel depends="$panelB$">
      <table>
        <title>Panel B</title>
        <search>
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
    <panel depends="$panelC$">
      <table>
        <title>Panel C</title>
        <search>
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
  </row>
</form>

 

 

Labels (4)
0 Karma

Tom_Lundie
Contributor

In your example, the tokens referenced in the depends= attributes are changing regardless of the submit action. Without using any custom JS; the only way (that I know of) to trigger a token change upon submit, is to use a search.

Here is an example based on your original question that makes use of a | makeresults command which is executed upon submit.  

<form>
  <label>My Dashboard</label>
  <search>
    <query>| makeresults | eval panel="$panelToggle$" | fields panel</query>
    <done>
      <unset token="panelA"></unset>
      <unset token="panelB"></unset>
      <unset token="panelC"></unset>
    </done>
    <done>
      <condition match="$result.panel$==&quot;A&quot;">
        <set token="panelA"></set>
      </condition>
      <condition match="$result.panel$==&quot;B&quot;">
        <set token="panelB"></set>
      </condition>
      <condition match="$result.panel$==&quot;C&quot;">
        <set token="panelC"></set>
      </condition>
    </done>
  </search>
  <fieldset submitButton="true" autoRun="false">
    <input type="dropdown" token="panelToggle" searchWhenChanged="false">
      <label>dropdown_token</label>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <choice value="C">C</choice>
    </input>
  </fieldset>
  <search>
    <query>| makeresults | eval panel="$panelToggle$"</query>
    <progress>
      <unset token="panelA"></unset>
      <unset token="panelB"></unset>
      <unset token="panelC"></unset>
    </progress>
    <done>
      <condition match="$results.panel$==&quot;A&quot;">
        <set token="panelA"></set>
      </condition>
      <condition match="$results.panel$==&quot;B&quot;">
        <set token="panelB"></set>
      </condition>
      <condition match="$results.panel$==&quot;C&quot;">
        <set token="panelC"></set>
      </condition>
    </done>
  </search>
  <row>
    <panel depends="$panelA$">
      <table>
        <title>Panel A</title>
        <search depends="$panelA$">
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
    <panel depends="$panelB$">
      <table>
        <title>Panel B</title>
        <search depends="$panelB$">
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
    <panel depends="$panelC$">
      <table>
        <title>Panel C</title>
        <search depends="$panelC$">
          <query>index=a |table a b c</query>
        </search>
      </table>
    </panel>
  </row>
</form>

 (Note the use of depends= for the searches to, to stop the searches from running unnecessarily). 

 

0 Karma
Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...