# Dashboard 2.0 - Dynamically change group color

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692>\
**Category:** Dashboard\
**Created:** [20 February 2024 09:49 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692 "2024-02-20T09:49:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [20 February 2024 09:49 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/1 "2024-02-20T09:49:20Z")

</div>

Hello everyone,

I've recently started using Dashboard 2.0 and was trying to dynamically change a group color.  
I'm using the same method as for D1.0 but it doesn't seem to work (using {{msg.payload}}).

Could someone direct me to the correct syntax ?

Here is a simple flow to demonstrate what I did :

```auto
[
    {
        "id": "6943e32d5f3cd3f3",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "red",
        "payloadType": "str",
        "x": 710,
        "y": 360,
        "wires": [
            [
                "18f7d68d73bd84b9"
            ]
        ]
    },
    {
        "id": "bf894aad5f1935e7",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "green",
        "payloadType": "str",
        "x": 710,
        "y": 400,
        "wires": [
            [
                "18f7d68d73bd84b9"
            ]
        ]
    },
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "38d13818ed4d88d2",
        "group": "",
        "page": "48a544354c74af1f",
        "ui": "",
        "name": "red or green",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<style>\n\n /* All .v-card's inside a group */\n .nrdb-ui-group.ClassTest .v-card {\n border-width: 10px;\n background-color: {{msg.payload}} !important ;\n}\n\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:page",
        "className": "",
        "x": 870,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "822ba01fa06fdbf0",
        "type": "ui-text",
        "z": "38d13818ed4d88d2",
        "group": "b52a3d06df21b65f",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Test",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 850,
        "y": 460,
        "wires": []
    },
    {
        "id": "3ff3d65c9acfbf59",
        "type": "inject",
        "z": "38d13818ed4d88d2",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "Hello !",
        "payloadType": "str",
        "x": 710,
        "y": 460,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "f4139e7488bf5f07",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

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

Thanks in advance !

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 February 2024 10:19 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/2 "2024-02-20T10:19:36Z")

</div>

you can setup up styles and then dynamically set the class name

![chrome_pgDQbmeWUt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a370fafc745a0a03214711ea2dc1140ff38cd0f.gif)

```auto
[
    {
        "id": "6943e32d5f3cd3f3",
        "type": "inject",
        "z": "4dc48d85b98236c1",
        "name": "red bad",
        "props": [
            {
                "p": "class",
                "v": "red",
                "vt": "str"
            },
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "bad",
        "payloadType": "str",
        "x": 950,
        "y": 300,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "bf894aad5f1935e7",
        "type": "inject",
        "z": "4dc48d85b98236c1",
        "name": "green good",
        "props": [
            {
                "p": "class",
                "v": "green",
                "vt": "str"
            },
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "good",
        "payloadType": "str",
        "x": 970,
        "y": 340,
        "wires": [
            [
                "822ba01fa06fdbf0"
            ]
        ]
    },
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "4dc48d85b98236c1",
        "group": "",
        "page": "",
        "ui": "22ea43815413e748",
        "name": "red and green styles",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n\n.nrdb-ui-widget.nrdb-ui-text.red {\n border-width: 10px;\n background-color: red !important ;\n}\n\n.nrdb-ui-widget.nrdb-ui-text.green {\n border-width: 10px;\n background-color: lime !important ;\n}\n.nrdb-ui-widget.nrdb-ui-text.green > div {\n color: darkblue;\n}\n.nrdb-ui-widget.nrdb-ui-text.red > div {\n color: aliceblue;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 1000,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "822ba01fa06fdbf0",
        "type": "ui-text",
        "z": "4dc48d85b98236c1",
        "group": "b52a3d06df21b65f",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "Test",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 1150,
        "y": 320,
        "wires": []
    },
    {
        "id": "22ea43815413e748",
        "type": "ui-base",
        "name": "base",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "22ea43815413e748",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

## IMPORTANT:

You will need to edit / delete the ui-base config node that gets imported with the above demo flow and re-assign the ui-template and page to _your_ ui-base

---

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [20 February 2024 10:45 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/3 "2024-02-20T10:45:32Z")

</div>

Thank you for your answer !  
However I'm not attempting to change a widget's background color but a group's, of which the class can't (I believe) be set dynamically.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 February 2024 11:00 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/4 "2024-02-20T11:00:46Z")

</div>

you should be able to target parent cards using a selectoe with the pseudo `:has(.red)`

---

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [21 February 2024 09:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/5 "2024-02-21T09:27:21Z")

</div>

That worked ! Thanks a lot 🙂 I do have another problem though ; I'm trying to change the group's color depending on the value of a slider (the group turns red when the slider reaches 0).

However, I have to go to "0" twice on the slider for the color to change. Do you know how I could fix that ?

```auto
[
    {
        "id": "18f7d68d73bd84b9",
        "type": "ui-template",
        "z": "38d13818ed4d88d2",
        "group": "",
        "page": "48a544354c74af1f",
        "ui": "",
        "name": "CSS",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".v-card:has(.ClassRed) {\n border-width: 10px;\n background-color: red !important ;\n}\n\n.v-card:has(.ClassOK) {\n border-width: 10px;\n background-color: transparent !important ;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 1090,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "56c1625e6db2b486",
        "type": "ui-slider",
        "z": "38d13818ed4d88d2",
        "group": "b52a3d06df21b65f",
        "name": "",
        "label": "Slider",
        "tooltip": "",
        "order": 2,
        "width": "3",
        "height": "1",
        "passthru": false,
        "outs": "end",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": true,
        "min": 0,
        "max": "2",
        "step": 1,
        "className": "",
        "x": 1090,
        "y": 600,
        "wires": [
            [
                "fc56b54aa961d04c",
                "341c3cbedbe9a981"
            ]
        ]
    },
    {
        "id": "fc56b54aa961d04c",
        "type": "ui-gauge",
        "z": "38d13818ed4d88d2",
        "name": "",
        "group": "b52a3d06df21b65f",
        "order": 1,
        "width": 0,
        "height": 0,
        "gtype": "gauge-half",
        "gstyle": "needle",
        "title": "gauge",
        "units": "units",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#d65c62"
            },
            {
                "from": "1",
                "color": "#ffc800"
            },
            {
                "from": "2",
                "color": "#53eaa3"
            }
        ],
        "min": 0,
        "max": "2",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 1230,
        "y": 600,
        "wires": []
    },
    {
        "id": "341c3cbedbe9a981",
        "type": "function",
        "z": "38d13818ed4d88d2",
        "name": "Which class ?",
        "func": "var value = msg.payload;\n\nif(value == 0){\n msg.class = \"ClassRed\";\n}\n\nelse{\n msg.class = \"ClassOK\";\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 940,
        "y": 600,
        "wires": [
            [
                "56c1625e6db2b486"
            ]
        ]
    },
    {
        "id": "48a544354c74af1f",
        "type": "ui-page",
        "name": "Test",
        "ui": "f4139e7488bf5f07",
        "path": "/TEST",
        "icon": "home",
        "layout": "grid",
        "theme": "684392cc1527bd04",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": false
    },
    {
        "id": "b52a3d06df21b65f",
        "type": "ui-group",
        "name": "Color changing group",
        "page": "48a544354c74af1f",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "ClassTest",
        "visible": "true",
        "disabled": false
    },
    {
        "id": "f4139e7488bf5f07",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "684392cc1527bd04",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

Thanks in advance !

---

<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:** [22 March 2024 09:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-dynamically-change-group-color/85692/6 "2024-03-22T09:27:44Z")

</div>

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