# Group Show/Hide in dashboard 2.0

**URL:** <https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 March 2025 12:29 UTC](https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350 "2025-03-31T12:29:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)\
**Post date:** [31 March 2025 12:29 UTC](https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350/1 "2025-03-31T12:29:02Z")

</div>

Hello everyone,

I've been trying to use the `ui-control` node to show/hide a `ui-group`, but I’ve encountered an issue. When using `ui-control` to toggle visibility, the change doesn’t take effect immediately—the UI remains unchanged until the page is fully refreshed. This functionality was working in D1.

I've reported this issue on GitHub: [1646](https://github.com/FlowFuse/node-red-dashboard/issues/1646)

In the meantime, does anyone have a workaround? I tried injecting CSS to hide widgets, but while they disappear, the UI still reserves their group space, leaving an empty gap. What I need is a way to completely show/hide groups so that they don’t take up any space when hidden.

You can use this flow to reproduce the issue:

> **Code here**
>
> ```auto
> [{"id":"33964542897c3993","type":"tab","label":"testingFlow","disabled":false,"info":"","env":[]},{"id":"7b0503a30402601c","type":"ui-text","z":"33964542897c3993","group":"41e672f602dae20b","order":1,"width":"6","height":"1","name":"DateTime","label":"","format":"{{msg.payload}}","layout":"row-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":380,"y":100,"wires":[]},{"id":"30b023c88e4e7f9c","type":"inject","z":"33964542897c3993","name":"Loop","props":[{"p":"payload"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"iso","payloadType":"date","x":110,"y":100,"wires":[["7b0503a30402601c","b4be6146256f124c"]]},{"id":"ce537c2065720c37","type":"ui-text","z":"33964542897c3993","group":"ccc19e95c8e392a7","order":1,"width":"6","height":"1","name":"Count","label":"Value","format":"{{msg.payload}}","layout":"row-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":370,"y":160,"wires":[]},{"id":"8c06607efe8d9b96","type":"change","z":"33964542897c3993","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"count","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":285,"y":160,"wires":[["ce537c2065720c37"]],"l":false},{"id":"b4be6146256f124c","type":"function","z":"33964542897c3993","name":"sum","func":"let count = flow.get(\"count\");\ncount++;\nflow.set(\"count\", count);\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"// El código añadido aquí se ejecutará una vez\n// cuando el nodo es iniciado.\nflow.set(\"count\" , 0);","finalize":"","libs":[],"x":235,"y":160,"wires":[["8c06607efe8d9b96"]],"icon":"font-awesome/fa-plus","l":false},{"id":"aca1af3f418c989e","type":"inject","z":"33964542897c3993","name":"View Time","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":360,"wires":[["8cd3bf9bdf4c8a27"]]},{"id":"8abdaeb563363891","type":"ui-control","z":"33964542897c3993","name":"Control visualization","ui":"35a6957988e1aad5","events":"all","x":420,"y":360,"wires":[[]]},{"id":"93b42db5da5432b0","type":"inject","z":"33964542897c3993","name":"View Count","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":400,"wires":[["633eea86c437b5c5"]]},{"id":"8cd3bf9bdf4c8a27","type":"change","z":"33964542897c3993","name":"set show DateAndTime","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"groups\":{\"show\":[\"DateAndTime\"],\"hide\":[\"Counter\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":265,"y":360,"wires":[["8abdaeb563363891"]],"icon":"font-awesome/fa-eye","l":false},{"id":"633eea86c437b5c5","type":"change","z":"33964542897c3993","name":"set show Count","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"groups\":{\"show\":[\"Counter\"],\"hide\":[\"DateAndTime\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":265,"y":400,"wires":[["8abdaeb563363891"]],"icon":"font-awesome/fa-eye","l":false},{"id":"afbd0a69d75e9199","type":"inject","z":"33964542897c3993","name":"RefreshPage","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":210,"y":300,"wires":[["8abdaeb563363891"]]},{"id":"41e672f602dae20b","type":"ui-group","name":"DateAndTime","page":"83b38b303bfbe759","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ccc19e95c8e392a7","type":"ui-group","name":"Counter","page":"83b38b303bfbe759","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"35a6957988e1aad5","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},{"id":"83b38b303bfbe759","type":"ui-page","name":"mainPage","ui":"35a6957988e1aad5","path":"/page1","icon":"home","layout":"grid","theme":"a21c34d90abf3f3a","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"a21c34d90abf3f3a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
> 
> ```

Any ideas or alternative approaches would be greatly appreciated! 😃

Thanks!

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [31 March 2025 12:48 UTC](https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350/2 "2025-03-31T12:48:23Z")

</div>

Try adding the page name to

```auto
{  
    groups: {
        show: ['<Page Name>:<Group Name>'],
        hide: ['<Page Name>:<Group Name>']
    }
}

```

As shown in docs [Control ui-control | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-control.html#show-hide)

---

<div class="post-metadata">

**Author:** ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)\
**Post date:** [31 March 2025 13:19 UTC](https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350/3 "2025-03-31T13:19:24Z")

</div>

Thanks @E1cid that worked!

Indeed, if no page reference is provided, the console returns **"page not found"**.

However, I couldn't find this explicitly mentioned in the node documentation. I initially understood that specifying a page was not mandatory, which led to some confusion.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cb1de69598420a4da220cf2696696ab905bb1f04.png)

This kind of issue seems unlikely to occur based on the Dashboard documentation, so thanks for sharing! I'll update the github issue with this info

---

<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:** [14 April 2025 13:19 UTC](https://discourse.nodered.org/t/group-show-hide-in-dashboard-2-0/96350/4 "2025-04-14T13:19:52Z")

</div>

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