Dashboards & Visualizations

How to dynamically show/hide a dashboard panel based on drop-down selection?

Cheng2Ready
Path Finder
 
I have 3 panels for dropdown menu.


if A is selected 
panel 1 shows Search A
panel 2 shows Title and the link to URL
panel 3 shows Another Search of its own (if "drop down" is selected A)

if B is selected
Panel 1 shows Search B 
Panel 2 Disappear
Panel 3 Disappear

if C is selected
Panel 1 shows Search C
Panel 2 Disappear 
Panel 3 Disappear

if D is selected
Panel 1 shows Search D
Panel 2 Disappear 
Panel 3 Disappear


 

<input type="dropdown" token="tokenSearchOption1" searchWhenChanged="true">
<label>Sources</label>
<choice value="A">A</choice>
<choice value="B">B</choice>
<choice value="C">C</choice>
<choice value="D">D</choice>
<change>
<condition value="A">
<set token="tokenSearchQuery"> index= search query A</set>
</condition>
<condition value="B">
<set token="tokenSearchQuery">index= search query B</set>
</condition>
<condition value="C">
<set token="tokenSearchQuery">index=search query C</set>
</condition>
<condition value="D">
<set token="tokenSearchQuery">index= search query D</set>
</condition>
</change>
<initialValue>"A"</initialValue>
</input>
</panel>
</row>

<row>



<panel id="URL test">
<title>Title URL</title>
<html>
<!-- <style>
.dashboard-row Title .dashboard-panel h2.panel-title {
font-size: 40px !important;
text-align:left;
font-weight:bold;
}
</style>-->
<center> <style>.btn-primary { margin: 5px 10px 5px 0;font-size: 40px !important; }</style>
<a href="URL for a website" target="blank" class="btn btn-primary"> Click here </a>
</center>
</html>
</panel>
</row>



<row>
<panel depends=dropdown A>
<title>Magic</title>
<table>
<search>
<query>Index=Run this search when drop down A </query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="wrap">false</option>
</table>
</panel>
Labels (1)
0 Karma
1 Solution

renjith_nair
Legend

@Cheng2Ready ,

Please try this run anywhere example

<form version="1.1" theme="light">
  <label>DropDown</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="sources" searchWhenChanged="true">
      <label>Sources</label>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <choice value="C">C</choice>
      <choice value="D">D</choice>
      <default>A</default>
      <initialValue>A</initialValue>
      <change>
        <condition value="A">
          <set token="searchA">true</set>
          <unset token="searchB"></unset>
          <unset token="searchC"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="B">
          <set token="searchB">true</set>
          <unset token="searchA"></unset>
          <unset token="searchC"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="C">
          <set token="searchC">true</set>
          <unset token="searchA"></unset>
          <unset token="searchB"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="D">
          <set token="searchD">true</set>
          <unset token="searchA"></unset>
          <unset token="searchB"></unset>
          <unset token="searchC"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$searchA$">
      <title>Panel1</title>
      <table>
        <title>Search A</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH A REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchA$">
      <title>Panel2</title>
      <html>
        <a href="https://community.splunk.com/t5/Splunk-Answers/ct-p/en-us-splunk-answers">Splunk Answers</a>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$searchB$">
      <title>Panel3</title>
      <table>
        <title>Search B</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH B REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchC$">
      <title>Panel4</title>
      <table>
        <title>Search C</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH C REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchD$">
      <title>Panel5</title>
      <table>
        <title>Search D</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH D REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>
---
What goes around comes around. If it helps, hit it with Karma 🙂

View solution in original post

renjith_nair
Legend

@Cheng2Ready ,

Please try this run anywhere example

<form version="1.1" theme="light">
  <label>DropDown</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="sources" searchWhenChanged="true">
      <label>Sources</label>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
      <choice value="C">C</choice>
      <choice value="D">D</choice>
      <default>A</default>
      <initialValue>A</initialValue>
      <change>
        <condition value="A">
          <set token="searchA">true</set>
          <unset token="searchB"></unset>
          <unset token="searchC"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="B">
          <set token="searchB">true</set>
          <unset token="searchA"></unset>
          <unset token="searchC"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="C">
          <set token="searchC">true</set>
          <unset token="searchA"></unset>
          <unset token="searchB"></unset>
          <unset token="searchD"></unset>
        </condition>
        <condition value="D">
          <set token="searchD">true</set>
          <unset token="searchA"></unset>
          <unset token="searchB"></unset>
          <unset token="searchC"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$searchA$">
      <title>Panel1</title>
      <table>
        <title>Search A</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH A REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchA$">
      <title>Panel2</title>
      <html>
        <a href="https://community.splunk.com/t5/Splunk-Answers/ct-p/en-us-splunk-answers">Splunk Answers</a>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$searchB$">
      <title>Panel3</title>
      <table>
        <title>Search B</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH B REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchC$">
      <title>Panel4</title>
      <table>
        <title>Search C</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH C REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
  <row>
    <panel depends="$searchD$">
      <title>Panel5</title>
      <table>
        <title>Search D</title>
        <search>
          <query>| makeresults count=5| streamstats count|eval search="SEARCH D REsults - " + count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</form>
---
What goes around comes around. If it helps, hit it with Karma 🙂

Cheng2Ready
Path Finder

@renjith_nair Thank you so much It works!

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk Enterprise 9.4: Tools for Digital Resilience

PLATFORM TECH TALKS What’s New in Splunk Enterprise 9.4: Tools for Digital Resilience Thursday, February 27, ...

Leverage Cisco Talos Threat Intelligence Across Splunk Security Products

Leverage Cisco Talos Threat Intelligence Across Splunk Security Products Wednesday, February 26, ...

Splunk Enterprise Security 8.0.2 Availability: On cloud and On-premise!

A few months ago, we released Splunk Enterprise Security 8.0 for our cloud customers. Today, we are excited to ...