Example: Basic template with a layout using JavaScript

This example shows how to use JavaScript to create a basic template with a chart and an events viewer that displays results from a search. This example also uses a Splunk Dashboard (dashboard.css) layout.

[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 %}Basic template with Dashboard CSS (JavaScript){% endblock title %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}

{% block content %}
<!-- This layout uses dashboard.css styles -->
<div class="dashboard-body container-fluid main-section-body">
    <div class="row">
        <div class="dashboard-header clearfix">
            <h4>A chart and an events viewer displaying results of a search</h4>
        </div>
    </div>

    <!-- Row for the chart -->
    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Chart</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mychart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Row for the events viewer -->
    <div class="dashboard-row">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Events viewer</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myeventsviewer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock content%}

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

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

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

        var myeventsviewer = new EventsViewerView ({
            id: "eviewer1",
            managerid: "search1",
            el: $("#myeventsviewer")
        }).render();

    });
</script>
{% endblock js %}