Dynamic change of background in the button node

I'm not able to make this running. What am I doing wrong? Pls help!

[
    {
        "id": "ac065458f1f91998",
        "type": "function",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "function 2",
        "func": "// Annahme: msg.payload enthält einen Wert, z.B. 0 oder 1\n\nif (msg.payload === 1) {\n    msg.ui_update = {\n        \"class\": \"my-green-class\"\n    };\n} else {\n    msg.ui_update = {\n        \"class\": \"my-red-class\"\n    };\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 460,
        "wires": [
            [
                "86dfeed22a7a9fa9",
                "647a8c848f386b3e"
            ]
        ]
    },
    {
        "id": "c262ccaed06db7a3",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 190,
        "y": 420,
        "wires": [
            [
                "ac065458f1f91998"
            ]
        ]
    },
    {
        "id": "ec1fbdcc746eb270",
        "type": "inject",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 190,
        "y": 460,
        "wires": [
            [
                "ac065458f1f91998"
            ]
        ]
    },
    {
        "id": "647a8c848f386b3e",
        "type": "debug",
        "z": "8ea5dbdfb7c2ac3f",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 580,
        "y": 520,
        "wires": []
    },
    {
        "id": "d8cd8ecf5cec9f9a",
        "type": "ui-template",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "",
        "page": "",
        "ui": "2bcd223180e211a8",
        "name": "Templates Elemente",
        "order": 3,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "//Button Hintergrund rot\n.my-red-class button.v-btn {\n    background-color: #F44336 !important;\n}\n\n//Button Hintergrund grün\n.my-green-class button.v-btn {\n    background-color: #26A69A !important;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 420,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "86dfeed22a7a9fa9",
        "type": "ui-button",
        "z": "8ea5dbdfb7c2ac3f",
        "group": "1b852b09893fdafc",
        "name": "",
        "label": "neuer Text",
        "order": 1,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "test",
        "icon": "access-point",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 590,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "2bcd223180e211a8",
        "type": "ui-base",
        "name": "Mein Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "1b852b09893fdafc",
        "type": "ui-group",
        "name": "Templates & Tests",
        "page": "dd776574ec954a62",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "dd776574ec954a62",
        "type": "ui-page",
        "name": "Template & Test",
        "ui": "2bcd223180e211a8",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "1cbfd3a7a1359037",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "5"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "1cbfd3a7a1359037",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#097479",
            "primary": "#0094ce",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "6951fe679329527a",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.0"
        }
    }
]

Sorry, not the PERFECT solution, but this works.

[
    {
        "id": "a1d0ccd31d5c38f6",
        "type": "change",
        "z": "b39000460508d582",
        "name": "Normal",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.label",
                "pt": "msg",
                "to": "PASS",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "blue",
                "tot": "str"
            },
            {
                "t": "delete",
                "p": "payload",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 5020,
        "y": 880,
        "wires": [
            [
                "f31c626999eff100"
            ]
        ]
    },
    {
        "id": "f7ee0d6fc94c0383",
        "type": "change",
        "z": "b39000460508d582",
        "name": "Hold",
        "rules": [
            {
                "t": "set",
                "p": "ui_update.label",
                "pt": "msg",
                "to": "HOLD",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "ui_update.buttonColor",
                "pt": "msg",
                "to": "red",
                "tot": "str"
            },
            {
                "t": "delete",
                "p": "payload",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 5010,
        "y": 920,
        "wires": [
            [
                "f31c626999eff100"
            ]
        ]
    },
    {
        "id": "f31c626999eff100",
        "type": "ui-button",
        "z": "b39000460508d582",
        "group": "1b852b09893fdafc",
        "name": "Hold",
        "label": "",
        "order": 5,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "X",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 5190,
        "y": 880,
        "wires": [
            []
        ]
    },
    {
        "id": "c31f26c6c17d7a28",
        "type": "inject",
        "z": "b39000460508d582",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 4860,
        "y": 880,
        "wires": [
            [
                "a1d0ccd31d5c38f6"
            ]
        ]
    },
    {
        "id": "2e4e3cb03d97be32",
        "type": "inject",
        "z": "b39000460508d582",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 4860,
        "y": 920,
        "wires": [
            [
                "f7ee0d6fc94c0383"
            ]
        ]
    },
    {
        "id": "1b852b09893fdafc",
        "type": "ui-group",
        "name": "Templates & Tests",
        "page": "dd776574ec954a62",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "dd776574ec954a62",
        "type": "ui-page",
        "name": "Template & Test",
        "ui": "379027033ed5c83a",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "1cbfd3a7a1359037",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "5"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "379027033ed5c83a",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "1cbfd3a7a1359037",
        "type": "ui-theme",
        "name": "Standardthema",
        "colors": {
            "surface": "#097479",
            "primary": "#0094ce",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Sorry the text will be corrupted.

After a lot of digging, I don't know what you are trying to do is supported.
But I'm not an expert.

Both rules in your CSS template are invalidated by you using javascript style comment lines.

//Button Hintergrund rot
.my-red-class button.v-btn {
    background-color: #F44336 !important;
}

//Button Hintergrund grün
.my-green-class button.v-btn {
    background-color: #26A69A !important;
}

Change it to C style comments /* ... */ and get rid of !important

/*Button Hintergrund rot*/
.my-red-class button.v-btn {
    background-color: #F44336;
}

/*Button Hintergrund grün */
.my-green-class button.v-btn {
    background-color: #26A69A;
}

You might argue that the ui-template node should be smart enough to fix such glitches automatically, especially since the // syntax does not raise an editor error.
It could also be smart enough to cope with a CSS template which erroneously contains <style> tags too.

Finally: I believe the "official" advice for changing the background-color of a button is to use msg.ui_update = {"buttonColor": "skybluepink"}.
Personally I think changing the class is preferable since you might want to style other attributes at the same time.

1 Like

@AloisBachmeier, yes, that is the easy way to do it for those not comfortable using CSS. See the help text for the button node in the editor for all the other parameters that can be adjusted dynamically.