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

[jaracan]

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.

[muriloalves]

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});
});