Example: Search controls using events using a Simple XML extension

This example uses a Simple XML extension to sync search controls to a search manager using change events.

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

<dashboard script="example_searchcontrolsevents.js">
  <label>Search controls and events</label>
  <row>
    <panel>
      <html>
        <div>
            <div class="main-area">
                <p>This example shows how to set up SearchBar, SearchControls, and Timeline views in JavaScript and sync them with a SearchManager using events.</p>
                <div id="mysearchbar1"></div>
                <div id="mysearchcontrols1"></div>
                <div id="mytimeline1"></div>
                <div id="mytable1"></div>
            </div>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

example_searchcontrolsevents.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/searchbarview",
    "splunkjs/mvc/searchcontrolsview",
    "splunkjs/mvc/timelineview",
    "splunkjs/mvc/tableview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    SearchManager,
    SearchbarView, 
    SearchControlsView, 
    TimelineView, 
    TableView
) {

    // Create the search manager
    var mysearch = new SearchManager({
        id: "search1",
        app: "search",
        preview: true,
        cache: true,
        status_buckets: 300,
        required_field_list: "*",
        search: "index=_internal | head 100"
    });

    // Create the views
    var mytimeline = new TimelineView ({
        id: "timeline1",
        managerid: "search1",
        el: $("#mytimeline1")
    }).render();

    var mysearchbar = new SearchbarView ({
        id: "searchbar1",
        managerid: "search1",
        el: $("#mysearchbar1")
    }).render();

    var mysearchcontrols = new SearchControlsView ({
        id: "searchcontrols1",
        managerid: "search1",
        el: $("#mysearchcontrols1")
    }).render();

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

    // When the timeline changes, update the search manager
    mytimeline.on("change", function() {
        mysearch.settings.set(mytimeline.val());
    });

    // When the query in the searchbar changes, update the search manager
    mysearchbar.on("change", function() {
        mysearch.settings.unset("search");
        mysearch.settings.set("search", mysearchbar.val());
    });

    // When the timerange in the searchbar changes, update the search manager
    mysearchbar.timerange.on("change", function() {
        mysearch.settings.set(mysearchbar.timerange.val());
    });
});