Code for the Django app tutorial

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

Here's the final version of the page1.html page:

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

{% load splunkmvc %}

{% block title %}{{app_name}} Your page title goes here{% endblock title %}

{% block css %}
<!-- Style sheets are loaded here -->
<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" />
<style>
    /* Define any page styles here*/
</style>
{% endblock css %}

{% block content %}
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Django Dashboard</h2>
        <p class="description">A form with a dropdown, radio buttons, a table, a chart, and tokens</p>
    </div>
    <!-- Row 1 with 3 cells -->
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel ">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Number of results</h3>
                    </div>
                    <div class="panel-body">
                        {% dropdown id="drop_headcount" default="1" value="$headcount$"|token_safe showClearButton=False %}
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel ">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Source types</h3>
                    </div>
                    <div class="panel-body" >
                        {% radiogroup id="radio_sourcetype" managerid="search_sourcetypes" labelField="sourcetype" valueField="sourcetype" value="$sourcetype$"|token_safe default="splunkd"%}
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel ">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Chart</h3>
                    </div>
                    <div class="panel-body">
                        {% chart id="chart_sourcetype" managerid="search_chart" type="pie" drilldown="none" %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Row 2 -->
    <div class="dashboard-row dashboard-row2">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel ">
                <div class="panel-element-row">
                    <div class="dashboard-element table" style="width: 100%">
                        <div class="panel-head">
                            <h3>Search results</h3>
                        </div>
                        <div class="panel-body">
                            {% table id="table_searchresults" managerid="search_resulttable" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content%}

{% block managers %}
    {% searchmanager
        id="search_resulttable"
        search="index=_internal sourcetype=$sourcetype$ | head $headcount$"|token_safe
        cache=True
    %}
    {% searchmanager
        id="search_chart"
        search="index=_internal | head 1000 | stats count by sourcetype"
        cache=True
    %}
    {% searchmanager
        id="search_sourcetypes"
        search="index=_internal | head 1000 | top sourcetype"
        cache=True
    %}
{% endblock managers %}

{% block js %}
    <script>
        // Load the required libraries--in this case, the SplunkJS Stack and radio buttons
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/radiogroupview"
        ];
        require(deps, function(mvc) {
            // Define a dictionary of choices for the dropdown list
            var choices_headcount = [
                {label:"1", value: "1"},
                {label:"2", value: "2"},
                {label:"3", value: "3"}
            ];
            // Set the choices into the dropdown list
            splunkjs.mvc.Components.getInstance("drop_headcount").settings.set("choices", choices_headcount);
        });
    </script>
{% endblock js %}