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') }}" >

do this:

[ "{{ q_url_for('static', filename='js/dashboard.js') }}" ].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;

This is a sample application to show how to properly execute JavaScript in a dashboard item.

2 comments on"Blog: How to execute JavaScript in a dashboard item"

  1. Thanks! SUPER useful information! 🙂

  2. I can’t get this to work. I have a HTML template that uses JS to draw graphs (Amcharts) that works fine as an Area item in QRadar. But when I tried to convert it to Dashboard item even using this workaround it seems like the scripts don’t load properly. The imported scripts get appended far behind the scope they get called. Any ideas why that is? Thanks!

Join The Discussion

Your email address will not be published. Required fields are marked *