# I can change a button label but not the color

**URL:** <https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 October 2024 09:09 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574 "2024-10-22T09:09:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucamrc](https://avatars.discourse-cdn.com/v4/letter/l/4af34b/32.png) [@lucamrc](https://discourse.nodered.org/u/lucamrc)\
**Post date:** [22 October 2024 09:09 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574/1 "2024-10-22T09:09:56Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/73517fe2a522070af3a71b1b1d9248f17af2473d.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0801482002f529ed55d7074449f0bbc30b45983.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/110840d6a1e23ab5b7d442ff65b6419bcc981b97.png)

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 09:23 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574/2 "2024-10-22T09:23:33Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d0e132df315e3671f6ead664458b2dfe9eb0b243.png)

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

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

```

---

<div class="post-metadata">

**Author:** ![gayanSandamal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gayansandamal/32/93024_2.png) [@gayanSandamal](https://discourse.nodered.org/u/gayanSandamal)\
**Post date:** [22 October 2024 10:15 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574/3 "2024-10-22T10:15:09Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![lucamrc](https://avatars.discourse-cdn.com/v4/letter/l/4af34b/32.png) [@lucamrc](https://discourse.nodered.org/u/lucamrc)\
**Post date:** [22 October 2024 12:45 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574/4 "2024-10-22T12:45:52Z")

</div>

> [@gayanSandamal](#):
>
> **Node-RED Dashboard 1.18.1**.

It seems like the problem was the version, i was running an old version of NodeRed dashboard 2 (1.12. something). I updated and now everything seems to work well. Thanks for pointing out!

---

<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:** [5 November 2024 12:46 UTC](https://discourse.nodered.org/t/i-can-change-a-button-label-but-not-the-color/92574/5 "2024-11-05T12:46:38Z")

</div>

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