All Apps and Add-ons

Status Indicator - Custom Visualization: How to create a drilldown so that, when selected, a hidden table will become visible?

jaracan
Communicator

Hi Team,

I am using the Status Indicator - Custom Visualization for my panel. I wanted to create a drilldown so that if I click on it, it will make the hidden table to be visible. Would you know how I can I make it work? Seems like its not working the way how the single value works. Looking forward to your help.
picture

0 Karma

muriloalves
Explorer

I did this using javascript , using a panel depends on token in the panel you want to show hide. JS file looks like this.
It sill set/unset that token when you click - so you can show/hide.

window.currentToken={};

require(['jquery', 'underscore', 'splunkjs/mvc', 'util/console'], function($, _, mvc, console) {
    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);
        }
    }

        function toggleToken(obj){
                for(var ti in obj){
                        if(currentToken[ti] && currentToken[ti]==obj[ti]){
                                setToken(ti, undefined);
                                currentToken[ti]=null;
                        }else{
                                setToken(ti, obj[ti]);
                                currentToken[ti]=obj[ti];
                        }
                }

        }


$('#te_services').click(function() {
        toggleToken({"te_services_details": true});
 });

$('#ie_services').click(function() {
        toggleToken({"ie_services_details": true});
 });

$('#er_services').click(function() {
        toggleToken({"er_services_details": true});
 });


});

In this example I have 3 panels which are depending on a token to be set true - this is the part you can reuse / add as many as you need

$('#te_services').click(function() {
toggleToken({"te_services_details": true});
});

$('#ie_services').click(function() {
toggleToken({"ie_services_details": true});
});

$('#er_services').click(function() {
toggleToken({"er_services_details": true});
});

0 Karma
Get Updates on the Splunk Community!

Join Us for Splunk University and Get Your Bootcamp Game On!

If you know, you know! Splunk University is the vibe this summer so register today for bootcamps galore ...

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

.conf24 is taking place at The Venetian in Las Vegas from June 11 - 14. Continue reading to learn about the ...

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...