Example: Simple XML extension

This example shows a Simple XML dashboard showing how to modify it using an extension in JavaScript. Compare this to the code for the modified HTML dashboard, which produce the same dashboard.

[example]

Simple XML

<dashboard script="parallel_javascript.js">
    <label>Simple XML Extensions</label>
    <row>
        <panel>
            <html>
                <h3>Number of results</h3>
                <div id="drop_headcount"></div>

                <h3>Source types</h3>
                <div id="chkboxes_sourcetype"></div>

                <h3>Chart</h3>
                <div id="chart_sourcetype"></div>

                <h3>Search results</h3>
                <div id="table_searchresults"></div>
            </html>
        </panel>
    </row>
</dashboard>

JavaScript extension

require([
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/dropdownview",
    "splunkjs/mvc/checkboxgroupview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/simplexml/ready!"
    ],
    function(
        mvc, 
        SearchManager, 
        DropdownView, 
        CheckboxGroupView, 
        TableView, 
        ChartView
    ) {

    // Instantiate components

    new SearchManager({
        id: "search_sourcetypes",
        search: "index=_internal | head 1000 | top sourcetype",
        preview: false,
        cache: true
    });

    new SearchManager({
        id: "search_resulttable",
        search: mvc.tokenSafe("index=_internal $sourcetype$ | head $headcount$"),
        preview: false,
        cache: true
    });

    new SearchManager({
        id: "search_chart",
        search: "index=_internal | stats count by sourcetype",
        preview: false,
        cache: true
    });

    new TableView({
        id: "table_searchresults",
        managerid: "search_resulttable",
        el: $("#table_searchresults")
    }).render();

    new ChartView({
        id: "chart_sourcetype",
        managerid: "search_chart",
        type: "pie",
        drilldown: "none",
        el: $("#chart_sourcetype")
    }).render();

    var mydropdown = new DropdownView({
        id: "drop_headcount",
        default: "5",
        value: mvc.tokenSafe("$headcount$"),
        showClearButton: false,
        el: $("#drop_headcount")
    }).render();

    var mycheckboxes = new CheckboxGroupView({
        id: "chkboxes_sourcetype",
        managerid: "search_sourcetypes",
        labelField: "sourcetype",
        valueField: "sourcetype",
        default: "splunkd",
        el: $("#chkboxes_sourcetype")
    }).render();

    // Define choices for the dropdown list
    var choices_headcount = [
        {label:"5", value: "5"},
        {label:"10", value: "10"},
        {label:"15", value: "15"}
    ];

    // Set the choices into the dropdown list
    mydropdown.settings.set("choices", choices_headcount);

    // Set the $sourcetype$ token to the default value, "splunkd"
    mvc.Components.get('default').set('sourcetype', "splunkd", {tokens: true});

    // When a checkbox is clicked, form a sourcetype string from the selected choices
    // and manually update the $sourcetype$ token
    mycheckboxes.on("change", function() {
        // Form the sourcetype string
        var selectedsourcetypes="sourcetype=" + mycheckboxes.val().join(" OR sourcetype=");

        // If no boxes checked, deliberately set the sourcetype to nothing so that the search is properly formed
        if (selectedsourcetypes=="sourcetype=")
        {
            selectedsourcetypes="sourcetype=''";
        }

        // Set the value for the $sourcetype$ token
        mvc.Components.get('default').set('sourcetype', selectedsourcetypes, {tokens: true});
    });

});