Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- JavaScript not working when using multiple tokens
- 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 guys,
I am currently struggling with making JS work at dashboard. My idea is to have a line graph with some data and add another line based on button clicked. I have set of buttons in html. When clicked, it calls JS function and changes token (token_foo) value to given string, which is then used in graph search. Well, this part works just fine. Until...
Now let's say I would like to color these buttons based on other tokens. Once I do it, buttons get the right color, but suddenly refuse to call the JS function. The same happens when I try to display token value by <p>$foo_color$</p>.
Shortened XML code:
<row>
<panel>
<html>
<input type="button" id="foo" value="Foo" style="background-color:$foo_color$"/>
<input type="button" id="boo" value="Boo" style="background-color:$boo_color$"/>
</html>
</panel>
</row>
<row>
<panel>
<event>
<search>
<done>
<condition match="'job.resultCount' == 0">
<set token="foo_color">#00FF00</set>
</condition>
<condition match="'job.resultCount' > 0">
<set token="foo_color">#FF0000</set>
</condition>
</done>
<query>index="foo_index"</query>
<earliest>$time_picker.earliest$</earliest>
<latest>$time_picker.latest$</latest>
</search>
<option name="list.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</event>
</panel>
</row>
What am I missing?
Thanks.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Managed to sort it out by using more js and css.
In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.
Shortened example in js:
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
$("#foo").addClass('faulty');
} else if ($("#foo").hasClass('faulty')) {
$("#foo").removeClass('faulty');
}
});
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Managed to sort it out by using more js and css.
In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.
Shortened example in js:
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
$("#foo").addClass('faulty');
} else if ($("#foo").hasClass('faulty')) {
$("#foo").removeClass('faulty');
}
});
Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!
Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.
Make Your Machine Data AI-Ready in Splunk
Splunk Asynchronous Forwarding Explained
How to Monitor AI Agents with Splunk Agent Observability
