# UI-Template Node Dynamic Buttons

**URL:** <https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000>\
**Category:** Dashboard\
**Created:** [3 September 2023 11:46 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000 "2023-09-03T11:46:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 September 2023 11:46 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/1 "2023-09-03T11:46:53Z")

</div>

I need a set of dynamic buttons, each button will have a name from a msg input array. Clicking any button will provide an output of that button's name. The names and number of buttons will be dynamic based on the input array of names.

I am using the ui\_template node to build buttons. This part works. I need help to fix the code to output the button's name when clicked.

Here is my test flow so far:

```auto
[
    {
        "id": "cd92469bacae86bb",
        "type": "inject",
        "z": "4e84556f7bdfde3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"Alan\",\"Gaye\",\"Fred\"]",
        "payloadType": "json",
        "x": 860,
        "y": 1340,
        "wires": [
            [
                "c910ae5a503fa8a9"
            ]
        ]
    },
    {
        "id": "c910ae5a503fa8a9",
        "type": "ui_template",
        "z": "4e84556f7bdfde3f",
        "group": "f9fbe54339c329ea",
        "name": "",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "\n\n<div>\n <button ng-repeat=\"name in msg.payload\" ng-click=\"sendName(name)\">{{name}}</button>\n</div>\n\n<script>\n (function(scope) {\n scope.sendName = function(name) {\n var message = {\n payload: name\n };\n return message;\n };\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1140,
        "y": 1340,
        "wires": [
            [
                "2556190649c2e7ee"
            ]
        ]
    },
    {
        "id": "2556190649c2e7ee",
        "type": "debug",
        "z": "4e84556f7bdfde3f",
        "name": "debug 333",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1330,
        "y": 1340,
        "wires": []
    },
    {
        "id": "f9fbe54339c329ea",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "c7c16878223e2d99",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "c7c16878223e2d99",
        "type": "ui_tab",
        "name": "Test Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Alan

---

<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:** [3 September 2023 13:01 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/2 "2023-09-03T13:01:26Z")

</div>

As you are calling a function from ng-click, in the function is where you need to send the msg.

```auto
<div>
    <button ng-repeat="name in msg.payload" ng-click="sendName(name)">{{name}}</button>
</div>
<script>
    (function(scope) {
        scope.sendName = function(name) {
            var message = {
                payload: name
            };
            scope.send(message);
        };
    })(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 September 2023 13:52 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/3 "2023-09-03T13:52:14Z")

</div>

Thanks,E1cid.

Here is the Dashboard. All good.

![Screenshot 2023-09-03 at 9.41.24 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/253b4b505b948877b6e68a5c6baeb2e6f2c193e3.png)

And, when I click on the Alan Button, msg.payload looks good:

 ![Screenshot 2023-09-03 at 9.45.58 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e8834082ff4408b726ead48aab247131e052b79c.png)

But......This is what I now see on the Dashboard. Seems I did not apply the "ng-repeat" correctly for building the buttons from the names array, allowing it to run again, when a button is clicked on......

Help again please.

![Screenshot 2023-09-03 at 9.48.14 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d48c643ca3f375aa4534de15165f0a2c2ae59ea3.png)

Below is the revised code.

Alan

```auto
[
    {
        "id": "7818c08f0d04a00a",
        "type": "inject",
        "z": "4e84556f7bdfde3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"Alan\",\"Gaye\",\"Fred\"]",
        "payloadType": "json",
        "x": 900,
        "y": 1620,
        "wires": [
            [
                "9320f86d05c14296"
            ]
        ]
    },
    {
        "id": "9320f86d05c14296",
        "type": "ui_template",
        "z": "4e84556f7bdfde3f",
        "group": "f9fbe54339c329ea",
        "name": "",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "\n\n<div>\n <button ng-repeat=\"name in msg.payload\" ng-click=\"sendName(name)\">{{name}}</button>\n</div>\n<script>\n (function(scope) {\n scope.sendName = function(name) {\n var message = {\n payload: name\n };\n scope.send(message);\n };\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1180,
        "y": 1620,
        "wires": [
            [
                "1a4fa3003caec3d1"
            ]
        ]
    },
    {
        "id": "1a4fa3003caec3d1",
        "type": "debug",
        "z": "4e84556f7bdfde3f",
        "name": "debug 333",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1370,
        "y": 1620,
        "wires": []
    },
    {
        "id": "f9fbe54339c329ea",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "c7c16878223e2d99",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "c7c16878223e2d99",
        "type": "ui_tab",
        "name": "Test Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 September 2023 14:23 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/4 "2023-09-03T14:23:03Z")

</div>

I found a "hack" solution, please comment if there is a better way.

I found I could resend the name array, after a button click, to restore the buttons.

So, I built a filter to only allow a message to flow if it was in the name array. I used this to trigger a Change Node, to resend the Name Array to the ui-template node.

It works, but there must be a better way to handle this within the ui\_node script??

 ![Screenshot 2023-09-03 at 10.16.52 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4be120d766e17e20673162c476ece396bd56eca2.png)

Below is the code.

Alan

=============

```auto
[
    {
        "id": "d58da13902bab3ee",
        "type": "inject",
        "z": "3939c95af91dae0c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"Alan\",\"Gaye\",\"Fred\"]",
        "payloadType": "json",
        "x": 340,
        "y": 260,
        "wires": [
            [
                "e9d87b32705dcc3f",
                "7b6c59aa380e657b"
            ]
        ]
    },
    {
        "id": "e9d87b32705dcc3f",
        "type": "ui_template",
        "z": "3939c95af91dae0c",
        "group": "f9fbe54339c329ea",
        "name": "",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "\n\n<div>\n <button ng-repeat=\"name in msg.payload\" ng-click=\"sendName(name)\">{{name}}</button>\n</div>\n<script>\n (function(scope) {\n scope.sendName = function(name) {\n var message = {\n payload: name\n };\n scope.send(message);\n };\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 620,
        "y": 260,
        "wires": [
            [
                "9ebea481b78fc7b0"
            ]
        ]
    },
    {
        "id": "c9bfd1d96b058d73",
        "type": "change",
        "z": "3939c95af91dae0c",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "[\"Alan\",\"Gaye\",\"Fred\"]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 700,
        "y": 380,
        "wires": [
            [
                "e9d87b32705dcc3f"
            ]
        ]
    },
    {
        "id": "7b6c59aa380e657b",
        "type": "change",
        "z": "3939c95af91dae0c",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "names",
                "pt": "flow",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 620,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "9ebea481b78fc7b0",
        "type": "function",
        "z": "3939c95af91dae0c",
        "name": "name filter",
        "func": "\nvar allowedNames = flow.get(\"names\") || []; // Get the array of names from flow context\n\n// Function to filter messages\nfunction filterMessages(msg) {\n if (allowedNames.includes(msg.payload)) {\n return msg; // Message is allowed\n } else {\n return null; // Message is not allowed\n }\n}\n\n// Check if the incoming message is allowed\nif (msg.hasOwnProperty(\"payload\")) {\n msg = filterMessages(msg);\n}\n\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 810,
        "y": 260,
        "wires": [
            [
                "c9bfd1d96b058d73",
                "3f16721a7df0d16f"
            ]
        ]
    },
    {
        "id": "3f16721a7df0d16f",
        "type": "debug",
        "z": "3939c95af91dae0c",
        "name": "debug 335",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1020,
        "y": 260,
        "wires": []
    },
    {
        "id": "f9fbe54339c329ea",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "c7c16878223e2d99",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "c7c16878223e2d99",
        "type": "ui_tab",
        "name": "Test Dashboard",
        "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:** [3 September 2023 15:13 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/5 "2023-09-03T15:13:22Z")

</div>

No need for hack  
uncheck  
`Pass through messages from input.`  
and  
` Add output messages to stored state.`  
In the ui-tmemplate node.

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 September 2023 16:07 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/6 "2023-09-03T16:07:40Z")

</div>

Thanks again, E1cid

All good now. Works perfect.

Alan

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [3 September 2023 16:09 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/7 "2023-09-03T16:09:46Z")

</div>

Resolved

For others, here is the final, working flow:

Alan

```auto
[
    {
        "id": "87e9015f7b5f02a3",
        "type": "change",
        "z": "4e84556f7bdfde3f",
        "name": "Names",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "[\"Alan\",\"Gaye\",\"Fred\",\"Alice\"]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 650,
        "y": 2140,
        "wires": [
            [
                "d22016b0ba6c50e7"
            ]
        ]
    },
    {
        "id": "a1b89c895261f15a",
        "type": "debug",
        "z": "4e84556f7bdfde3f",
        "name": "debug 338",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1070,
        "y": 2140,
        "wires": []
    },
    {
        "id": "d70a982d45a12ba9",
        "type": "inject",
        "z": "4e84556f7bdfde3f",
        "name": "Trigger",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "trigger",
        "payloadType": "str",
        "x": 470,
        "y": 2140,
        "wires": [
            [
                "87e9015f7b5f02a3"
            ]
        ]
    },
    {
        "id": "d22016b0ba6c50e7",
        "type": "ui_template",
        "z": "4e84556f7bdfde3f",
        "group": "5617ace49257c9c0",
        "name": "",
        "order": 1,
        "width": "3",
        "height": "6",
        "format": "<div style=\"display: flex; flex-direction: column; align-items: center;\">\n <button ng-repeat=\"name in msg.payload\" ng-click=\"sendName(name)\"\n style=\"margin-bottom: 10px; width: 150px; height: 50px; font-size: 30px; color: red;\n background-color: yellow; border-radius: 10px;\">\n {{name}}\n </button>\n</div>\n<script>\n (function(scope) {\n scope.sendName = function(name) {\n var message = {\n payload: name\n };\n scope.send(message);\n };\n })(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 880,
        "y": 2140,
        "wires": [
            [
                "a1b89c895261f15a"
            ]
        ]
    },
    {
        "id": "5617ace49257c9c0",
        "type": "ui_group",
        "name": "Group 2",
        "tab": "c7c16878223e2d99",
        "order": 2,
        "disp": true,
        "width": "3",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c7c16878223e2d99",
        "type": "ui_tab",
        "name": "Test Dashboard",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [17 September 2023 16:09 UTC](https://discourse.nodered.org/t/ui-template-node-dynamic-buttons/81000/8 "2023-09-17T16:09:57Z")

</div>

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