Example: Search controls using tokens and JavaScript in a template

This example uses JavaScript to sync search controls to a search manager using token variables.

[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:8000/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using SplunkJS Stack.

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

{% load splunkmvc %}

{% block title %}Search controls and tokens (JavaScript){% 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 and SearchControls views using Django tags, and sync them with a SearchManager using tokens.</p>
        <p><b>Note:</b> The Timeline view can't be synced using tokens. Use events instead.</p>

        <div id="mysearchbar1"></div>
        <div id="mysearchcontrols1"></div>
        <div id="mytable1"></div>
    </div>
</div>
{% endblock content %}

{% block js %}
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/searchbarview",
        "splunkjs/mvc/searchcontrolsview",
        "splunkjs/mvc/tableview"
    ];
    require(deps, function(mvc) {
        // Load individual components
        var SearchManager = require("splunkjs/mvc/searchmanager");
        var SearchbarView = require("splunkjs/mvc/searchbarview");
        var SearchControlsView = require("splunkjs/mvc/searchcontrolsview");
        var TableView = require("splunkjs/mvc/tableview");

        // Create the search manager and views
        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
        });

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