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

[feickertmd]

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?

[skawasaki_splun · Accepted solution]

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]

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]

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]

I originally did, but this worked even better.