Example: Search results model using a Simple XML extension

This example uses a Simple XML extension to retrieve the different types of search results from the results model: events, preview, results, and summary.

[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_resultsmodel.xml

<dashboard script="example_resultsmodel.js" >
  <label>Search results model</label>
  <row>
    <panel>
      <html>
        <div>
          <div class="main-area">
            <h3>search index=_internal | head 5</h3>
            <div id="mytable"></div>
            <h4>Results model</h4>
            <p>Select the type of results to retrieve, then look in the developer console to explore the <tt>data</tt> object and Backbone collection.</p>
            <div id="mydropdown"></div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

example_resultsmodel.js

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

    // Create the search manager and views
    var mainSearch = new SearchManager({
        id: "mysearch",
        search: "index=_internal | head 5",
        data: mvc.tokenSafe("$datamod$"),
        status_buckets: 300,
        preview: true,
        cache: false
    });

    var table1 = new TableView({
        id:"table",
        managerid: "mysearch",
        el: $("#mytable")
    }).render();

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

    // Set the dropdown list choices
    var choices = [
        {label: "events",  value: "events" },
        {label: "preview", value: "preview"},
        {label: "results", value: "results"},
        {label: "summary", value: "summary"}
    ];
    mydropdown.settings.set("choices", choices);

    // Display the type of selected results model in the console
    var myChoice = "results";
    mydropdown.on("change", function(){
        myChoice = mydropdown.settings.get("value");
        var myResults = mainSearch.data(myChoice);
        myResults.on("data", function() {
            console.log("Type: ", myChoice);
            console.log("Has data? ", myResults.hasData());
            console.log("Data (rows): ", myResults.data().rows);
            console.log("Backbone collection: (rows) ", myResults.collection().raw.rows);
        });
    });

});