Show buttons based on global variable

Dashboard
1

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

3

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:

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