Example: Basic template with a layout using Django tags

Django Bindings has been deprecated. For more, see the Deprecation Notice.

This example shows how to use Django tags to create a 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:port>/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using Django Bindings.

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block title %}Basic template with Dashboard CSS (Django){% 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">
                        {% chart id="chart1" managerid="search1" type="bar" %}
                    </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">
                        {% eventsviewer id="eviewer1" managerid="search1" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock content%}

{% block managers %}
    {% searchmanager id="search1" 
        search="index=_internal | head 1000 | stats count by sourcetype" 
        preview=True 
        status_buckets=300
    %}
{% endblock managers %}