Dashboards & Visualizations

Drilldown to a popup - impossible in simple XML, but what about SplunkJS?

arkadyz1
Builder

I know that it's not possible to drilldown to a popup from simple XML forms/dashboards. However, it should be possible if one converts the dashboard to HTML and adds some JavaScript to handle chart/table clicks. In the target popup, I'll want a div (a frame?) containing some custom info (an image or similar) and another one with a Splunk panel (chart/map/table etc.).

Any known/recommended way of doing this?

Thanks in advance!

Tags (3)
0 Karma
1 Solution

tom_frotscher
Builder

Hi,

i have done something similar before, i created a splunk table in simple xml. Then i extended the simple xml with some js. Wheever you clicked on a row of the table, a popup opened and showed more details corresponding to this table row.

So here is what i used:

As mentioned i created a normal simple xml splunk table and gave the table an id. In js you can get the model of the table, using the splunk js mvc object, and you are able to manipulite its drilldown behavior like this:

mvc.Components.get('idOfyourTable').getVisualization(function(tableView) {
  tableView.on('click', function(e) {
  e.preventDefault(); // Prevents the default splunk drilldown behavior
  if(e.field=="Fieldname") { // Fieldname = Column of your table you want something to happen when clicked
     // ... do whatever you want
     // all informations of the clicked row are stored in e (which is your clickevent)
  }

In the "do what you want" section of the code i used a modal to generate a popup. For more infos to modals, see here: Splunk Modals

Hope this helps. You will also need the tutorials from dev.splunk.com to understand how to get results of a search from js and things like this.

Greetings

Tom

View solution in original post

tom_frotscher
Builder

Hi,

i have done something similar before, i created a splunk table in simple xml. Then i extended the simple xml with some js. Wheever you clicked on a row of the table, a popup opened and showed more details corresponding to this table row.

So here is what i used:

As mentioned i created a normal simple xml splunk table and gave the table an id. In js you can get the model of the table, using the splunk js mvc object, and you are able to manipulite its drilldown behavior like this:

mvc.Components.get('idOfyourTable').getVisualization(function(tableView) {
  tableView.on('click', function(e) {
  e.preventDefault(); // Prevents the default splunk drilldown behavior
  if(e.field=="Fieldname") { // Fieldname = Column of your table you want something to happen when clicked
     // ... do whatever you want
     // all informations of the clicked row are stored in e (which is your clickevent)
  }

In the "do what you want" section of the code i used a modal to generate a popup. For more infos to modals, see here: Splunk Modals

Hope this helps. You will also need the tutorials from dev.splunk.com to understand how to get results of a search from js and things like this.

Greetings

Tom

arkadyz1
Builder

Hi, Tom!
Thanks! I already know how to get the data, it was the popup technique which kept me puzzled. I'll try the example you referred to and will update here. In the mean time, could you convert your comment to a reply so that I can accept a solution?

Arkady.

0 Karma

tom_frotscher
Builder

Hi,

glad i could help. I converted the comment to an answer. If you have any questions, let me know here.

Greetings

Tom

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...