Dashboards & Visualizations

Conditionally show/hide panels based on dropdown selection in Dashboard Studio

davilov
Engager

Hello,

I'm new to Dashboard Studio. I'm looking for a way to show/hide certain visualizations based on user selection in a dropdown, e.g. based on token value. As I understand, this is pretty easy to achieve in the older (xml-based) version of Dashboards using the "depends" attribute. Is there an equivalent of this in Dashboard Studio? I wasn't able to find any good info on this.

Labels (1)
0 Karma

danspav
SplunkTrust
SplunkTrust

Hi @davilov,

Here's a way I've found to hide/show a panel based on a dropdown.

It depends on 3 steps:

  1. Define a dropdown with options for each panel you'd like to show/hide, in this example I've called the token "show_panel", and we choose to show/hide two panels or show them all.
    danspav_1-1715215957267.png

  2. Set your panel visualisations to hide when there is no data, under the "Visibility" setting:
    danspav_0-1715215787449.png

     

  3. Update the searches for your visualisations to compare a known string (i.e. the possible token values) to the current token value:

 

``` I only want to show this panel if we have 
    selected "Bar Chart" from the drop down:```
|  eval _show="Bar Chart"
|  search _show="$show_panel$"
|  fields - _show​

 

You can get a bit fancier by creating chain searches to compare the text so that the search doesn't rerun every time you change the dropdown.

 

Here's a sample dashboard:

 

{
    "visualizations": {
        "viz_QNQd730H": {
            "type": "splunk.table",
            "title": "Table of data",
            "dataSources": {
                "primary": "ds_BGrBVi8Q"
            },
            "hideWhenNoData": true
        },
        "viz_JM2qhOeK": {
            "type": "splunk.bar",
            "title": "Bar Chart",
            "dataSources": {
                "primary": "ds_KD6bNQc9"
            },
            "options": {
                "xAxisTitleText": "Time",
                "xAxisLineVisibility": "show",
                "yAxisTitleText": "Score",
                "yAxisLineVisibility": "show",
                "yAxisMajorTickVisibility": "show",
                "yAxisMinorTickVisibility": "show"
            },
            "hideWhenNoData": true
        }
    },
    "dataSources": {
        "ds_BGrBVi8Q": {
            "type": "ds.search",
            "options": {
                "query": "|  windbag\n| table source, sample, position\n|  eval _show=\"Table\"\n|  search _show=\"$show_panel$\"\n|  fields - _show"
            },
            "name": "table_search"
        },
        "ds_KD6bNQc9": {
            "type": "ds.search",
            "options": {
                "query": "|  gentimes start=-7\n|  eval score=random()%500\n|  eval _time = starttime\n|  timechart avg(score) as score\n|  eval _show=\"Bar Chart\"\n|  search _show=\"$show_panel$\"\n|  fields - _show"
            },
            "name": "barchart"
        }
    },
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {
                        "latest": "$global_time.latest$",
                        "earliest": "$global_time.earliest$"
                    }
                }
            }
        }
    },
    "inputs": {
        "input_global_trp": {
            "type": "input.timerange",
            "options": {
                "token": "global_time",
                "defaultValue": "-24h@h,now"
            },
            "title": "Global Time Range"
        },
        "input_hs0qamAf": {
            "options": {
                "items": [
                    {
                        "label": "All",
                        "value": "*"
                    },
                    {
                        "label": "Bar Chart",
                        "value": "Bar Chart"
                    },
                    {
                        "label": "Table",
                        "value": "Table"
                    }
                ],
                "defaultValue": "*",
                "token": "show_panel"
            },
            "title": "Choose you panel",
            "type": "input.dropdown"
        }
    },
    "layout": {
        "type": "grid",
        "options": {
            "width": 1440,
            "height": 960
        },
        "structure": [
            {
                "item": "viz_QNQd730H",
                "type": "block",
                "position": {
                    "x": 0,
                    "y": 0,
                    "w": 720,
                    "h": 400
                }
            },
            {
                "item": "viz_JM2qhOeK",
                "type": "block",
                "position": {
                    "x": 720,
                    "y": 0,
                    "w": 720,
                    "h": 400
                }
            }
        ],
        "globalInputs": [
            "input_global_trp",
            "input_hs0qamAf"
        ]
    },
    "description": "https://community.splunk.com/t5/Dashboards-Visualizations/Conditionally-show-hide-panels-based-on-dropdown-selection-in/m-p/686803#M56222",
    "title": "Splunk Answers Post"
}

 

 

Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...