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

Dashboard
1

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 . I have tried many things but nothing works well.

[{"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

2

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:

<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:

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