Dashboards & Visualizations

Javascript basesplunkview token update problem

mathu
Path Finder

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

0 Karma
1 Solution

mathu
Path Finder

.. 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
Path Finder

.. 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
Community Manager
Community Manager

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

0 Karma

dfoster_splunk
Splunk Employee
Splunk Employee

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();
});
0 Karma

mathu
Path Finder

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$)

0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...