Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Javascript basesplunkview token update problem
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
.. 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>
[..]
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
.. 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>
[..]
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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();
});
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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$)
Tech Talk Recap | Mastering Threat Hunting
Observability for AI Applications: Troubleshooting Latency
Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?
