# Bind text in the Dashboard header

**URL:** <https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656>\
**Category:** Dashboard\
**Created:** [26 March 2020 07:09 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656 "2020-03-26T07:09:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rlamp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rlamp/32/18878_2.png) [@rlamp](https://discourse.nodered.org/u/rlamp)\
**Post date:** [26 March 2020 07:09 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/1 "2020-03-26T07:09:30Z")

</div>

I would like to display the connection status of my IoT device in the Dashboard header. I have found this [flow](https://flows.nodered.org/flow/7e4bb517ce3a75add0083642ef03e9d8) that displays date and time in the header, but I haven't found anything that would bind the header to messages. I have tried hacking this flow but with little success. Ideally there would be a node similar to ui\_text that would be displayed in the header.

Any ideas out there?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 March 2020 10:18 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/2 "2020-03-26T10:18:41Z")

</div>

Welcome to the forum

If the device is disconnected you will see this message in the editor:

 ![Screen Shot 2020-03-26 at 6.15.09 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0a50f91c37854354dc6eb315073a7fffe6147001.png)  
and this in the dashboard:  
 ![Screen Shot 2020-03-26 at 6.16.59 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3bc425cf2cdc430a7859b54bcaf80873bf890de3.png)

---

<div class="post-metadata">

**Author:** ![rlamp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rlamp/32/18878_2.png) [@rlamp](https://discourse.nodered.org/u/rlamp)\
**Post date:** [26 March 2020 10:34 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/3 "2020-03-26T10:34:39Z")

</div>

I guess I was not clear enough. I have an IoT device connected to my MQTT broker. Node-red also connects to the MQTT broker and displays the connection status between the device and the broker.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 March 2020 14:06 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/4 "2020-03-26T14:06:59Z")

</div>

Ahhh, I missed that (read before my first cup of coffee kicked in).

You could try contact in @robertsLando who wrote that flow to see if he could help or someone else might jump in and figure out how to adapt that code. I've been able to change the clock to text but can't figure out how to get something from msg.payload to appear. ☹

---

<div class="post-metadata">

**Author:** ![robertsLando](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertslando/32/6937_2.png) [@robertsLando](https://discourse.nodered.org/u/robertsLando)\
**Post date:** [26 March 2020 15:11 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/5 "2020-03-26T15:11:16Z")

</div>

If you would like to see it in all dashboards tabs you could use my flow as a base, then place an hidden template node in all tabs (in template node options place it in the body and not in the head section because if in the head it cannot receive msg inputs) in that template just set up the template node to watch for the input:

```auto
<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            // get the element from the dashoard header and change its status using normal js/html
            var elem = document.getElementById("headerStatus")
            elem.className = data.payload ? 'online' : 'offline';
        });
    })(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![rlamp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rlamp/32/18878_2.png) [@rlamp](https://discourse.nodered.org/u/rlamp)\
**Post date:** [26 March 2020 16:20 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/6 "2020-03-26T16:20:36Z")

</div>

Good enough solution for me. Thank you.  
Here is the final result.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![robertsLando](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/robertslando/32/6937_2.png) [@robertsLando](https://discourse.nodered.org/u/robertsLando)\
**Post date:** [26 March 2020 16:43 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/7 "2020-03-26T16:43:25Z")

</div>

Glad you made it. I suggest to create a flow in node red flows with it, could help other users

---

<div class="post-metadata">

**Author:** ![rlamp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rlamp/32/18878_2.png) [@rlamp](https://discourse.nodered.org/u/rlamp)\
**Post date:** [26 March 2020 19:47 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/8 "2020-03-26T19:47:55Z")

</div>

Here is the [flow](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656) if anyone will be looking for it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 April 2020 19:48 UTC](https://discourse.nodered.org/t/bind-text-in-the-dashboard-header/23656/9 "2020-04-09T19:48:03Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.