How to Programmatically Hide a Specific Button in a Group Widget in Node-RED Dashboard?

Dashboard
1

I’m working with Node-RED Dashboard and have a ui_group that contains multiple buttons. I would like to programmatically hide only one specific button in the group widget (not the whole group or page). I understand that ui_control can be used to show/hide entire groups or pages, but I’m unsure how to target just one button within a group.

Here's what I'm trying to achieve:

  • Target and hide a single button within a group based on a condition or trigger, such as a message payload.
  • The button I want to hide has a unique className (e.g., .target-button) assigned to it in the button node configuration.

I've tried using ui_template with JavaScript, but I'm not sure if this is the best approach, or if there’s a simpler way to directly hide/show individual buttons within a group widget.

Has anyone successfully implemented this kind of selective visibility for buttons within a ui_group? Any tips or sample flows would be greatly appreciated!

[
    {
        "id": "2015f50a75fad98f",
        "type": "ui-button",
        "z": "753826f0aaaaa790",
        "group": "68d5c801b34f9158",
        "name": "",
        "label": "button 5",
        "order": 6,
        "width": 0,
        "height": 0,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "hideable-button",
        "icon": "",
        "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": 340,
        "y": 380,
        "wires": [
            [
                "eb4a5a575a1fe56b"
            ]
        ]
    },
    {
        "id": "68d5c801b34f9158",
        "type": "ui-group",
        "name": "group test",
        "page": "cedd6f592b697245",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "cedd6f592b697245",
        "type": "ui-page",
        "name": "Page 05",
        "ui": "64fc71361e24a0d0",
        "path": "/page05",
        "icon": "home",
        "layout": "grid",
        "theme": "abe7ab01fbad592b",
        "order": 6,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "64fc71361e24a0d0",
        "type": "ui-base",
        "name": "",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-template",
            "ui-slider",
            "ui-text-input",
            "ui-button",
            "ui-text",
            "ui-chart",
            "ui-form",
            "ui-number-input",
            "ui-switch",
            "ui-table",
            "ui-gauge",
            "ui-markdown",
            "ui-iframe",
            "ui-tabulator",
            "ui-radio-group",
            "ui-dropdown",
            "ui-button-group",
            "ui-file-input"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "fixed"
    },
    {
        "id": "abe7ab01fbad592b",
        "type": "ui-theme",
        "name": "Default",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Thanks!

2

It's not supported at the moment. Feature request has been raised though: Show / hide widgets (finer granularity than on group level) · Issue #711 · FlowFuse/node-red-dashboard · GitHub

3

Meanwhile the workaround:
If you do not use the disabled/enabled feature of the button for it's actual purpose

CSS (for all pages)

.nrdb-ui-button .v-btn--disabled{
    display: none;
}

And send msg.enabled = true to show and msg.enabled = false to hide the button.

2 Likes
4

In this not only the particular button from the group to hide. It may be form, chart any other widgets to hide. Is it possible any one of the widgets from the same group could hide.

5

The plan is to support for all widgets, currently you can only do it for a full group/page