Show panel based on choosen dropdown value

claudiaG · ‎07-19-2023

Hello all,

I have following use case:

We have a dropdown filter which reads out the values you can choose from a lookup.

Now we would like to implement a simple button that is "hidden" by default but should appear once the specific value "Alaska" is selected in the dropdown filter.

How can I implement this?

Somehow I cant make it work. I would appreciate every help. Thank you in advance!

meetmshah · ‎07-19-2023

Not sure based on dropdown menu, however, I found one of the Dashboards from "Splunk Dashboard Examples" named "Custom Token Links", with below source code. It shows/hides Chart and Table -

custom_token_links.xml

<dashboard version="1.1" script="tokenlinks.js">
    <label>Custom Token Links</label>
    <description>Set tokens from links or buttons in HTML panels.</description>
    <search id="base1">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <search id="base2">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <row>
        <panel>
            <title>Link Switcher Example</title>
            <html>
                <!-- Set the $show_chart$ token when the link is clicked, also unset the $show_table$ token -->
                <a href="#" class="btn-pill" data-set-token="show_chart" data-value="show" data-unset-token="show_table">
                    Show Chart
                </a>
                <!-- Set the $show_table$ token when the link is clicked, also unset the $show_chart$ token -->
                <a href="#" class="btn-pill" data-set-token="show_table" data-value="show" data-unset-token="show_chart">
                    Show Table
                </a>
                <!-- Unset both the $show_chart$ and $show_table$ token when the link is clicked -->
                <a href="#" class="btn-pill" data-token-json='{"show_table": null, "show_chart": null}'>Hide All</a>
            </html>
            <chart depends="$show_chart$">
                <search base="base1"/>
            </chart>
            <table depends="$show_table$">
                <search base="base1"/>
            </table>
            <html rejects="$show_chart$, $show_table$">
                <p>Click on one of the links above to select which visualization to show.</p>
            </html>
        </panel>
    </row>
    
    <row>
        <panel>
            <title>Button Switcher Example</title>
            <chart>
                <search base="base2"/>
            </chart>
            <html>
                <button class="btn" data-set-token="show_details" data-value="show">Show Details</button>
            </html>
        </panel>
        
        <!-- The panel is only shown once the user clicks on the button and the $show_details$ token is set -->
        <panel depends="$show_details$">
            <table>
                <title>Details</title>
                <search base="base2"/>
            </table>
            <html>
                <h2>Sample Description</h2>
                <p>This is some sample description that only shows up if you click on the "Show Details" button.</p>
                <button class="btn" data-unset-token="show_details">Hide Details</button>
            </html>
        </panel>
    </row>
</dashboard>

tokenlinks.js -

requirejs([
    '../app/simple_xml_examples/libs/jquery-3.6.0-umd-min',
    '../app/simple_xml_examples/libs/underscore-1.6.0-umd-min',
    'util/console',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, console, mvc) {
    function setToken(name, value) {
        console.log('Setting Token %o=%o', name, value);
        var defaultTokenModel = mvc.Components.get('default');
        if (defaultTokenModel) {
            defaultTokenModel.set(name, value);
        }
        var submittedTokenModel = mvc.Components.get('submitted');
        if (submittedTokenModel) {
            submittedTokenModel.set(name, value);
        }
    }
    $('.dashboard-body').on('click', '[data-set-token],[data-unset-token],[data-token-json]', function(e) {
        e.preventDefault();
        var target = $(e.currentTarget);
        var setTokenName = target.data('set-token');
        if (setTokenName) {
            setToken(setTokenName, target.data('value'));
        }
        var unsetTokenName = target.data('unset-token');
        if (unsetTokenName) {
            setToken(unsetTokenName, undefined);
        }
        var tokenJson = target.data('token-json');
        if (tokenJson) {
            try {
                if (_.isObject(tokenJson)) {
                    _(tokenJson).each(function(value, key) {
                        if (value === null) {
                            // Unset the token
                            setToken(key, undefined);
                        } else {
                            setToken(key, value);
                        }
                    });
                }
            } catch (e) {
                console.warn('Cannot parse token JSON: ', e);
            }
        }
    });
});

ITWhisperer · ‎07-19-2023

OK so the basic principle is using whether a token is set or unset to determine whether the panel (or row) should be displayed. You do this with the depends attribute (or rejects attribute to reverse the logic). The next thing is to set or unset the token your panel is depending on based on what is chosen from the dropdown. You do this in a change handler for the input widget, i.e. if the dropdown is changed to Alaska, you set the token, otherwise you unset the token.

ITWhisperer · ‎07-19-2023

What have you tried so far?

Show panel based on choosen dropdown value

dashboard

panel

What's New in Splunk Cloud Platform 9.3.2411?

Buttercup Games: Further Dashboarding Techniques (Part 6)

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!