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
Retired

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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...