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!

What the End of Support for Splunk Add-on Builder Means for You

Hello Splunk Community! We want to share an important update regarding the future of the Splunk Add-on Builder ...

Solve, Learn, Repeat: New Puzzle Channel Now Live

Welcome to the Splunk Puzzle PlaygroundIf you are anything like me, you love to solve problems, and what ...

Building Reliable Asset and Identity Frameworks in Splunk ES

 Accurate asset and identity resolution is the backbone of security operations. Without it, alerts are ...