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
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...