How to use search controls using SplunkJS Stack

When a view is bound to a search manager, any time the search manager changes, the search runs again and the view is updated. But rather than only receiving results from a search manager, several views—SearchBar, SearchControls, Timeline, and TimeRange—allow you to control and modify the search manager. For example, when the user enters a new search or changes the time range in the SearchBar view, the view sets the search query and earliest_time and latest_time properties on the search manager:

The SearchBar view

To allow the SearchBar, Timeline, and TimeRange views to modify the search manager, you must create a change event handler to set the view's value into the search manager whenever the view changes. You can also do this using tokens for the SearchBar and TimeRange views, to keep the search query and time-range properties in sync. (The SearchControls view does not require this additional work—it updates the search manager automatically.) For more about event handlers, see How to listen for events on views using SplunkJS Stack.

This example shows how to use SearchBar, SearchControls, and Timeline views to control a search manager, and a Table to display results. Each view is linked to the same search by setting the view's managerid property to the value of the search manager id property, "search1". The example includes change event handlers to update the search, and shows how to access the time-range portion of the SearchBar view. The SearchControls view does not require a change event handler to update the search.

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

        // Instantiate the views and search manager
        var mysearchbar = new SearchbarView({
            id: "searchbar1",
            managerid: "search1",
            el: $("#mysearchbar1")
        }).render();

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

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

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

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

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

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

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

This next example shows the same example above, without the Timeline view, and uses tokens instead of change event handlers (requiring the "splunkjs/mvc" library):

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

        // Instantiate the views and search manager
        var mysearchbar = new SearchbarView({
            id: "searchbar1",
            managerid: "search1",
            value: mvc.tokenSafe("$searchquery$"),
            timerange_earliest_time: mvc.tokenSafe("$earlyval$"),
            timerange_latest_time: mvc.tokenSafe("$lateval$"),
            default: "index=_internal | head 100",
            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();

        var mysearch = new SearchManager({
            id: "search1",
            search: mvc.tokenSafe("$searchquery$"),
            earliest_time: mvc.tokenSafe("$earlyval$"),
            latest_time: mvc.tokenSafe("$lateval$"),
            app: "search",
            preview: true,
            required_field_list: "*",
            status_buckets: 300
        });
    });