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

**URL:** <https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [29 October 2024 05:15 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758 "2024-10-29T05:15:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [29 October 2024 05:15 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/1 "2024-10-29T05:15:54Z")

</div>

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!

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [29 October 2024 10:52 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/2 "2024-10-29T10:52:07Z")

</div>

> [@Nandhini-Subramaniya](#):
>
> 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.

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](https://github.com/FlowFuse/node-red-dashboard/issues/711)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 October 2024 10:59 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/3 "2024-10-29T10:59:17Z")

</div>

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

CSS (for all pages)

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

```

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

---

<div class="post-metadata">

**Author:** ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)\
**Post date:** [30 October 2024 01:55 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/4 "2024-10-30T01:55:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 October 2024 08:51 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/5 "2024-10-30T08:51:49Z")

</div>

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

---

<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:** [29 November 2024 08:52 UTC](https://discourse.nodered.org/t/how-to-programmatically-hide-a-specific-button-in-a-group-widget-in-node-red-dashboard/92758/6 "2024-11-29T08:52:15Z")

</div>

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