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