# How to change Dashboard names in the title bar via msg.payload

**URL:** <https://discourse.nodered.org/t/how-to-change-dashboard-names-in-the-title-bar-via-msg-payload/18511>\
**Category:** Dashboard\
**Created:** [27 November 2019 13:09 UTC](https://discourse.nodered.org/t/how-to-change-dashboard-names-in-the-title-bar-via-msg-payload/18511 "2019-11-27T13:09:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torsten](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@Torsten](https://discourse.nodered.org/u/Torsten)\
**Post date:** [27 November 2019 13:09 UTC](https://discourse.nodered.org/t/how-to-change-dashboard-names-in-the-title-bar-via-msg-payload/18511/1 "2019-11-27T13:09:55Z")

</div>

Hi Guys,

I look for an easy way to change the name in the dashboard Titlebar via msg.playload.  
Based on these example [https://discourse.nodered.org/t/button-in-topbar/6377/6](https://discourse.nodered.org/t/button-in-topbar/6377/6) . I have tried many things but nothing works well.

```auto
[{"id":"676a7945.843a88","type":"ui_template","z":"780ed514.5cfbac","group":"521f88b6.9d5e48","name":"Logo / Clock","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n\n $(function () {\n if (clockInterval) return;\n\n //add logo\n var div2 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/logo.png'\n logo.height = 45;\n div2[0].style.margin = '10px auto';\n\n div2.append(logo);\n\n //add clock\n var div3 = $('<div/>');\n var p = $('<p/>');\n\n div3.append(p);\n div3[0].style.margin = '5px';\n \n //add Location\n var div1 = $('<div/>');\n var pLocation = $('<p name=\"location\"/>');\n \n pLocation.text(\"- \");\n div1.append(pLocation);\n div1[0].style.margin = '5px';\n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n //add to toolbar when it's available\n var addToToolbarTimer;\n \n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n \n if(!toolbar.length) return;\n \n toolbar.append(div1);\n toolbar.append(div2);\n toolbar.append(div3);\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":590,"y":220,"wires":[[]]},{"id":"87f17d0d.06499","type":"inject","z":"780ed514.5cfbac","name":"","topic":"","payload":"Hello Test ;)","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"20","x":330,"y":280,"wires":[["22a9be4d.0ff092"]]},{"id":"22a9be4d.0ff092","type":"ui_template","z":"780ed514.5cfbac","group":"521f88b6.9d5e48","name":"Location","order":4,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<script>\n(function($scope) {\n \n$scope.$watch('msg.payload', function() {\n console.log($scope.msg.payload);\n var pLocation = document.getElementsByName('location')[0];\n console.log(ploc);\n pLocation.innerHTML = $scope.msg.payload;\n});\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":280,"wires":[[]]},{"id":"521f88b6.9d5e48","type":"ui_group","z":"","name":"Test Group","tab":"816421c7.c7446","order":1,"disp":true,"width":"6","collapse":false},{"id":"816421c7.c7446","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

These is the working code, but here I must insert ui\_template “Location” in each tab to get the pLocation in the title bar. If I change the Template type to “Added to site section” it will not work anymore.

Thank you for your help

---

<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:** [21 March 2020 13:10 UTC](https://discourse.nodered.org/t/how-to-change-dashboard-names-in-the-title-bar-via-msg-payload/18511/2 "2020-03-21T13:10:46Z")

</div>

Hi, I have the same problem. Did someone manage it?  
I found a half solution. Actually, I have two needs: set like a led inside the title bar and a text, changing respectively color and content via msg.  
Now, I'm able to change the led color using CSS custom properties (variables), like:

```auto
<style>
:root {
  --main-bg-color: {{ms.color}};
}
.status-bar {
background-color: var(--led_bar_color);
border-radius: 50%;
}
</style>

```

The problem is that this solution works only for the tab of the template node conteining the CSS. Infact, in order to make it works I have to set the template type property as "widget in group". If I set it as "added to site head section" it doesn't work, as well as if I put the style section in the same template that I use for modifying the title bar, adding a clock, and set as head section.  
So, finally with this solution, when I move to other tabs the led disappear.

Regarding the text value, I haven't found any solution jet. I even tryed wit the same approach but the CSS custom properties variables seems not working in this case. Like:

```auto
<style>
:root {
 --new-text: {{ms.text}};
}
.pvw-text:after {
  content: var(--new-text);
}
</style>

```