Dashboards & Visualizations

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

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

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

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

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

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!