Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

Cheng2Ready
Communicator
‎02-23-2024 09:29 AM
 
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)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

renjith_nair
Legend
‎02-23-2024 10:02 PM

@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

Reply
Solved! Jump to solution
Solution

renjith_nair
Legend
‎02-23-2024 10:02 PM

@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 🙂
Reply
Solved! Jump to solution

Cheng2Ready
Communicator
‎02-26-2024 10:19 AM

@renjith_nair Thank you so much It works!

0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Take Action Automatically on Splunk Alerts with Red Hat Ansible Automation Platform

 Are you ready to revolutionize your IT operations? As digital transformation accelerates, the demand for ...

Calling All Security Pros: Ready to Race Through Boston?

Hey Splunkers, .conf25 is heading to Boston and we’re kicking things off with something bold, competitive, and ...

Beyond Detection: How Splunk and Cisco Integrated Security Platforms Transform ...

Financial services organizations face an impossible equation: maintain 99.9% uptime for mission-critical ...