# UI\_template button - not refreshing dashboard

**URL:** <https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556>\
**Category:** Dashboard\
**Tags:** function-node, ui-template\
**Created:** [27 April 2024 21:25 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556 "2024-04-27T21:25:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Caporeira](https://avatars.discourse-cdn.com/v4/letter/c/6bbea6/32.png) [@Caporeira](https://discourse.nodered.org/u/Caporeira)\
**Post date:** [27 April 2024 21:25 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/1 "2024-04-27T21:25:08Z")

</div>

I have 3 buttons:

- inject
- ui\_button
- ui\_template

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.

 ![1714252860281](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/6478efb711e3dac460f64616384678ee5b6b194f.jpeg)  
Why is this happening and how can I fix the ui\_template button?

---

<div class="post-metadata">

**Author:** ![Caporeira](https://avatars.discourse-cdn.com/v4/letter/c/6bbea6/32.png) [@Caporeira](https://discourse.nodered.org/u/Caporeira)\
**Post date:** [29 April 2024 10:45 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/2 "2024-04-29T10:45:51Z")

</div>

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.

 ![2024-04-29 13_29_15-Windows 10 x64_Test - VMware Workstation](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13599e4e814ccb987b1fee2d5ffc061e29957895.png)

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

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [29 April 2024 10:52 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/3 "2024-04-29T10:52:50Z")

</div>

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](https://nodered.org/docs/user-guide/editor/workspace/import-export)

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 `````)

````auto
``` 
   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](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![Caporeira](https://avatars.discourse-cdn.com/v4/letter/c/6bbea6/32.png) [@Caporeira](https://discourse.nodered.org/u/Caporeira)\
**Post date:** [1 May 2024 05:23 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/4 "2024-05-01T05:23:53Z")

</div>

Thank you.  
Post is updated.  
Any idea how to fix it. Any solution?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [1 May 2024 07:06 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/5 "2024-05-01T07:06:52Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![Caporeira](https://avatars.discourse-cdn.com/v4/letter/c/6bbea6/32.png) [@Caporeira](https://discourse.nodered.org/u/Caporeira)\
**Post date:** [1 May 2024 19:52 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/6 "2024-05-01T19:52:51Z")

</div>

> [@E1cid](#):
>
> msg.socketid.

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?

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

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [1 May 2024 20:04 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/7 "2024-05-01T20:04:57Z")

</div>

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.

---

<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:** [15 May 2024 20:05 UTC](https://discourse.nodered.org/t/ui-template-button-not-refreshing-dashboard/87556/8 "2024-05-15T20:05:42Z")

</div>

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