Load libraries, components, and dependencies

SplunkJS Stack uses the Asynchronous Module Definition (AMD) format with RequireJS to load dependencies.

  • If you're working with Simple XML, you'll need to manually add requirements for the SplunkJS Stack libraries and components to instantiate Splunk views and search managers.
  • If you're working with converted HTML dashboards, the autogenerated code already includes the necessary require statements, and most libraries are already loaded for you. However, you can load additional libraries as needed. For details about the autogenerated HTML, see Section 3: Library requirements.

To use SplunkJS Stack, add the "splunkjs/mvc/simplexml/ready!" loader script to your require statement as follows:

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

This script loads the SplunkJS Stack libraries, then returns after this has been completed (although the script does not return a value).

To instantiate components such as views and search managers, add requirements for each of the individual components as follows:

require([
    componentpath_1,
    componentpath_2,
    componentpath_n,
    "splunkjs/mvc/simplexml/ready!"
], function() { . . . });

For each component's library path, see the Splunk Web Framework Component Reference.

Then, add variables for the returned objects as function arguments in the same order as they are declared in requirements. Because the ready! loader script does not return a value, you can add this statement at the end of the requirements, and omit it from the function arguments:

require([
    componentpath_1,
    componentpath_2,
    componentpath_n,
    "splunkjs/mvc/simplexml/ready!"
], function(
    object_1,
    object_2,
    object_n,
) { . . . });

Examples

This example shows how to load a chart and a search manager.

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    SearchManager,
    ChartView
) {

    // Create search managers
    new SearchManager({
        id: "search1",
        earliest_time: "-24h@h",
        latest_time: "now",
        search: "index=_internal | stats count by sourcetype"
    });


    // Instantiate views
    new ChartView({
        id: "chart1",
        managerid: "search1",
        "type": "line",
        el: $("#chart1")
    }).render();

});

To work with an instance of a Splunk view or search manager that has already been instantiated, you don't need to load the individual components, but you do need to add the "splunkjs/mvc" library requirement to be able to access the components. This next example shows how to modify the properties of an EventsViewer view that was already instantiated as an Events panel:

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

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

    // Programmatically change a property in the Events table
    myEventsTable.getVisualization(function(eventsView) {
        eventsView.settings.set("count", 2);
    });
});