Example: Basic template using JavaScript without Django tags

This example shows how to create a basic template using JavaScript and HTML almost entirely (rather than using the Django tag block structure). Only two Django tags are used, which are required for loading resources.

[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.

{% load splunkmvc %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic example (JavaScript, minimal Django)</title>
</head>
<body>
    <h4>A chart and an events viewer displaying results of a search</h4>

    <div id="mychart"></div>
    <div id="myeventsviewer"></div>

    {% component_loader %}

    <script>
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/chartview",
            "splunkjs/mvc/eventsviewerview",
            "splunkjs/mvc/searchmanager"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var ChartView = require("splunkjs/mvc/chartview");
            var EventsViewerView = require("splunkjs/mvc/eventsviewerview");
            var SearchManager = require("splunkjs/mvc/searchmanager");

            // Create a search manager
            var mysearch = new SearchManager({
                id: "search1",
                preview: true,
                cache: true,
                status_buckets: 300,
                search: "index=_internal | head 1000 | stats count by sourcetype" 
            });

            // Create a chart
            var mychart = new ChartView ({
                id: "chart1",
                managerid: "search1",
                type: "bar",
                el: $("#mychart")
            }).render();

            // Create an events viewer
            var myeventsviewer = new EventsViewerView ({
                id: "eviewer1",
                managerid: "search1",
                el: $("#myeventsviewer")
            }).render();
        });
    </script>
</body>
</html>