Tutorial : how to make the panel header disappear (the tab with view,edit, share,ect...)

Hello everyone,

This is a tutorial to remove the panel header, the tab with view,edit, share,ect…

image

To do this, simply add this code to a text panel:

<button onclick="myFunction()">E D I T </button>
<script>

document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';

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

var arrow = 0
function myFunction() {
  arrow = arrow ^ 1 
  
  if (arrow == 1)

{
document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';

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

}
}

</script>

I called this new mode “full viewer”

This mode can be very useful if you develop a dashboard on a touch screen (like me) so you don’t have to click a button several times when you want to access a new page (via a link on a singlestat panel)

You will therefore have a button (which you can modify as you wish afterwards) that allows you to switch between the “full viewer” mode and the “edit” mode.

Don’t forget to give me your feedback.

Thank you! Thank you!

1 Like

Have you checked out this code snippet in newer versions of Grafana? AFAIK javascript is disabled by default.

1 Like

Yes, just activate it and it works.