How to work in Django templates

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

SplunkJS Stack works with the Django Bindings component of the Web Framework, which uses Django's template system to render data into HTML pages. The Web Framework provides base templates with a built-in page structure that uses block tags to indicate where content belongs, such as a JS block tag for your JavaScript code. Django template tags are provided for convenience, allowing you to quickly load libraries and instantiate components.

This template system lets you use the tags you want in combination with JavaScript code. For example, you can take advantage of Django template tags for creating Splunk views and search managers, but use JavaScript to customize these components, create event handlers, and add drilldown functionality. Here's a sample page template that creates a text box using tags, but uses JavaScript to add a change event handler:

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

{% load splunkmvc %}

{% block content %}
    <div id="messagetext">Enter something:</div>
    {% textinput id="mytextbox" %}
{% endblock content %}

{% block js %}
    <script>
        var deps = [
            "splunkjs/ready!"
        ];
        require(deps, function(mvc) {
            var textchange = splunkjs.mvc.Components.getInstance("mytextbox");
            textchange.on("change", function () {
                document.getElementById("messagetext").innerHTML="<b>Change event!</b>";
            });
        });
    </script>
{% endblock js %}

Or, you can instantiate components in JavaScript too. Here's the same example, but modified to instantiate the text box in JavaScript. Tags are only used here to load a base template and Web Framework libraries:

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

{% load splunkmvc %}

{% block content %}
    <div id="messagetext">Enter something:</div>
    <div id="textbox"></div>
{% endblock content %}

{% block js %}
    <script>
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/textinputview"
        ];
        require(deps, function(mvc) {
            var TextInput = require("splunkjs/mvc/textinputview");
            var mytextbox = new TextInput ({
                id: "mytextbox",
                el: $("#textbox")
            }).render();
            mytextbox.on("change", function () {
                document.getElementById("messagetext").innerHTML="<b>Change event!</b>";
            });
        });
    </script>
{% endblock js %}

If you want, you can avoid using base templates and tags altogether, except for two tags that are required for loading Web Framework libraries and components. This example shows how―but this barebones mostly-JavaScript app doesn't have any of the Splunk chrome, menus, or other UI that you get by using base templates:

{% load splunkmvc %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <div id="messagetext">Enter something:</div>
    <div id="textbox"></div>

    {% component_loader %}

    <script>
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/textinputview"
        ];
        require(deps, function(mvc) {
            var TextInput = require("splunkjs/mvc/textinputview");
            var mytextbox = new TextInput ({
                id: "mytextbox",
                el: $("#textbox")
            }).render();
            mytextbox.on("change", function () {
                document.getElementById("messagetext").innerHTML="<b>Change event!</b>";
            });
        });
    </script>
</body>
</html>

For more examples, see Example: Basic template using JavaScript without Django tags and Example: JavaScript + HTML dashboard.