Example: Token manipulation using a Simple XML extension

This example uses a Simple XML extension to use tokens to run a search using the index value that is selected from a dropdown list. Tokens are manipulated using the token change event handler.

[example]

To use this code:

  1. Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/local/data/ui/views/.
  2. Save the JS file under $SPLUNK_HOME/etc/apps/app_name/appserver/static/.
  3. Restart Splunk.
  4. Open Splunk Web and view the dashboard in your app. For example, to view myexample in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.

example_tokensmanip.xml

<dashboard script="example_tokensmanip.js">
  <label>Token manipulation</label>
  <description></description>
  <row>
    <panel>
      <html>
        <h2>Token manipulation</h2>

        <p>Select an index:</p>
        <div id="indexlist"></div><br/>
        
        <p>Here's the search:</p>
        <div id="text1"></div>
        <div id="tableindex"></div>
      </html>
    </panel>
  </row>
</dashboard>

example_tokensmanip.js

require([
    "splunkjs/mvc",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/dropdownview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/textinputview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    mvc,
    SearchManager,
    DropdownView,
    TableView,
    TextInputView
) {

    // Search query is based on the selected index
    var indexsearch = new SearchManager({
        id: "indexsearch",
        cache: true,
        search: mvc.tokenSafe("$searchQuery$")
    });

    // Display an arbitrary list of indexes
    var indexlist = new DropdownView({
        id:"indexlist",
        choices: [
            {label: "main", value: "main"},
            {label: "_internal", value: "_internal"},
            {label: "_audit", value: "_audit"},
            {label: "<all>", value: "all"} // Not a valid index name
        ],
        showClearButton: false,
        value: mvc.tokenSafe("$indexName$"),
        el: $("#indexlist")
    }).render();

    // When the $indexName$ token changes, form the search query
    var defaultTokenModel = mvc.Components.get("default");
    defaultTokenModel.on("change:indexName", function(formQuery, indexName) {
        var newQuery = " | stats count by sourcetype, index";
        if (indexName == "all") {
            newQuery = "index=_internal OR index=_audit OR index=main" + newQuery;
        } else {
            newQuery = "index=" + indexName + newQuery;
        }
        // Update the $searchQuery$ token value
        defaultTokenModel.set('searchQuery', newQuery);
    });

    // Display the search results
    var textinput1 = new TextInputView({
        id: "textinput1",
        value: mvc.tokenSafe("$searchQuery$"),
        el: $("#text1")
    }).render();


    var tableindex = new TableView({
        id: "tableindex",
        managerid: "indexsearch",
        pageSize: 5,
        el: $("#tableindex")
    }).render();
});