Example: Search results model using JavaScript for apps outside Splunk Web

This example uses JavaScript to retrieve the different types of search results from the results model: events, preview, results, and summary.

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 Results Model</title>

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

<body>
    <div class="main-area">
        <h2>Results model</h2>
        <div id="mysearchbar1"></div>
        <br>
        <h4>1. Select the type of results to retrieve</h4>
        <div id="mydropdown"></div>
        <br>
        <h4>2. Open the console</h4>
        <p>Look in the console to explore the <b>data</b> object and Backbone collection.</p>
    </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/dropdownview"
        ];
        require(deps, function(mvc) {
            // Load the components 
            var SearchManager = require("splunkjs/mvc/searchmanager");
            var SearchbarView = require("splunkjs/mvc/searchbarview");
            var DropdownView = require("splunkjs/mvc/dropdownview");

            // Create the search manager and views
            var mainSearch = new SearchManager({
                id: "mysearch",
                search: mvc.tokenSafe("$searchquery$"),
                earliest_time: mvc.tokenSafe("$earlyval$"),
                latest_time: mvc.tokenSafe("$lateval$"),
                data: mvc.tokenSafe("$datamod$"),
                status_buckets: 300,
                preview: true, 
                cache: false
            });

            var mysearchbar = new SearchbarView({
                id: "searchbar1",
                managerid: "mysearch",
                value: mvc.tokenSafe("$searchquery$"),
                timerange_earliest_time: mvc.tokenSafe("$earlyval$"),
                timerange_latest_time: mvc.tokenSafe("$lateval$"),
                default: "index=_internal | head 5",
                el: $("#mysearchbar1")
            }).render();

            var mydropdown = new DropdownView({
                id: "selData",
                showClearButton: false,
                value: mvc.tokenSafe("$datamod$"),
                el: $("#mydropdown")
            }).render();

            // Set the dropdown list choices
            var choices = [
                {label: "events",  value: "events" },
                {label: "preview", value: "preview"},
                {label: "results", value: "results"},
                {label: "summary", value: "summary"}
            ];
            mydropdown.settings.set("choices", choices);

            // Display the type of selected results model in the console
            var myChoice = "results";
            mydropdown.on("change", function(){
                myChoice = mydropdown.settings.get("value");
                var myResults = mainSearch.data(myChoice);
                myResults.on("data", function() {
                    console.log("Has data? ", myResults.hasData());
                    console.log("Type: ", myChoice);
                    console.log("Data (rows): ", myResults.data().rows);
                    console.log("Backbone collection: (rows) ", myResults.collection().raw.rows);
                });
            });
            
        });
    </script>
</body>
</html>