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

[davilov]

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.

[danspav]

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.
   
   
   
2. Set your panel visualisations to hide when there is no data, under the "Visibility" setting:
   
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"
}