I'm struggling to effectively use a minor amount of javascript which is intended to facilitate some in-dashboard help pages, and hoping that someone might be able to help me out.
Given this javascript (in <app>/appserver/static/js/help.js):
require([
'jquery',
'splunkjs/mvc/simplexml/ready!'
], function($) {
$('#help-btn').on( 'click', function() {
$('#help').toggle();
});
$('#help-close').on( 'click', function() {
$('#help').toggle();
});
});
And this dashboard which adds a "Dashboard Help" button (next to Edit), the idea would be that simply clicking the button will toggle() the #help id, which is the panel. In "Edit" mode, I can see my overview.html panel as well as the "Dashboard Help" button, and clicking it will perform the correct action. I've used this on live dashboards as well, successfully on some and not so much on others. I imagine there's some sort of timing condition with dynamic loading and whatnot that I'm running into. Can anyone advise?
<form version="1.1" script="common_ui_util:/js/help.js">
<label>TEST</label>
<row>
<panel>
<html>
<div>
<input id="help-btn" type="button" value="Dashboard Help" style="top: -40px;" class="btn default"></input>
</div>
</html>
</panel>
</row>
<row depends="$HIDEME$">
<panel id="help">
<html>
<button id="help-close" class="help-close close close_btn"/>
</html>
<html src="html_docs/overview.html"></html>
</panel>
</row>
</form>
I've managed to solve this with an ugly hack based on this post:
Basically, I've just wrapped the entire javascript snippet with a setTimeout()...
I've managed to solve this with an ugly hack based on this post:
Basically, I've just wrapped the entire javascript snippet with a setTimeout()...
When I come up on these kinds of situations I typically use a MutationObserver as opposed to setTimeout. With setTimeout you are just hoping the element exists when the JS is run. With the MutationObserver you can be certain your JS will not run until the element exists.
I don't see how to edit my post, so I'll make a correction here. The "$HIDEME$" token appears to need to be at the panel level, not the row.
<row>
<panel id="help" depends="$HIDEME$">
There is no issue with using that token otherwise, and I have dashboards where this will work until it just stops working. My feeling is that it functions properly early in the dashboard loading process, but then stops once it's complete. My troubleshooting leads me to believe that it might be the case that using <done> conditions to set tokens on search completion is the culprit, e.g.
...
<query>
...
</query>
<earliest>0</earliest>
<latest></latest>
<done>
<condition match="$job.resultCount$ > 0">
<set token="has_notables">true</set>
</condition>
<condition>
<unset token="has_notables"></unset>
</condition>
</done>
</search>
I'm not seeing how the $HIDEME$ token is ever set. Without that being set the whole row will stay hidden as it depends on that token.
It's purposely never set. The javascript is responsible for displaying the panel instead. However, I do believe that my placement in my example was incorrect and the depends clause should be bound to the panel rather than the row.