All Apps and Add-ons

Sideview Switcher Module: hide a downstream module, but show its children

Path Finder

Hi,

I am trying to build a somewhat funny dashboard that has PullDowns and Checkboxes.

What I am trying to do is have one checkbox that feeds a switcher module. Downstream from that switcher module is one giant subtree of modules. I only want to hide the direct child module of switcher based on the checkbox upstream. But I always want to show the children of the direct child module.

Structure looks like this now:
TimeRangePicker
Checkbox
Switcher
Checkbox - this I want to hide based on above Checkbox
PullDown
Search built from all upstream moduls
Chart

The Checkbox that I want to hide is actually not a single Checkbox but a collection of some navigation elements, but the problem remains the same.

Or could I use another switcher downstream from the to-be-hidden checkbox and unhide the other child modules somehow?

SplunkTrust
SplunkTrust

You can't really do this with Switcher - Switcher can only pick one of it's N direct children as the "active" one. It then shows that module and all its downstream modules, and hides all the other children and their descendants.

Fortunately what you need here is very commonly implemented as a customBehavior and quite easy to implement.

You might have on your Checkbox module:

<param name="customBehavior">hide if foo is selected</param>

and then in application.js you would have this:

if (typeof(Sideview)!="undefined") {
    Sideview.utils.declareCustomBehavior("hide if foo is selected", function(checkboxModule) {
        var methodReference = checkboxModule.onContextChange.bind(checkboxModule);
        checkboxModule.onContextChange = function() {
            methodReference();
            var context = this.getContext();
            // long story, but each "mode" by which a module might be shown 
            // or hidden needs its own name.
            var visibilityToken = "hide me when the other checkbox is foo";
            if (context.get("otherCheckboxName")=="foo") {
                this.hide(visibilityToken);
            } else {
                this.show(visibilityToken);
            }
        }

    });
}

You'll have to edit it to change the "otherCheckboxName" to be the name param of the upstream checkbox, and obviously the magic value wont be "foo", but hopefully you can read the code enough to modify it for your purposes.

Beware that when you first create the file at appserver/static/application.js for a given app, that you have to restart splunkWeb for it to get picked up. And beware as you edit it thereafter that Splunk has very aggressive cacheing for static files so prepare to clear your cache a lot and get to know the "bump" endpoing. Scroll down in the Sideview FreshMaker to read about the bump endpoint. read the "Tools" page in Sideview Utils if you don't know what the heck the FreshMaker is. 😃

And one last note... usually in this situation merely showing or hiding the form element isn't all you have to do - you usually have to make sure it's checked or unchecked as appropriate so that it's $foo$ token doesn't wreak some kind of havoc downstream. Making this change at the same time might require reading through the Checkbox module's source code a little, or I could help you through that in subsequent comments here.

0 Karma