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.


Simple XML

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

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

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

                <h3>Search results</h3>
                <div id="table_searchresults"></div>

JavaScript extension

    ) {

    // 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")

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

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

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

    // 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=")

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