Dashboards & Visualizations

How to hide an HTML label from a dashboard when the token is not set?

feickertmd
Communicator

I have a few dynamic dashboards in which some panels take click values from others to populate. On each one I have put HTML labels with tokens syntax so that the value of the click displays in the next panel. Problem is, the literal token string appears until the value is clicked.

Before click it displays
Filtered by Level: $level$

After a click:
Filtered by Level: Critical

Is there any way to either hide the token syntax or just hide the entire HTML section until after the user clicks an option to populate the token?

1 Solution

skawasaki_splun
Splunk Employee
Splunk Employee

Not without JavaScript. The old in-page drilldown code from 6.0's Dashboard Examples app shows how to determine if a token is set or not and hide certain elements:

require(['jquery','underscore','splunkjs/mvc','util/console','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, console){
    // Get a reference to the dashboard panels
    var master_view = mvc.Components.get('master');
    var detail_view = mvc.Components.get('detail');

    var unsubmitted_tokens = mvc.Components.get('default');
    var submitted_tokens = mvc.Components.get('submitted');
    var url_tokens = mvc.Components.get('url');

    if(!submitted_tokens.has('sourcetype')) {
        // if there's no value for the $sourcetype$ token yet, hide the dashboard panel of the detail view
        detail_view.$el.parents('.dashboard-panel').hide();
    }

    submitted_tokens.on('change:sourcetype', function(){
        // When the token changes...
        if(!submitted_tokens.get('sourcetype')) {
            // ... hide the panel if the token is not defined
            detail_view.$el.parents('.dashboard-panel').hide();
        } else {
            // ... show the panel if the token has a value
            detail_view.$el.parents('.dashboard-panel').show();
        }
    });

    master_view.on('click', function(e) {
        e.preventDefault();
        var value = e.data['row.sourcetype'];

        // Submit the value for the sourcetype field
        unsubmitted_tokens.set('form.sourcetype', value);
        submitted_tokens.set(unsubmitted_tokens.toJSON());
        url_tokens.saveOnlyWithPrefix('form\\.', unsubmitted_tokens.toJSON(), {
            replaceState: false
        });

    });
});

View solution in original post

skawasaki_splun
Splunk Employee
Splunk Employee

Not without JavaScript. The old in-page drilldown code from 6.0's Dashboard Examples app shows how to determine if a token is set or not and hide certain elements:

require(['jquery','underscore','splunkjs/mvc','util/console','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, console){
    // Get a reference to the dashboard panels
    var master_view = mvc.Components.get('master');
    var detail_view = mvc.Components.get('detail');

    var unsubmitted_tokens = mvc.Components.get('default');
    var submitted_tokens = mvc.Components.get('submitted');
    var url_tokens = mvc.Components.get('url');

    if(!submitted_tokens.has('sourcetype')) {
        // if there's no value for the $sourcetype$ token yet, hide the dashboard panel of the detail view
        detail_view.$el.parents('.dashboard-panel').hide();
    }

    submitted_tokens.on('change:sourcetype', function(){
        // When the token changes...
        if(!submitted_tokens.get('sourcetype')) {
            // ... hide the panel if the token is not defined
            detail_view.$el.parents('.dashboard-panel').hide();
        } else {
            // ... show the panel if the token has a value
            detail_view.$el.parents('.dashboard-panel').show();
        }
    });

    master_view.on('click', function(e) {
        e.preventDefault();
        var value = e.data['row.sourcetype'];

        // Submit the value for the sourcetype field
        unsubmitted_tokens.set('form.sourcetype', value);
        submitted_tokens.set(unsubmitted_tokens.toJSON());
        url_tokens.saveOnlyWithPrefix('form\\.', unsubmitted_tokens.toJSON(), {
            replaceState: false
        });

    });
});

feickertmd
Communicator

Thanks for pointing me to the example. It appears that things are easier now in 6.1.x. Here's the code from the example:

<!-- depends is the way we tell the content to only show when the token has a value.
Hint: use comma separated values if the element requires more than one token. -->
<chart id="detail" depends="$sourcetype$">
<title>Detail: $sourcetype$</title>
<searchTemplate>index=_internal sourcetype=$sourcetype$ | timechart count</searchTemplate>
<earliestTime>-60m@m</earliestTime>
<latestTime>now</latestTime>
</chart>
</row>

Just need a depends attribute!

skawasaki_splun
Splunk Employee
Splunk Employee

It's also even easier in 6.2 since you can basically put depends on anything else (not just panels). I thought you wanted to remove the $level$ from the title, which is tricker.

feickertmd
Communicator

I originally did, but this worked even better.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...