How to listen for events on views using SplunkJS Stack

You can listen for events on several views, indicating a click or change. For example, you can listen for chart and legend events on Chart views, row and cell click events on Table views, clicks on EventsViewer views, and change events on form views. Then, you can add functions for the event and respond how you like.

Here's an example showing how to respond to click events on a Chart view called "mychart", which was instantiated in JavaScript. Information about the event is passed to the function via the e argument. This example prints some of the object data to the console.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(mvc) {

    // Retrieve the chart
    var chartclick = splunkjs.mvc.Components.get("mychart");

    // Respond to legend clicks
    chartclick.on("click:legend", function(e) {
        // To do: respond to events
        console.log("Clicked legend: ", e.name2);
    });

    // Respond to chart clicks
    chartclick.on("click:chart", function (e) {
        // To do: respond to events
        console.log("Clicked chart: ", e.value);
    });
});

This example shows an extension that responds to a click event for an Events panel created in Simple XML.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(mvc) {

    // Get the Events table
    var myEventsTable = mvc.Components.get('myevents');

    // Respond to a click event
    myEventsTable.on("click", function(e) {
        // Prevent drilldown from redirecting away from the page
        e.preventDefault();
        
        // Console feedback
        console.log("Click"); 

        // Use jQuery to fill in the text in the HTML's <div> tag
        $('#message').text("Clicked!");
    });

});