How to Execute JavaScript in a Dashboard Item
Some App developers will want to execute JavaScript within a dashboard item. Due to the way the HTML in a dashboard item is handled this has to be done a specific way. What you will observe is that:
1) If the HTML returned by the dashboard item’s rest endpoint has a script tag with inline content, that content is executed and the JavaScript works as expected. 2) If the returned HTML has a script tag that references a JavaScript source file, then that script tag does not get processed. If you use your browser’s developer tools you can see that the script tag has been added to the QRadar page’s DOM, but the browser does not make a request to fetch the content of the referenced JavaScript file. This is not a QRadar bug. It’s just a consequence of the way the HTML containing the script tag is injected into the DOM.
Here’s the solution/workaround:
In the returned HTML, instead of having a script tag with a src file reference, use inline JavaScript to write a script tag directly to the DOM. In this scenario the written tag does get processed and the referenced JavaScript file content is read and executed.
So, instead of this:
<script src="{{ q_url_for('static', filename='js/dashboard.js') }}" > </script>
do this:
<script> [ "{{ q_url_for('static', filename='js/dashboard.js') }}" ].forEach(function(src) { var script = document.createElement('script'); script.src = src; document.body.appendChild(script); }); </script>
This is a sample application to show how to properly execute JavaScript in a dashboard item.