Solved: Javascript basesplunkview token update problem

mathu · ‎06-18-2014

Hi

I've implemented a Splunk 6 javascript extension for a SimpleXML panel to show custom drilldown links for charts, tables, etc. The javascript dynamically inserts the link into the HTML DOM on page loading.

The extension basically works (when the page loads), but if I use dropdown tokens, my drilldown link disappears.

Here is the javascript code

define(function(require, exports, module) {
    var _ = require('underscore');
    var mvc = require('splunkjs/mvc');
    var BaseSplunkView = require("splunkjs/mvc/basesplunkview");
    require("css!./linksearch.css");

    var LinkSearch = BaseSplunkView.extend({
        options: {
            managerid: null,
            searchstring: null
        },

        initialize: function(options) {
          this.configure();
          this.$div = $('<div></div>');
          this.settings.on("change:searchstring", this.render, this);
        },

        render: function() {
          this.$div.appendTo(this.$el);
          var uri = "https://splunksh/en-US/app/example-app/";
          var searchstring = this.settings.get('searchstring');
          var query = "search?q=search%20"+encodeURIComponent(searchstring);
          var link = uri+query;
          var a = $('<a>').attr("href", link).text("Link to Details");
          a.appendTo(this.$div);
          return this;
        },
    });
    return LinkSearch;
});

and here is the Simple XML snippet

[...]
<html id="panel1">
  <h2>my panel</h2>
  <div id="htmlcontent" 
        class="splunk-view" 
        data-require="app/example-app/components/htmlcontent/linksearch" 
        data-options='{
              "managerid":    "link-manager",
              "app_name":     "example-app",
              "searchstring": "index=test source=$source$ host=$host$"
     }'/>
</html>
[...]

On a token-update, the DOM changes, but my render function does not get called.. why?

kind regards
Mathias

mathu · ‎06-19-2014

.. found the answer by myself

using double dollar signs in the simple xml and listen to the correct on-change event

[..]
this.settings.on("change:searchstring", this.render, this);
[..]


[..]
<html id="panel1">
  <div id="htmlcontent" 
        class="splunk-view" 
        data-require="app/jmx_ta/components/htmlcontent/linksearch" 
        data-options='{
            "managerid":    "link-manager",
        "app_name":     "jmx_ta",
        "searchstring": {"type": "token_safe", "value": "index=test source=$$source$$ host=$$host$$"}
     }'/>
</html>
[..]

View solution in original post

mathu · ‎06-19-2014

.. found the answer by myself

using double dollar signs in the simple xml and listen to the correct on-change event

[..]
this.settings.on("change:searchstring", this.render, this);
[..]


[..]
<html id="panel1">
  <div id="htmlcontent" 
        class="splunk-view" 
        data-require="app/jmx_ta/components/htmlcontent/linksearch" 
        data-options='{
            "managerid":    "link-manager",
        "app_name":     "jmx_ta",
        "searchstring": {"type": "token_safe", "value": "index=test source=$$source$$ host=$$host$$"}
     }'/>
</html>
[..]

ppablo · ‎06-19-2014

Hi @mathu

Glad you found your solution! Please be sure to accept your answer so other Splunk users with similar issues can refer to this post for help.

Patrick

dfoster_splunk · ‎06-18-2014

Token replacement does not work inside HTML element attributes, such as in the "data-options" attribute above.

I'd recommend instantiating the custom view manually from a JS extension instead. For example:

Simple XML snippet:

<html id="panel1">
    <div id="htmlcontent"></div>
</html>

JS Extension:

require([
    'app/example-app/components/htmlcontent/linksearch', 'jquery', 'splunkjs/ready!'
], function(LinkSearch, $, mvc) {
    new LinkSearch({
        el: $('#htmlcontent'),
        managerid: 'link-manager',
        app_name: 'example-app',
        searchstring: mvc.tokenSafe('index=test source=$source$ host=$host$')
    }).render();
});

mathu · ‎06-19-2014

There is a way to use token replacement inside HTML panels. Have a look at:
http://answers.splunk.com/answers/109260/splunk6-custom-html-visualization-not-updating-if-form-inpu...

The trick is to use type "token_safe" and two dollar signs ($$token$$) for a token replacement instead of just one ($token$)

Javascript basesplunkview token update problem

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life