Example: Search controls using events and JavaScript for apps outside Splunk Web

This example uses JavaScript to sync search controls to a search manager using change events.

To use this code, save it as an HTML file in your own web site's directory. Be sure to update the splunkjs.config section for your own web app. The authenticate function redirects to a login_form.html example login page, which you can find here. For more, see Use SplunkJS Stack in your own web apps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Search Controls: Events</title>

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css" />
    <style>
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <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>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Configure SplunkJS Stack
        splunkjs.config({
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            authenticate: function(done) { 
                require([
                    "jquery",
                    "jquery.cookie"
                ], function($) {
                    // Retrieve the session key and username from cookies
                    var splunkSessionKey = $.cookie("splunk_sessionkey");
                    var splunkCurrentUser = $.cookie("splunk_username");

                    // Log in using the session key and username
                    if (splunkSessionKey) {
                        done(null, {sessionKey: splunkSessionKey, username: splunkCurrentUser}); 
                    }
                    // If there is no session key, redirect to the login form
                    else {
                        window.location.replace("login_form.html");
                    }
                });
            }
        });
        
        // Configure the web site's base URL
        require.config({
            baseUrl: "static/"
        });

        // Set up the Web Framework components
        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.search.set(mytimeline.val());
            });

            // When the query in the searchbar changes, update the search manager
            mysearchbar.on("change", function() {
                mysearch.query.set("search", mysearchbar.val());
            });

            // When the timerange in the searchbar changes, update the search manager
            mysearchbar.timerange.on("change", function() {
                mysearch.search.set(mysearchbar.timerange.val()); 
            });
        });
    </script>
</body>
</html>