Node-red-dashboard dynamic element in toolbar

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}]

Flow Info

Created 2 years, 5 months ago
Rating: not yet rated

Owner

Actions

Rate:

Node Types

Core
  • inject (x2)
Other
  • tab (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x2)

Tags

  • node-red-dashboard
  • toolbar
  • header
  • templeate
  • ui
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option