Example: Search controls using events and Django tags

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

This example uses a mix of Django tags and JavaScript to show how to sync search controls to a search manager using change events.

[example]

To use this code, save it as an HTML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/django/app_name/templates, then view the page in Splunk. For example, to view mypage.html in mysplunkapp, go to http://<localhost:port>/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using Django Bindings.

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

{% load splunkmvc %}

{% block title %}Search controls and events (Django){% endblock title %}

{% block css %}
    <style>
        .main-area {
            padding: 30px;
        }
    </style>
{% endblock css %}

{% block content %}
<div>
    <div class="main-area">
        <p>This example shows how to set up SearchBar, SearchControls, and Timeline views using Django tags, and sync them with a SearchManager using events in JavaScript.</p>
    </div>
    {% searchbar id="searchbar1" managerid="search1" %}
    {% searchcontrols id="searchcontrols1" managerid="search1" %}
    {% timeline id="timeline1" managerid="search1" %}
    {% table id="table1" managerid="search1" %}
</div>
{% 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 above
        var mytimeline = splunkjs.mvc.Components.getInstance("timeline1");
        var mysearchbar = splunkjs.mvc.Components.getInstance("searchbar1");
        var mysearch = splunkjs.mvc.Components.getInstance("search1");

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