How to use search controls using Django Bindings

Django Bindings has been deprecated. For more, see the Deprecation Notice.

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 in JavaScript to set the view's value into the search manager whenever the view changes. You can also do this using tokens within Django tags 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 in JavaScript 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.

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}{{app_name}} Search Controls (events){% endblock title %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}

{% block content %}
    {% searchbar id="searchbar1" managerid="search1" %}
    {% searchcontrols id="searchcontrols1" managerid="search1" %}
    {% timeline id="timeline1" managerid="search1" %}
    {% table id="table1" managerid="search1" %}
{% endblock content %}

{% block managers %}
    {% searchmanager id="search1" 
        search="index=_internal | head 100"
        preview=True 
        required_field_list="*" status_buckets=300 %}
{% endblock managers %}

{% block js %}
    <script>
        var deps = [
            "splunkjs/ready!"
        ];
        require(deps, function(mvc) {
            // Get instances of the views and search manager created using tags
            var mytimeline = splunkjs.mvc.Components.getInstance("timeline1");
            var mysearchbar = splunkjs.mvc.Components.getInstance("searchbar1");
            var mysearch = splunkjs.mvc.Components.getInstance("search1");

            // 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()); 
            });
        });
    </script>
{% endblock js %}

This next example shows the same example above, without the Timeline view, and uses tokens in Django tags instead of change event handlers:

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}{{app_name}} Search Controls (tokens){% endblock title %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}

{% block content %}
    {% searchbar id="searchbar1" managerid="search1" 
        value="$searchquery$"|token_safe 
        timerange_earliest_time="$earlyval$"|token_safe
        timerange_latest_time="$lateval$"|token_safe
        default="index=_internal | head 100" %}

    {% searchcontrols id="searchcontrols1" managerid="search1" %}

    {% table id="table1" managerid="search1" %}
{% endblock content %}

{% block managers %}
    {% searchmanager id="search1" 
        search="$searchquery$"|token_safe
        earliest_time="$earlyval$"|token_safe
        latest_time="$lateval$"|token_safe
        preview=True 
        required_field_list="*" status_buckets=300
    %}
{% endblock managers %}