How to create tokens for data binding using SplunkJS Stack

If you want to use tokens to bind values from different views, you can create tokens within tags by using the "$" escape character around individual token variables with the mvc.tokenSafe filter as follows:

value: mvc.tokenSafe("$variablename$")

This filter indicates that the value contains a token rather than literal dollar signs.

You can also pass the {tokens: true} option to a view or search manager definition to mark each property as tokens.

The following example shows a text box and a search query that share an indexName variable. When an index name is entered into the text box, the "index" property of the search query is updated with the new value, and the search is run again with the updated query:

<script>
    require([
        "splunkjs/mvc",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/textinputview",
        "splunkjs/mvc/simplexml/ready!"
    ], function(
        mvc,
        SearchManager,
        TableView,
        TextInputView
    ) {

        // Only "value" is token safe
        new TextBox({
            id: "textbox1",
            default: "main",
            value: mvc.tokenSafe("$indexName$"),
            el: $("#indexname")
        }).render();

        // Mark all properties in the search manager as token safe
        new SearchManager({
            id: "search1",
            app: "search",
            search: "index=$indexName$ | head 3"
        }, {tokens: true});
    });
</script>

Both methods of marking properties as token safe are shown:

  • The value property of the text box is marked individually as token safe using the mvc.tokenSafe filter.
  • All of the properties of the search manager are token safe using the {tokens: true} option.

The text box has a default value. As a result, this value is also the initial value of the $indexName$ token, and therefore the initial value of the index in the search query.

For more about how tokens work, see Bind data using tokens.