All Apps and Add-ons

ButtonSwitcher and JavaScript

paulathome
Path Finder

So I've added a new HTML module to the ButtonSwitcher in the default Search view (flashtimeline).
I put it first in the line up and it shows up in the first load of the page just fine.
I have also added a customBehavior so that OnContextChange it will hide the HTML module, which is a good start. But what I really want is to not hide the HTML but rather switch the "tabs" to the Event List when someone performs their first search.

Here are snippets of my code:

In the XML:

independent
True
splIcon-homepage
True

  <module name="HTML" layoutPanel="panel_row1_col1">
     <param name="customBehavior">switchTabsOnContextChange</param>
     <param name="html"><![CDATA[ <p>My Announcement here</p> ]]></param>
  </module>

In the application.js file:
if (typeof(Sideview)!="undefined") {
Sideview.utils.declareCustomBehavior("switchTabsOnContextChange", function(myTabSwitcher) {
// now override the onContextChange method
myTabSwitcher.onContextChange = function() {
this.hide("customBehavior hides the module initially");
alert("We are here");
}
});
}

What code do I need in my JavaScript to make the ButtonSwitcher go from the first tab to the second?

Thank you,
Paul

paulathome
Path Finder

Thanks Nick for the response, I had already started down the road of wrapping the ButtonSwitcher:

In the flashtimeline.xml I added a customBehavior module before the ButtonSwitcher and my custom ResultsHeader before the other three result tabs (Event list, Table and Chart).


switchTabsOnContextChange

if (typeof(Sideview)!="undefined") {
Sideview.utils.declareCustomBehavior("switchTabsOnContextChange", function(myTabSwitcher) {
var methodReference = myTabSwitcher.onContextChange.bind(myTabSwitcher);
myTabSwitcher.onContextChange = function() {
var buttonswitcher = this._children[0];
var activechildindex = buttonswitcher._activeChildIndex;
if (activechildindex == 0) {
buttonswitcher.setActiveChild(1);
}
return(methodReference);
}
});
}

And all of this appears to be working fine except that the checkCompatibilities code is acting up, so an events list search will often pick my home page tab.

My first query is 'system' and I will see my results in the event list as my custom code switched it to the second tab.

My second query is 'system | timechart c by host' and I click it to the chart tab.
Now if I run just 'system' again, it flips to my home page tab instead of the event list tab. Almost like the setActiveChild is going to 0 instead of using the tab title of Event List.
Would marking my tab as Incompatible be a good approach?

I must be missing something simple.

Or should I start over using a Switcher module?

So you are saying to insert a Switcher after my customBehavior and before the ButtonSwitcher and have a custom behavior use getModifiedContext()?

I'll look at the examples and try this way as well, I've got nothing but knowledge to gain.

Thanks again,
Paul

0 Karma

sideview
SplunkTrust
SplunkTrust

You're right in that ButtonSwitcher doesn't have a customBehavior param - only Sideview modules have that param, because the whole mechanism is part of Sideview Utils.

You could in theory patch ButtonSwitcher in application.js. It would look something like this:

if (Splunk.util.getCurrentView() == "my_view") {

    ....

    if (Splunk.Module.ButtonSwitcher) {
        Splunk.Module.ButtonSwitcher = $.klass(Splunk.Module.ButtonSwitcher, {
            onContextChange: function($super) {
                if (this._children.length>1) {
                    this.setActiveChild(1);
                }
                return $super();
            }
        });
    }

    ...

}

But this kind of patch is a bit tricky and probably there are some nuances that would lead you from ButtonSwitcher to it's superclass TabSwitcher and its superclass Switcher, and it's a wild ride.

What I recommend if you're using Sideview Utils already, is just use a Sideview Utils Switcher module to do the switching part, and then have a simple CustomBehavior module upstream from the switcher that returns the relevant context key from getModifiedContext() only on the very first push. If you need some examples of customBehaviors that implement getModifiedContext, there should be a few in Sideview Utils itself.

0 Karma

paulathome
Path Finder

After a lot of additional reading I've realized a few things.
A ButtonSwitcher can not have a custom behavior.
I don't really want to hide the first tab, I just want to switch tabs to the second one when a search is started.
A tab module under the ButtonSwitcher can capture an onContextChange event, but I can't figure out how to call the ButtonSwitcher's setActiveChild method to switch from the first tab to the second tab.

Does this mean that I need to wrap the ButtonSwitcher module with something that can have a custom behavior or find a way to call the parent's setActiveChild method?
Paul

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

We are excited to announce that the upcoming releases of Splunk Enterprise 10.2.x and Splunk Cloud Platform ...

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

After a whole week of being on call, you fell asleep on your keyboard, and you hit a sequence of buttons that ...