Getting Javascript to run on page load

Grafana Dashboards
15

OK…solved…ish…I got a satisfactory solution but its not exactly the original goal.

Disabling Headers/Titlebars on page load

Going off of some of @yosiasz helpful work to solve the problem, I wound up using the SVG plugin to implement my fix. The SVG plugin has a field that’ll run javascript on page load, there is a code field under Events → onHandleMetric(ctrl, svgnode)

image

The code below will successfully disable the title bars of each panel each time the page loads.

:warning:CAUTION: SINCE THIS CODE DISABLES TITLE BARS, IF YOU DON’T ALREADY HAVE A EFFECTIVE WAY TO REENABLE THEM, YOU CAN BE IN QUITE THE PICKLE AS IT HIDES YOUR ABILITY TO EDIT FIELDS.

document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';
[].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
el.style.visibility = 'hidden';});

:warning:I found that this panel has to be within field-of-view on page load otherwise it will not execute until you scroll down to it. I wound up using this limitation as a opportunity to slap a company logo header at the top of the page as a fancy SVG, it actually looks better than before.

Re-Enabling Headers/Titlebars

At the bottom of the page you will need to have a button that re-enables headers/title bars so you can make changes as a admin when needed.

Create a simple text panel and use the following code.

<center>
<input type="button" onclick="TOGGLER()" value="Show Panel Headers" id="toggler-button"/>  
</center>
  <script type="text/javascript">
  var TOGGLE = 0
  function TOGGLER() {
      document.getElementsByClassName('panel-header')[0].style.visibility = 'visible';
      [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
      el.style.visibility = 'visible';});
  }
</script>

This will give you access to the title bar (and thus the dropdown with the edit button) when you need it as a admin.

My Implementation

Here I have my company logo in the SVG plugin panel. It serves as a nice header and a mechanism to execute the desired code.

image
image1151×469 129 KB

At the bottom of my home page I have a small “Show Panel Headers” button that’ll allow me to get my headers/title bars back when I want to access the context menu features of them.

image
image790×207 16.3 KB

Thanks to @yosiasz for helping me for like the 10th time.