Load libraries, components, and dependencies in Django Bindings

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

The easiest way to load the required Web Framework libraries and components is to inherit from one of the base templates and use the {% load %} template tag on your page templates:

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

{% load splunkmvc %}
...

If you want to use the Web Framework with only the most basic features (no Splunk chrome, styles, or menus), you can inherit from the parent base template (base.html) to get the basic page structure. But, you'll still need to load the required Web Framework libraries and components by adding the following tags to your templates:

{% extends 'splunkdj:base.html' %}

{% load splunkmvc %}

...

{% block js %}
    {% component_loader %}
    <script>
        // Load dependencies, instantiate components
        ...
    </script>
{% endblock js %}

The Web Framework templates are provided for convenience, but they aren't required. So if you really want to go it alone without a base template, here's the minimum content you need:

{% load splunkmvc %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>

    {% component_loader %}

    <script>
        // Load dependencies, instantiate components

        ...

    </script>
</body>
</html>

To work with an instance of a view or manager that has already been instantiated using Django template tags, you only need to add the "splunkjs/ready!" requirement. This example shows how to modify the properties of a chart that was instantiated using a template tag:

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

{% load splunkmvc %}

{% block content %}
    {% chart id="chart1" managerid="mysearch1" type="bar" %}
{% endblock content %}

{% block managers %}
    {% searchmanager
        id="mysearch1"
        search="index=_internal | head 1000 | stats count by source" %}
{% endblock managers %}

{% block js %}
    <script>
        var deps = [
            "splunkjs/ready!"
        ];
        require(deps, function(mvc) {
            var mychart = splunkjs.mvc.Components.getInstance("chart1");
            mychart.settings.set({
                "charting.axisTitleX.text": "My x-axis ",
                "charting.axisTitleY.text": "My y-axis ",
                "charting.legend.placement": "top",
            });
        });
    </script>
{% endblock js %}