3. Add form controls to add interactivity to the page

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

Form controls include Splunk views such as radio buttons, checkboxes, dropdown lists, and text boxes. To make the search for the result table more interactive, we'll add a couple of form controls to let the user modify the search query rather than hardcoding it:

  • Use a dropdown list (a Dropdown view) to let the user select the number of results to display. Currently, the search returns three results ("head 3").
  • Display the possible source types as radio buttons (a RadioGroup view), letting the user select which source type to search on. Currently, the query is set to search on splunkd ("sourcetype=splunkd").

A typical programming process would require you to listen for changes to the form controls, manually update the search query with the new values, then run the search again. However, you can use tokens to do much of this work for you. Tokens (indicated by the "$" symbol) allow you to bind values from different views together. When the value in one place changes, the value is updated for all controls, and search managers rerun searches again by default. For more about how tokens work, see Bind data using tokens.

For our result table search, we want to:

  • Bind the head count from the dropdown list to the "head" value in the search query. We'll use $headcount$ as the token.
  • Bind the source type from the radio button selection to the "sourcetype" value in the search query. We'll use $sourcetype$ as the token.

Now let's set this all up in the template.

  1. In a text editor, open page1.html from the app's templates directory ($SPLUNK_HOME/etc/apps/mydjangoapp/django/mydjangoapp/templates/).
  2. We need to add the Dropdown and RadioGroup views to the page. As usual, we'll need to set a unique ID for each view.
  3. Replace the content block with the following (remember that the views are displayed in the order they are defined):

    {% block content %}
        {% dropdown id="drop_headcount" %}
        {% radiogroup id="radio_sourcetype"%}
        {% table id="table_searchresults" managerid="search_resulttable" %}
        {% chart id="chart_sourcetype" managerid="search_chart" type="pie" %}
    {% endblock content%}
    
  4. Save your changes, then view the page in Splunk by going to http://<localhost:port>/dj/mydjangoapp/page1. We have a blank dropdown list and one empty radio button, indicating we need to set up the choices for each view.
  5. Let's set up the dropdown list choices first. We'll just allow the user to choose 1, 2, or 3 results to keep this simple. Look at the reference for the Dropdown view; you'll see all the possible properties for this view, including choices and default value. The choices must be defined in JavaScript using the SplunkJS Stack component of the Web Framework, but we can set the default value to 1 in the {% dropdown %} template tag.
  6. Replace the {% dropdown %} template tag with the following:

    {% dropdown id="drop_headcount" default="1" %}
    

    Now to set the choices in JavaScript. Find the JavaScript block and replace it with the following:

    {% block js %}
        <script>
            // Load the required libraries--in this case, the SplunkJS Stack and radio buttons
            var deps = [
                "splunkjs/ready!",
                "splunkjs/mvc/radiogroupview"
            ];
            require(deps, function(mvc) {
                // Define a dictionary of choices for the dropdown list
                var choices_headcount = [
                    {label:"1", value: "1"},
                    {label:"2", value: "2"},
                    {label:"3", value: "3"}
                ];
                // Set the choices into the dropdown list
                splunkjs.mvc.Components.getInstance("drop_headcount").settings.set("choices", choices_headcount);
            });
        </script>
    {% endblock js %}
    

    This is the only JavaScript we'll use in this tutorial. Basically, the code loads the libraries for Splunk and the RadioGroup view specifically, defines the dictionary of choices, then plugs that into the choices property of our RadioGroup view ("drop_headcount"). You can learn more by reading up on the SplunkJS Stack component of the Web Framework.

  7. Save your changes, then view the page in Splunk by going to http://<localhost:port>/dj/mydjangoapp/page1. You'll see we have a dropdown list that is populated with our choices, and "1" is selected by default.
  8. Let's set up the radio button choices with source types. Look at the reference for the RadioGroup view, showing the possible properties. We could manually create a dictionary of all the source types we think are possible, but a better way would be to create a search that populates the choices for us. We'll use this search query, which returns the top source types from the first 1000 results:
  9. search index=_internal | head 1000 | top sourcetype
    

    To create a SearchManager for this populating search, add the following code to the managers block:

        {% searchmanager
            id="search_sourcetypes"
            search="index=_internal | head 1000 | top sourcetype"
            cache=True
        %}
    

    Now we need to link this search to our radio buttons by setting the managerid property of the RadioGroup view to the search ID, "search_sourcetypes". By doing that, the RadioGroup view has access to the sourcetype field returned by the search, so we can set the labels and values of the radio buttons to this field. And we will set the default value to "splunkd".

    Replace the {% radiogroup %} template tag with the following:

        {% radiogroup id="radio_sourcetype" managerid="search_sourcetypes"
              labelField="sourcetype" valueField="sourcetype"
              default="splunkd"%}
    
  10. Save your changes, then view the page in Splunk by going to http://<localhost:port>/dj/mydjangoapp/page1. You'll see the radio buttons correspond to source types now.
  11. App with form inputs

    The dropdown and radio button choices have no effect yet because they aren't hooked up to the search. Let's do that now. We'll update the search query string to use the token values $headcount$ and $sourcetype$.

  12. Find the SearchManager for the result table search and replace it with the following:
  13.     {% searchmanager
            id="search_resulttable"
            search="index=_internal sourcetype=$sourcetype$ | head $headcount$"|token_safe
            cache=True
        %}
    

    Note the token_safe filter―this tells Splunk that the "$" characters indicate tokens, not literal dollar signs.

    Next, we'll update the Dropdown and RadioGroup views by setting their value properties to the token values. Find the Dropdown and RadioGroup views and replace them with the following code:

        {% dropdown id="drop_headcount" default="1" value="$headcount$"|token_safe %}
        {% radiogroup id="radio_sourcetype" managerid="search_sourcetypes"
               labelField="sourcetype" valueField="sourcetype"
               value="$sourcetype$"|token_safe
               default="splunkd"%}
    
  14. Save your changes, then view the page in Splunk by going to http://<localhost:port>/dj/mydjangoapp/page1. Try to select different result counts and source types. Each time you change a value, the search runs again and updates the results table.
  15. Finally, let's clean up the views―we can set a few properties to do this:
    • Remove the "x" from the dropdown list by setting showClearButton to False.
    • Disable drilldown functionality on the pie chart by setting drilldown to "none". (This setting prevents Splunk from opening the Search app whenever you click the pie chart.)

    Remember to consult the Splunk Web Framework Component Reference to find out which properties, methods, and events you can use with search managers and views.

    Go ahead and add those properties, then save the file. By now, your content and manager blocks should look like this:

    {% block content %}
        {% dropdown id="drop_headcount" default="1"
               value="$headcount$"|token_safe showClearButton=False %}
        {% radiogroup id="radio_sourcetype" managerid="search_sourcetypes"
               labelField="sourcetype" valueField="sourcetype"
               value="$sourcetype$"|token_safe
               default="splunkd"%}
        {% table id="table_searchresults" managerid="search_resulttable" %}
        {% chart id="chart_sourcetype" managerid="search_chart" type="pie"
               drilldown="none" %}
    {% endblock content%}
    
    {% block managers %}
        {% searchmanager
            id="search_resulttable"
            search="index=_internal sourcetype=$sourcetype$ | head $headcount$"|token_safe
            cache=True
        %}
        {% searchmanager
            id="search_chart"
            search="index=_internal | head 1000 | stats count by sourcetype"
            cache=True
        %}
        {% searchmanager
            id="search_sourcetypes"
            search="index=_internal | head 1000 | top sourcetype"
            cache=True
        %}
    {% endblock managers %}
    

The searches and views are working now, but the layout leaves room for improvement. Continue to 4. Lay out the page.