Example: Search controls using events and JavaScript in a template

This example uses JavaScript 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: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 events (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, 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>
{% endblock content %}

{% block js %}    
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/searchbarview",
        "splunkjs/mvc/searchcontrolsview",
        "splunkjs/mvc/timelineview",
        "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 TimelineView = require("splunkjs/mvc/timelineview");
        var TableView = require("splunkjs/mvc/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()); 
        });
    });
</script>
{% endblock js %}