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.
Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas
What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)
Automating Threat Operations and Threat Hunting with Recorded Future
