Example: Django template dashboard

This example shows a Django dashboard, created using Django tags in a Django template. Compare this to the code for the modified HTML dashboard and the JavaScript and HTML version, which produce the same dashboard.

[example]

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

{% load splunkmvc %}

{% block title %}{{app_name}}Django Template{% 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 %}
<div class="dashboard-body container-fluid main-section-body" data-role="main">

    <div class="dashboard-header clearfix">
        <h2>Django Template</h2>
        <p class="description">A dashboard that was created using Django tags</p>
    </div>

    <!-- Row One -->
    <div class="dashboard-row dashboard-row1">
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel clearfix">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Number of results</h3>
                    </div>
                    <div class="panel-body">
                        {% dropdown id="drop_headcount" default="5" value="$headcount$"|token_safe showClearButton=false %}
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 25%;">
            <div class="dashboard-panel clearfix">
                <div class="dashboard-element">
                    <div class="panel-head">
                        <h3>Source types</h3>
                    </div>
                    <div class="panel-body" >
                        {% checkboxgroup id="chkboxes_sourcetype" managerid="search_sourcetypes" labelField="sourcetype" valueField="sourcetype"
                        default="splunkd" %}
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-cell" style="width: 50%;">
            <div class="dashboard-panel clearfix">
                <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 Two -->
    <div class="dashboard-row dashboard-row2">
        <div class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">                
                <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_sourcetypes" 
        search="index=_internal | head 1000 | top sourcetype" 
        cache=True
    %}

    {% searchmanager 
        id="search_resulttable" 
        search="index=_internal $sourcetype$ | head $headcount$"|token_safe 
        cache=True
    %}

    {% searchmanager
        id="search_chart"
        search="index=_internal | head 1000 | stats count by sourcetype" 
        cache=True
    %}
{% endblock managers %}

{% block js %}    
<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/radiogroupview"
    ];
    require(deps, function(mvc) {
        // Define choices for the dropdown list
        var choices_headcount = [
            {label:"5", value: "5"},
            {label:"10", value: "10"},
            {label:"15", value: "15"}
        ];

        // Get the dropdown list and set the choices
        splunkjs.mvc.Components.getInstance("drop_headcount").settings.set("choices", choices_headcount); 

        // Get the checkboxgroup control
        var mycheckboxes = splunkjs.mvc.Components.getInstance("chkboxes_sourcetype");

        // Set the $sourcetype$ token to the default value, "splunkd"
        mvc.Components.get('default').set('sourcetype', "splunkd", {tokens: true});

        // When a checkbox is clicked, form a sourcetype string from the selected choices
        // and manually update the $sourcetype$ token
        mycheckboxes.on("change", function() {
            // Form the sourcetype string
            var selectedsourcetypes="sourcetype=" + mycheckboxes.val().join(" OR sourcetype=");

            // If no boxes checked, set the sourcetype to nothing so that the search is properly formed
            if (selectedsourcetypes=="sourcetype=")
            {
                selectedsourcetypes="sourcetype=''";
            }

            // Set the value for the $sourcetype$ token
            mvc.Components.get('default').set('sourcetype', selectedsourcetypes, {tokens: true});
        });

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