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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...