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.


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">
    <title>Basic example (JavaScript, minimal Django)</title>
    <h4>A chart and an events viewer displaying results of a search</h4>

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

    {% component_loader %}

        var deps = [
        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")

            // Create an events viewer
            var myeventsviewer = new EventsViewerView ({
                id: "eviewer1",
                managerid: "search1",
                el: $("#myeventsviewer")