# Titlebar text from function

**URL:** <https://discourse.nodered.org/t/titlebar-text-from-function/26352>\
**Category:** Dashboard\
**Created:** [9 May 2020 08:52 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352 "2020-05-09T08:52:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [9 May 2020 08:52 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/1 "2020-05-09T08:52:24Z")

</div>

Hi ,please help .  
I would like to view msg.payload(from function dynamic) and time togheter in the title bar .  
please how can i do this

thank you for your help.

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [9 May 2020 09:05 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/2 "2020-05-09T09:05:26Z")

</div>

[flows (1).json](https://discourse.nodered.org/uploads/short-url/eF5aFxXPRSVOr7ZJLJ4POROFsbg.json) (46.3 KB)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [9 May 2020 09:10 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/3 "2020-05-09T09:10:54Z")

</div>

Please take a snapshot of your dashboard and mark in an image editor where exactly you want your payload to appear.

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [9 May 2020 09:14 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/4 "2020-05-09T09:14:20Z")

</div>

![node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f30b283c7c21afad9db3f91603aff83a4039e43c.jpeg)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [9 May 2020 11:58 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/5 "2020-05-09T11:58:16Z")

</div>

From that old thread - this add a clock to teh ttlebar

> [@Set a logo in the title bar?](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/5):
>
> Clock code copied over from old mailing list to here This node (ui\_template) shows the time in the top bar: [{"id":"91670c03.c29ad","type":"ui\_template","z":"96082429.7476f8","group":"951f63e6.78df","name":"Clock Toolbar","order":6,"width":"0","height":"0","format":"\<script id=\"titleScript\" type=\"text/javascript\"\>\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n var div = $('\<div/\>');\n var p = $('\<p/ id=\"clock\"\>');\n \n $('#titleScript').parent().hide(…

Which I see you may have already added - so add another - this time positioned in the middle and change the payload to be your message rather than the time.

something like

```auto
[{"id":"fe316fd6.b362d","type":"ui_template","z":"e4501ac7.9c41d8","group":"e0c3e8c1.0cc748","name":"Toolbar","order":6,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n $('#titlewords').remove();\n var toolbar = $('.md-toolbar-tools');\n var div = $('<div style=\"text-align:center; width:100%;\"/>');\n var p = $('<p/ id=\"titlewords\">');\n \n $('#titleScript').parent().hide();\n div.append(p);\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n\n // Watch the payload and update the title\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n displayTitle(data);\n });\n })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":400,"y":480,"wires":[[]]},{"id":"e0c3e8c1.0cc748","type":"ui_group","z":"","name":"Garage","tab":"f5aa47bb.2a4d68","order":2,"disp":false,"width":"10"},{"id":"f5aa47bb.2a4d68","type":"ui_tab","z":"","name":"Garage","icon":"fa-car","order":1}]

```

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [9 May 2020 12:10 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/6 "2020-05-09T12:10:19Z")

</div>

this work great ! I just want it to show up everywhere and not just in a certain group ,  
how to do it ?? Template type is in group ,when i change it it doesn't work. Thank's

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [9 May 2020 12:25 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/7 "2020-05-09T12:25:19Z")

</div>

if i refresh web page

 ![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95a623f36415d09ffe2b52ce470c90d153084e24.jpeg)  
if I give another group, then I'll come back ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1cea100aa92137c470f94c192715efc41614d4c4.jpeg)

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [10 May 2020 06:02 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/8 "2020-05-10T06:02:10Z")

</div>

Does anyone have any idea how to solve this?

---

<div class="post-metadata">

**Author:** ![Lupin\_III](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lupin_iii/32/67650_2.png) [@Lupin\_III](https://discourse.nodered.org/u/Lupin_III)\
**Post date:** [14 May 2020 18:41 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/9 "2020-05-14T18:41:18Z")

</div>

Hi, I'm still interested in it. SO if you find a solution post it please. Here you can find, for some more suggestion, what I'm achieving to do.

> [@Personalizing head bar (title bar)](https://discourse.nodered.org/t/personalizing-head-bar-title-bar/24469):
>
> Hi to all. I know that several topics like this have been already discussed, but I looked far and wide without find a solutions. Looking other post I've been able to insert a clock and a static text inside the title bar. Now I have two more needs: showing like a led inside the title bar with a text, both changing respectively color and content via msg (for example when the connection with the main device is lost, the led became red a text must show the time when the connection hung up) As bet…

---

<div class="post-metadata">

**Author:** ![ZdendaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zdendab/32/21525_2.png) [@ZdendaB](https://discourse.nodered.org/u/ZdendaB)\
**Post date:** [17 May 2020 17:55 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/10 "2020-05-17T17:55:23Z")

</div>

Thank you.

---

<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:** [16 June 2020 18:03 UTC](https://discourse.nodered.org/t/titlebar-text-from-function/26352/11 "2020-06-16T18:03:53Z")

</div>

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