I can change a button label but not the color

Dashboard
1

Hello to everyone, I'm having some problem in NodeRed dashboard 2:

I can change the label of a button sending the new label in msg.ui_update.label but not the color via msg.ui_update.buttonColor.

Any ideas on how I should proceeed?
Thanks to anyone that will help!

Below some scrrenshot and the code.

image
image741×110 6.62 KB

image

image

[
    {
        "id": "fa1b121844b992ba",
        "type": "function",
        "z": "d04688f59dc87486",
        "name": "Generate Random Color",
        "func": "function getRandomColor() {\n    var letters = '0123456789ABCDEF';\n    var color = '#';\n    for (var i = 0; i < 6; i++) {\n        color += letters[Math.floor(Math.random() * 16)];\n    }\n    return color;\n}\nmsg.payload = getRandomColor();\nreturn msg;",
        "outputs": 1,
        "timeout": "",
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1020,
        "y": 5560,
        "wires": [
            [
                "f992d7d840bfe3d1",
                "e146243fb7af13d8"
            ]
        ]
    },
    {
        "id": "672f1731ace42520",
        "type": "inject",
        "z": "d04688f59dc87486",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 790,
        "y": 5560,
        "wires": [
            [
                "fa1b121844b992ba"
            ]
        ]
    },
    {
        "id": "f992d7d840bfe3d1",
        "type": "debug",
        "z": "d04688f59dc87486",
        "name": "debug 261",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1270,
        "y": 5600,
        "wires": []
    },
    {
        "id": "7c89d852d57b2949",
        "type": "ui-button",
        "z": "d04688f59dc87486",
        "group": "ddc37e300a3739fd",
        "name": "",
        "label": "test button",
        "order": 4,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "{{msg.ui_update.color}}",
        "className": "",
        "icon": "lamp",
        "iconPosition": "right",
        "payload": "Button clicked",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "str",
        "x": 1490,
        "y": 5560,
        "wires": [
            []
        ]
    },
    {
        "id": "e146243fb7af13d8",
        "type": "change",
        "z": "d04688f59dc87486",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            },
            {
                "t": "set",
                "p": "ui_update.label",
                "pt": "msg",
                "to": "payload",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1280,
        "y": 5560,
        "wires": [
            [
                "7c89d852d57b2949"
            ]
        ]
    },
    {
        "id": "ddc37e300a3739fd",
        "type": "ui-group",
        "name": "My Group",
        "page": "44d3feb2a1143d7b",
        "width": "1",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "G1",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "44d3feb2a1143d7b",
        "type": "ui-page",
        "name": "OPC UA",
        "ui": "e0f25e8fb66a7667",
        "path": "/opcua",
        "icon": "home",
        "layout": "grid",
        "theme": "61eee6fc60281b9b",
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "e0f25e8fb66a7667",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "61eee6fc60281b9b",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#0094ce",
            "primary": "#0094ce",
            "bgPage": "#aea3a3",
            "groupBg": "#2bb828",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]```
2

Welcome to the forum @lucamrc

You need an extra line at the start of your change node to initialise msg.ui_update as an object.

image
image660×420 17.6 KB

Alternatively this seems to work in your function, without a change node:

const newcolor = getRandomColor()
msg.ui_update = {
    "buttonColor": newcolor,
    "label": newcolor
}
3

@lucamrc

I’ve tried the same flow you provided, and everything seems to be working fine on my end. I'm currently using Node-RED Dashboard 1.18.1. Could you let me know which version of the dashboard you're using?

Also, it looks like you've already found an approach, as @jbudd mentioned initializing msg.ui_update in the change node or directly in your function. If you're still facing issues, sharing your dashboard version might help us debug it further!

Looking forward to your response.