4. Lay out the page

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

When you don't specify a layout, views are displayed on the page in the order that they're defined in the content block. But you can use HTML and your own CSS to lay out the views (and anything else you want to add to your app). In this example, we'll use Splunk's dashboard styles (described in Splunk dashboard styles).

Typically, you load your style sheets in the CSS block of the page template. The boilerplate we used already has a link to the style sheet we need for the dashboard styles:

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />

The next step is to use the nested <div> tag layout that dashboard styles use (rows > cells > panels > elements > head/body).

  1. In a text editor, open page1.html from the app's templates directory ($SPLUNK_HOME/etc/apps/mydjangoapp/django/mydjangoapp/templates/).
  2. Replace the content block with the following, noting the placement of {% view %} tags within the <div> tags:
  3. {% 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%}
    
  4. Save your changes, then view the page in Splunk by going to http://<localhost:port>/dj/mydjangoapp/page1.
  5. App with layout

Continue to 5. Add navigation to the app.