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

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

Cheng2Ready
Communicator
‎02-01-2024 01:49 PM

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

Cheng2Ready
Communicator
‎02-01-2024 03:05 PM

Hi @ITWhisperer  Sorry must have forgotten to ask the question lol

Is there a way to make the dashboard react to the scenario below?


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


This is what I have so far that doesn't seem to work as expected

<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>
0 Karma
Reply

ITWhisperer
SplunkTrust
SplunkTrust
‎02-01-2024 02:44 PM

Is there a question here?

0 Karma
Reply

Cheng2Ready
Communicator
‎02-04-2024 08:13 PM

Is there a way to make the dashboard react to the scenario below?


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


This is what I have so far that doesn't seem to work as expected

<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>

0 Karma
Reply
Get Updates on the Splunk Community!

Splunk Enterprise Security(ES) 7.3 is approaching the end of support. Get ready for ...

Hi friends!    At Splunk, your product success is our top priority. With Enterprise Security (ES), we're here ...

Splunk Enterprise Security 8.x: The Essential Upgrade for Threat Detection, ...

Watch On Demand the Tech Talk, and empower your SOC to reach new heights! Duration: 1 hour  Prepare to ...

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...