How to customize drilldown actions using SplunkJS Stack

The Chart, Table, EventsViewer, and SplunkMap views support drilldown actions when the user clicks the view. For apps in Splunk Web, the default drilldown action redirects the user to the Search app. For apps outside Splunk Web, a default drilldown action is undefined, but you can define one in the onDrilldown function in the SplunkJS Stack configuration.

Each view lets you enable or disable drilldown differently:

  • Chart view: Set the drilldown property to "all" to enable drilldown, or "none" to disable it.
  • Table view: Set the drilldown property to "row" to enable drilldown for the entire row, "cell" for an individual cell, or "none" to disable it.
  • EventsViewer view: This view has a drilldown property that corresponds to event format types (list, table, or raw). Set the corresponding drilldown property to "full", "inner", or "outer" to enable drilldown for these elements of the event, or "none" to disable it.
  • SplunkMap view: Set the drilldown property to true or false to enable or disable drilldown.

To create a custom drilldown action for an individual view, set up a click event handler and bypass the default drilldown action by doing one of the following:

  • Set the view's drilldownRedirect property to false.
  • Leave the view's drilldownRedirect property set to true (the default value) and use the preventDefault method in the event handler.

Example

Here's an example that shows different drilldown scenarios for an app in Splunk Web:

  • The EventsViewer view is set to raw format and uses the raw.drilldown property to enable drilldown for inner event elements.
  • The Chart view disables redirect using the drilldownRedirect property. A corresponding event handler responds to click events for both legend and chart clicks. The click event data is captured in the e object, and properties from this data object are displayed in the console.
  • The Table view enables drilldown for cells rather than the default rows. A corresponding event handler uses the preventDefault method to bypass the default redirect behavior, then responds to click events by capturing and displaying click data in the console.
  • The SplunkMap view disables redirect using the drilldownRedirect property. A corresponding event handler captures data for the marker that was clicked, then displays the latitude and longitude in the console.
<script>
    require([
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/eventsviewerview",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/tableview",
        "splunkjs/mvc/splunkmapview",
        "splunkjs/mvc/simplexml/ready!"
    ], function(
        SearchManager,
        EventsViewer,
        ChartView,
        TableView,
        SplunkMapView
    ) {
        // Instantiate searches
        ...

        // Set up the views
        myeventsviewer = new EventsViewer({
            id: "example-eventsviewer",
            managerid: "main-search",
            type: "raw",
            "raw.drilldown": "inner",
            count: 3,
            el: $("#myeventsviewer")
        }).render();

        mychart = new ChartView({
            id: "example-chart",
            managerid: "subsearch1",
            type: "bar",
            drilldown: "all",
            drilldownRedirect: false,
            el: $("#mychart")
        }).render();

        mytable=new TableView({
            id: "example-table",
            managerid: "subsearch2",
            pageSize: 3,
            wrap: true,
            drilldown: "cell",
            el: $("#mytable")
        }).render();

        mymap = new SplunkMapView({
            id: "example-splunkmap",
            managerid: "map-search",
            drilldownRedirect: false,
            el: $("#mymap")
        }).render();

        // Set up event handlers to customize drilldown behavior
        mychart.on("click:legend", function(e) {
            // Displays a data object in the console--the legend text
            console.log("Clicked the chart legend: ", e.name2);
        });

        mychart.on("click:chart", function(e) {
            // Displays a data object in the console
            console.log("Clicked the chart: ", e.value);
        });

        mytable.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();

            // Displays a data object in the console
            console.log("Clicked the table:", e.data);
        });

        mymap.on("click:marker", function(e) {
            // Displays a data object in the console
            console.log("Clicked the map: ", e.data.count, " at lat: ", e.data.latitude, ", long:", e.data.longitude);
        });

    });
</script>

For end-to-end examples, see: