All Apps and Add-ons

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

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

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!