# Show buttons based on global variable

**URL:** <https://discourse.nodered.org/t/show-buttons-based-on-global-variable/97483>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 June 2025 14:42 UTC](https://discourse.nodered.org/t/show-buttons-based-on-global-variable/97483 "2025-06-08T14:42:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [8 June 2025 14:42 UTC](https://discourse.nodered.org/t/show-buttons-based-on-global-variable/97483/1 "2025-06-08T14:42:08Z")

</div>

Hello!

I am working on a project using Node-RED and Dashboard 2.0.  
I am trying to dynamically display buttons in a ui-template node, based on a global variable.

Unfortunately, the buttons are not displayed in the dashboard, and I can't figure out why this isn't working.

The global variable contains this array of objects:

`[{ "5": 0, "7": 0, "9": 0, "name": "test1" }, { "3": 130, "4": 0, "5": 112, "7": 8, "8": 40, "name": "test2" }]`

The idea is that for each object (in this case 2) a button is displayed with the text of the name.  
And as soon as that button is clicked, that entire object should be sent to my debug node.

Does anyone know how I can make this work?

Greetings,  
Justin

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [8 June 2025 16:24 UTC](https://discourse.nodered.org/t/show-buttons-based-on-global-variable/97483/3 "2025-06-08T16:24:14Z")

</div>

When you set the button properties in the global var, you should also update the template accordingly. So set a message listener in your template, and send messages with the button property updates into the template's data model.  
For each button click, just send its properties from the data model. See below example:

```auto
[
    {
        "id": "5b31a6cc6803c588",
        "type": "inject",
        "z": "c13589f7d02d4ffe",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "color",
                "v": "red",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "button1",
        "payloadType": "str",
        "x": 170,
        "y": 720,
        "wires": [
            [
                "49bc13f5071e061e"
            ]
        ]
    },
    {
        "id": "49bc13f5071e061e",
        "type": "ui-template",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div>\n <v-btn id=\"button1\" :color=\"button1.color\" @click=\"sendButtonProps('button1')\">Button1</v-btn>&nbsp;\n <v-btn id=\"button2\" :color=\"button2.color\" @click=\"sendButtonProps('button2')\">Button2</v-btn>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n button1: {color:\"grey\"},\n button2: {color:\"cyan\"}\n }\n },\n methods: {\n sendButtonProps: function (buttonId) {\n this.send({buttonId:buttonId,payload:this[buttonId]})\n }\n },\n mounted() {\n const $scope = this;\n \n // Socket listener\n $scope.$socket.on('msg-input:' + this.id, function(msg) {\n $scope[msg.payload].color = msg.color;\n });\n }\n }\n \n</script>\n",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 300,
        "y": 720,
        "wires": [
            [
                "f6c668f7685d4379"
            ]
        ]
    },
    {
        "id": "f6c668f7685d4379",
        "type": "debug",
        "z": "c13589f7d02d4ffe",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 460,
        "y": 720,
        "wires": []
    },
    {
        "id": "be4cdfe0774dbbc6",
        "type": "ui-group",
        "name": "Group 1",
        "page": "c81900ecf6761ebb",
        "width": "4",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "c81900ecf6761ebb",
        "type": "ui-page",
        "name": "Dashboard-Test",
        "ui": "b7fd8a2cce8052cc",
        "path": "/test",
        "icon": "home",
        "layout": "grid",
        "theme": "b7b1935fbb33bbc8",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b7fd8a2cce8052cc",
        "type": "ui-base",
        "name": "ui",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-dropdown",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 5,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "b7b1935fbb33bbc8",
        "type": "ui-theme",
        "name": "Default theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<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:** [8 July 2025 16:24 UTC](https://discourse.nodered.org/t/show-buttons-based-on-global-variable/97483/4 "2025-07-08T16:24:18Z")

</div>

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