This flow uses a script template node added to site's <head> that adds an HTML element in the top right corner in the dashboard toolbar.
Then for every tab another invisible template node is added that accepts messages and displays them inside the element in the toolbar.
My usecase was displaying mqtt connection status of my main controller in the header.
Based on flow Node-red-dashboard clock in toolbar.
| [{"id":"3bab7d86.a7d252","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a6442178.6c4f3","type":"ui_template","z":"3bab7d86.a7d252","group":"fe762942.fd8b08","name":"","order":0,"width":0,"height":0,"format":"<script>\n (function(scope) {\n scope.$watch('msg', function(data) {\n var elem = document.getElementById(\"headerStatus\")\n if(elem !== null) {\n elem.className = data.payload;\n elem.innerHTML = data.payload;\n }\n });\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":320,"y":140,"wires":[[]]},{"id":"251f3209.9dd706","type":"inject","z":"3bab7d86.a7d252","name":"","topic":"","payload":"online","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["a6442178.6c4f3"]]},{"id":"6e62b465.82538c","type":"ui_template","z":"3bab7d86.a7d252","group":"fe762942.fd8b08","name":"Header Status","order":2,"width":"0","height":"0","format":"<style>\n #headerStatus {\n font-weight: bold;\n text-transform: uppercase;\n }\n #headerStatus.online {\n color: lime;\n }\n #headerStatus.offline {\n color: tomato;\n }\n</style>\n\n<script id=\"titleScript\" type=\"text/javascript\">\n$(function() {\n if($('.md-toolbar-tools').length){\n initHeader();\n } else setTimeout(initHeader, 500)\n});\n\nfunction initHeader(){\n if (!$('#headerStatus').length) {\n var toolbar = $('.md-toolbar-tools');\n var div = $('<div/>');\n var p = $('<p id=\"headerStatus\" />');\n div[0].style.margin = '5px 5px 5px auto';\n div.append(p);\n toolbar.append(div);\n }\n}\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"global","x":140,"y":60,"wires":[[]]},{"id":"573573d6.a455fc","type":"inject","z":"3bab7d86.a7d252","name":"","topic":"","payload":"offline","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":160,"wires":[["a6442178.6c4f3"]]},{"id":"fe762942.fd8b08","type":"ui_group","z":"","name":"Default","tab":"3e55b58e.55d1e2","disp":true,"width":"6","collapse":false},{"id":"3e55b58e.55d1e2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}] |
