How to use client-side code in a template

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

If you plan on running client-side code that interacts with Splunk, you'll need to use the Splunk SDK for JavaScript, which is included with the Web Framework. To illustrate how to do this, we'll show how to list your Splunk apps using JavaScript.

This example assumes you already have an app, so make sure to update the value of your_app_name in the code below.

  1. Open your app's urls.py file and insert the following line between the previous URL pattern and the closing parenthesis:
  2.     url(r'^javascriptdemo/$', 'your_app_name.views.javascriptdemo_view', name='javascriptdemo'),
  3. Open your app's views.py file and add this code for the Django view function:
  4.     @render_to('your_app_name:javascriptdemo.html')
        @login_required
        def javascriptdemo_view(request):
            return {}
    
  5. Create a new file called javascriptdemo.html in the $SPLUNK_HOME/etc/apps/your_app_name/django/your_app_name/templates/ directory, then paste the following code into it:
  6.     {% extends 'splunkdj:base_with_app_bar.html' %}
        {% block content %}
        Here are your Splunk apps:
        <div id="mycontent"></div>
        {% endblock content %}
        {% block js %}
        <script>
            require(["splunkjs/mvc"], function(mvc) {
                var service = mvc.createService();
                service.apps().fetch(function(err, apps) {
                    var list = apps.list();
                    var text = "<ul>";
                    for(var i = 0; i < list.length; i++) {
                        var app = list[i];
                        var name = app.name;
                        text += ("<li>" + name + "</li>");
                    }
                    text += "</ul>";
                    $("#mycontent").html(text);
                });
            });
        </script>
        {% endblock js %}
    

    The content block displays the results that are generated by the JavaScript, which is located in the JavaScript block:

    • We tell the Splunk SDK for JavaScript to proxy all HTTP requests through a particular path.
    • A Service instance is created to connect to Splunk. Because we required login, the Web Framework already has the login credentials (so no need to explicitly set a username and password).
    • The next JavaScript function retrieves the collection of apps, iterates through them, and constructs a string that contains the app's name, along with HTML code to display it in a list format.

    For more about using the SDK, see the example in How to connect to Splunk using the Splunk SDK for JavaScript.

  7. Save your changes to these three files, restart Splunk Web (open the http://<localhost:port>/debug/refresh URL in your web browser and click Refresh), then open the new page (http://<localhost:port>/dj/your_app_name/javascriptdemo/) in a web browser to see a list of your apps.