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

View solution in original post

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
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!