All Apps and Add-ons

Sideview Utils (free internal use license): How to configure a dynamic drilldown upon clicking on a table row?

alpna84
Explorer

I have requirement to show drilldown on click of table row. Drilldown table shall display on right side of main table and shall only be displayed when row on left table is clicked. I am able to do that except the right hand side table panel always appears.
I have done similar thing in Splunk using panel "depends" attribute and setting token. Is there a way to do same thing in Sideview Utils?

1 Solution

sideview
SplunkTrust
SplunkTrust

There are a couple ways. They're admittedly both clunky and more manual than I'd like.

let's say that it's the row1_col2 panel we're talking about.

1) a) use application.css or some custom css, to make the drilldown panel visibility:hidden; when the page loads.

ie:

.panel_row1_col div.layoutCell:nth-of-type(2) {
    visibility:hidden;
}

b) Then use a ShowHide module placed also just under the table the user is clicking on, and give it
<param name="show">.panel_row1_col div.layoutCell:nth-of-type(2)</param>

The net effect will be that the empty panel will be invisible until the user clicks that first table.

The complex CSS selector is because unfortunately in the advanced xml template the panel doesn't have a nice simple "panel_row1_col2"classname. =/

2) As an alternative, and perhaps preferable if you're comfortable writing customBehavior JS code in Sideview XML, you can write a custom behavior to do what you need in jquery itself. like for instance the call to show the panel would be

$(".panel_row1_col div.layoutCell:nth-of-type(2)").show()

If you've never heard of the CustomBehavior mechanism in Sideview XML, go in the SVU nav menu to "Tools > Other Tools" and then scroll down to the last panel. You'll find a link to a page of docs and examples about custom behaviors and how to make one.

Generally you might put a CustomBehavior module just tucked under the first table, and give it an onContextChange method. Then you can make your jquery calls to show, hide, possibly even change widths of panels as you like.

In the future, when Canary releases I'm hoping to solve this problem at a lower level such that it wont even be a problem in the first place. Because Canary has to not depend on any Splunk ui libraries or templating or anything, it's an opportunity to make all the things like templating make sense (!). So I'm going to try and make it so that panels with no modules in them simply don't leave a little remnant like they do in Sideview xml.

View solution in original post

sideview
SplunkTrust
SplunkTrust

There are a couple ways. They're admittedly both clunky and more manual than I'd like.

let's say that it's the row1_col2 panel we're talking about.

1) a) use application.css or some custom css, to make the drilldown panel visibility:hidden; when the page loads.

ie:

.panel_row1_col div.layoutCell:nth-of-type(2) {
    visibility:hidden;
}

b) Then use a ShowHide module placed also just under the table the user is clicking on, and give it
<param name="show">.panel_row1_col div.layoutCell:nth-of-type(2)</param>

The net effect will be that the empty panel will be invisible until the user clicks that first table.

The complex CSS selector is because unfortunately in the advanced xml template the panel doesn't have a nice simple "panel_row1_col2"classname. =/

2) As an alternative, and perhaps preferable if you're comfortable writing customBehavior JS code in Sideview XML, you can write a custom behavior to do what you need in jquery itself. like for instance the call to show the panel would be

$(".panel_row1_col div.layoutCell:nth-of-type(2)").show()

If you've never heard of the CustomBehavior mechanism in Sideview XML, go in the SVU nav menu to "Tools > Other Tools" and then scroll down to the last panel. You'll find a link to a page of docs and examples about custom behaviors and how to make one.

Generally you might put a CustomBehavior module just tucked under the first table, and give it an onContextChange method. Then you can make your jquery calls to show, hide, possibly even change widths of panels as you like.

In the future, when Canary releases I'm hoping to solve this problem at a lower level such that it wont even be a problem in the first place. Because Canary has to not depend on any Splunk ui libraries or templating or anything, it's an opportunity to make all the things like templating make sense (!). So I'm going to try and make it so that panels with no modules in them simply don't leave a little remnant like they do in Sideview xml.

alpna84
Explorer

Thanks for prompt response. It worked using custom behavior. Can we create js file with different name instead of modifying application.js. If yes , how to import custom js file.

0 Karma

sideview
SplunkTrust
SplunkTrust

You can, yes - see the customJavascript param on the SideviewUtils module itself.

eg: <param name="customJavascript">appname/foo.js</param> will load "foo.js" from the appserver/static dir of the app "appname".

Also I believe foo.js will load foo.js from appserver/static of the current app.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...