Product documentation
uberAgent
Current Release (7.3.0) 7.2.1 7.2.0 7.1.2 7.1.1 7.1.0 7.0.2 7.0.1 7.0.0
View PDF

How to Implement Drilldowns on Custom Dashboards

July 24, 2024
Contributed by: 
C

When you create a custom dashboard, Splunk automatically adds a drilldown to the search page. In many cases, that is not what you want. This article describes an easy way to implement custom drilldowns.

How It Works

  1. Add a JavaScript file to your dashboard
  2. Implement click event handlers in JavaScript, in which you set the new URL and optionally pass values to the drilldown page
  3. Use the passed values in the drilldown page

Let’s explain these steps in more detail.

Add a JavaScript File

To add one or more JavaScript files to your Simple XML dashboard specify the names of the .js files in the form tag like this:

JavaScript files reside in the appserver\static directory of your app.

Click Event Handlers

In your JavaScript file add click event handlers to those dashboard elements (charts, tables, ...) you want to implement a custom drilldown behavior for.

Please note that the dashboard elements need to have unique IDs in Simple XML for this to work, e.g.:


<table id="Table_Panel41"></table>

<!--NeedCopy-->

The JavaScript could look like this:


// RequireJS dependency handling
require (["splunkjs/mvc",
         "splunkjs/mvc/simplexml/ready!"], function (mvc)
{
   // Set click event handlers
   var chart21 = mvc.Components.getInstance ("Chart_Panel21");
   chart21.on ("click", drilldown);
   var table41 = mvc.Components.getInstance ("Table_Panel41");
   table41.on ("click:row", drilldown);

   // Define a drilldown function that can be used by multiple click event handlers
   function drilldown (event)
   {
      // Don't do any further event processing
      event.preventDefault ();

      // Get token values
      var earliest = GetToken (mvc, "earliest");
      var latest = GetToken (mvc, "latest");

      // Build the new URL
      var drilldownUrl = "single_machine_detail";
      drilldownUrl += "?earliest=" + encodeURIComponent (earliest);
      drilldownUrl += "&latest=" + encodeURIComponent (latest);
      drilldownUrl += "&FilterHostName=" + encodeURIComponent (event.data["click.value"]);

      // Go to the new URL
      window.location = drilldownUrl;
   }
});

<!--NeedCopy-->

Use the Passed Values on the Drilldown Page

In the example above we are passing the search time range (earliest and latest) to the drilldown page, where it is used automatically.

In addition to time, we pass the variable FilterHostName. This variable can be used in the Simple XML drilldown page searches by enclosing it in dollar signs, e.g. $FilterHostName$.

If you want to pass a value to an input field instead, prepend the field token’s name with "form.". Example: your input field on the drilldown page is defined like this:

Specify the field’s value as follows in JavaScript:

drilldownUrl += "&form.FilterField=" + encodeURIComponent ("Some field value");

Examples

The technique described here is used extensively on uberAgent’s dashboards. Poke around our search head app and you will find many real-world examples.

How to Implement Drilldowns on Custom Dashboards
July 24, 2024
Contributed by: 
C
July 24, 2024
Contributed by: 
C

In this article

Site feedback | Your privacy choices footer linkYour Privacy Choices | Privacy and legal terms | Cookie preferences | Consent settings | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.