I have 3 buttons:
Using these buttons, I send an integer value. Another function interprets the sent value and changes the color of an object in the Dashboard depending on the value.
With the first two buttons, the color changes immediately. However, after pressing the ui_template button, the color changes only after manually reloading the Dashboard page or sometimes the color does not change at all.
UPDATE:
If the buttons and the second object are not in the same group, the page must be manually reloaded for the changes to take effect.
Or if I open two the same sites and click a button, status will change only on active page.
[
{
"id": "d4dd4879280136e6",
"type": "ui_template",
"z": "8d0978fa5349c413",
"group": "group-id",
"name": "Start",
"order": 3,
"width": 3,
"height": 3,
"format": "<md-button class=\"filled touched bigfont rounded vibrate\" style=\"background-color:#27ae60\" ng-click=\"send({payload: 0})\">\n Start\n</md-button>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 150,
"y": 180,
"wires": [
[
"ddaf43b85f306f63"
]
]
},
{
"id": "e84eeb9b5e521f70",
"type": "ui_template",
"z": "8d0978fa5349c413",
"group": "group-id",
"name": "Stop",
"order": 6,
"width": 3,
"height": 2,
"format": "\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#616A6B\" ng-click=\"send({payload: 1})\"> \n Stop<br/>\n</md-button> \n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 150,
"y": 240,
"wires": [
[
"ddaf43b85f306f63"
]
]
},
{
"id": "ddaf43b85f306f63",
"type": "function",
"z": "8d0978fa5349c413",
"name": "set Status Info",
"func": "\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 360,
"y": 280,
"wires": [
[
"c80d3a2bdff2d549"
]
]
},
{
"id": "c80d3a2bdff2d549",
"type": "ui_template",
"z": "8d0978fa5349c413",
"group": "group-id",
"name": "Status",
"order": 2,
"width": 6,
"height": 2,
"format": "<div id=\"rectangle\" style=\"width: 300px; height: 50px; background-color: {{msg.color}};\">\n {{msg.payload}}\n</div>\n<style>\n#rectangle {\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n font-size: 32px; /* Zwiększanie wielkości czcionki */\n font-weight: bold; /* Pogrubienie tekstu */\n}\n</style>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (!msg) return;\n var element = document.getElementById(\"rectangle\");\n switch(msg.payload) {\n case 0:\n element.style.backgroundColor = \"green\";\n break;\n case 1:\n element.style.backgroundColor = \"black\";\n break;\n }\n });\n})(scope);\n</script>\n",
"storeOutMessages": false,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 630,
"y": 240,
"wires": [
[]
]
},
{
"id": "9263dd736e674892",
"type": "ui_button",
"z": "8d0978fa5349c413",
"name": "",
"group": "group-id",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"label": "start",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "0",
"payloadType": "num",
"topic": "topic",
"topicType": "msg",
"x": 150,
"y": 360,
"wires": [
[
"ddaf43b85f306f63"
]
]
},
{
"id": "812d4257ae6faa58",
"type": "ui_button",
"z": "8d0978fa5349c413",
"name": "",
"group": "group-id",
"order": 24,
"width": 0,
"height": 0,
"passthru": true,
"label": "stop",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "1",
"payloadType": "num",
"topic": "topic",
"topicType": "msg",
"x": 150,
"y": 420,
"wires": [
[
"ddaf43b85f306f63"
]
]
},
{
"id": "group-id",
"type": "ui_group",
"name": "Default",
"tab": "tab-id",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "tab-id",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Hi and welcome.
Have you tried unchecking all but refresh on reload at bottom of config.
If this does not fix issue can you export a minimal example of this flow. How to import/export a flow
In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)
```
code goes here
```
You can edit and correct your post by clicking the pencil 
icon.
See this post for more details - How to share code or flow json
Thank you.
Post is updated.
Any idea how to fix it. Any solution?
Not understanding about the different groups as the flow you posted is one group.
To get the other browser tab to update you need to delete msg.socketid.
e.g.
[{"id":"d4dd4879280136e6","type":"ui_template","z":"d1395164b4eec73e","group":"group-id","name":"Start","order":3,"width":3,"height":3,"format":"<md-button class=\"filled touched bigfont rounded vibrate\" style=\"background-color:#27ae60\" ng-click=\"send({payload: 0})\">\n Start\n</md-button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":7740,"wires":[["ddaf43b85f306f63","6ea4be9f2252b860"]]},{"id":"ddaf43b85f306f63","type":"function","z":"d1395164b4eec73e","name":"set Status Info","func":"delete msg.socketid\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":660,"y":7840,"wires":[["c80d3a2bdff2d549"]]},{"id":"6ea4be9f2252b860","type":"debug","z":"d1395164b4eec73e","name":"debug 2520","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":7720,"wires":[]},{"id":"e84eeb9b5e521f70","type":"ui_template","z":"d1395164b4eec73e","group":"group-id","name":"Stop","order":6,"width":3,"height":2,"format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#616A6B\" ng-click=\"send({payload: 1})\"> \n Stop<br/>\n</md-button> \n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":7800,"wires":[["ddaf43b85f306f63"]]},{"id":"9263dd736e674892","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"group-id","order":3,"width":0,"height":0,"passthru":true,"label":"start","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"topic","topicType":"msg","x":450,"y":7920,"wires":[["ddaf43b85f306f63"]]},{"id":"812d4257ae6faa58","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"group-id","order":24,"width":0,"height":0,"passthru":true,"label":"stop","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"num","topic":"topic","topicType":"msg","x":450,"y":7980,"wires":[["ddaf43b85f306f63"]]},{"id":"c80d3a2bdff2d549","type":"ui_template","z":"d1395164b4eec73e","group":"group-id","name":"Status","order":2,"width":6,"height":2,"format":"<div id=\"rectangle\" style=\"width: 300px; height: 50px; background-color: {{msg.color}};\">\n {{msg.payload}}\n</div>\n<style>\n#rectangle {\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n font-size: 32px; /* Zwiększanie wielkości czcionki */\n font-weight: bold; /* Pogrubienie tekstu */\n}\n</style>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (!msg) return;\n var element = document.getElementById(\"rectangle\");\n switch(msg.payload) {\n case 0:\n element.style.backgroundColor = \"green\";\n break;\n case 1:\n element.style.backgroundColor = \"black\";\n break;\n }\n });\n})(scope);\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":930,"y":7800,"wires":[[]]},{"id":"group-id","type":"ui_group","name":"Default","tab":"tab-id","order":1,"disp":true,"width":"6","collapse":false},{"id":"tab-id","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Thank you very much; it's working, brilliant 
I have a similar question: When I click twice on the Error button, why does it show only one entry in the table, and after a manual refresh, why does it show both entries?
[{"id":"471994f81dc05b58","type":"ui_table","z":"8d0978fa5349c413","group":"group-id","name":"MessagesTable","order":22,"width":"0","height":"0","columns":[{"field":"timestamp","title":"Date / Time","width":"","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"message","title":"Message","width":"","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":800,"y":480,"wires":[]},{"id":"345ff202eb8658fd","type":"debug","z":"8d0978fa5349c413","name":"debug 2521","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":780,"y":520,"wires":[]},{"id":"8aa0b57b96b18d73","type":"function","z":"8d0978fa5349c413","name":"updateTable","func":"var timestamp = new Date().getTime();\nvar date = new Date(timestamp);\nvar readableDate = date.toLocaleString();\n\nvar messageContent = \"Error\";\n\nvar newRow = {\n timestamp: readableDate,\n message: messageContent\n};\n\nvar messages = flow.get('messages') || [];\n\nmessages.unshift(newRow);\n\nif (messages.length > 5) {\n messages.length = 5;\n}\n\nflow.set('messages', messages);\n\nmsg.payload = messages;\n\nvar controlMsg = {ui_control: {callback: \"update\"}};\ndelete msg.socketid\nreturn [msg, controlMsg];","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":520,"wires":[["471994f81dc05b58","345ff202eb8658fd"]]},{"id":"43ed59b3babe136a","type":"function","z":"8d0978fa5349c413","name":"resetTable","func":"flow.set('messages', []);\nmsg.payload = [];\ndelete msg.socketid\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":480,"wires":[["471994f81dc05b58"]]},{"id":"634583e49ca39726","type":"link in","z":"8d0978fa5349c413","name":"link in 4","links":["3e9c8b726253b695"],"x":455,"y":520,"wires":[["8aa0b57b96b18d73"]]},{"id":"e39debd06002e510","type":"ui_template","z":"8d0978fa5349c413","group":"group-id","name":"Reset","order":10,"width":3,"height":1,"format":"<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#616A6B\" ng-click=\"send({payload: 'Hello World'})\"> \n Reset<br/>\n</md-button> \n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":430,"y":480,"wires":[["43ed59b3babe136a"]]},{"id":"8365569f07a9e36f","type":"ui_template","z":"8d0978fa5349c413","group":"group-id","name":"Error","order":2,"width":3,"height":3,"format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#c0392b\" ng-click=\"send({payload: 2})\"> \n Error<br/>\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":210,"y":520,"wires":[["3e9c8b726253b695"]]},{"id":"3e9c8b726253b695","type":"link out","z":"8d0978fa5349c413","name":"link out 6","mode":"link","links":["634583e49ca39726"],"x":305,"y":520,"wires":[]},{"id":"group-id","type":"ui_group","name":"Default","tab":"tab-id","order":1,"disp":true,"width":"6","collapse":false},{"id":"tab-id","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
If you have a solution to your issue, please mark the solution for other in the future.
If you have a new question about ui-table please start a new topic. This is so others may search and find solutions to their issues, and not have to trawl through topics were questions are tacked on but not relevant.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy