Dynamically show or hide nodes

Dashboard
1

Just working on a layout in dashboard 2.0 which on which I can pretty much do everything I want except dynamically show or hide and individual node; like a button group.

I can dynamically show and hide groups just fine but that doesn't work for me in this instance as I can't get the groups to lay where I want them in the layout options that we have.
Same width groups won't sit under each other, they'll move to the right of each other which destroys the rest of the layout.

Is there any indication that the ability to show or hide an individual node dynamically is on the horizon or even possible?

Thanks.

2

Try sending a message with ui-uppdate.class set to d-none to a node.

Alternatively, create your own class in a template node that sets display to non or visibility to hidden and apply that class dynamically to your node.

Ref: Dynamic Properties | Node-RED Dashboard 2.0

3

Awesome thank you very much. That did exactly what I wanted.
I sent d-true to turn them back on. Seemed to work fine.

4

You can also (since version 1.30.1) show/hide individual widgets, using a ui_control node.

Here is a simple flow demonstrating that

[{"id":"61319658de1ed7bf","type":"inject","z":"997da33a0beedade","name":"Show group","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"groups\":{\"show\":[\"show/hide\"]}}","payloadType":"json","x":170,"y":7760,"wires":[["6f8ea1a66f6b126e"]]},{"id":"c3348c0065da4673","type":"inject","z":"997da33a0beedade","name":"Hide group","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"groups\":{\"hide\":[\"show/hide\"]}}","payloadType":"json","x":160,"y":7800,"wires":[["6f8ea1a66f6b126e"]]},{"id":"da3ce5eef8de3fc2","type":"ui-button","z":"997da33a0beedade","group":"6b6525280a5f66a7","name":"show/hide test button","label":"button 1","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","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":7860,"wires":[[]]},{"id":"6f8ea1a66f6b126e","type":"ui-control","z":"997da33a0beedade","name":"","ui":"ID-BASE-1","events":"all","x":400,"y":7780,"wires":[[]]},{"id":"16f5599c9463095f","type":"inject","z":"997da33a0beedade","name":"Show button","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"widgets\":{\"show\":[\"show/hide test button\"]}}","payloadType":"json","x":170,"y":7680,"wires":[["6f8ea1a66f6b126e"]]},{"id":"f0c58122bb2eb6f7","type":"inject","z":"997da33a0beedade","name":"Hide button","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"widgets\":{\"hide\":[\"show/hide test button\"]}}","payloadType":"json","x":170,"y":7720,"wires":[["6f8ea1a66f6b126e"]]},{"id":"6b6525280a5f66a7","type":"ui-group","name":"show/hide","page":"08c081b70df30229","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"08c081b70df30229","type":"ui-page","name":"show/hide","ui":"ID-BASE-1","path":"/showhide","icon":"home","layout":"grid","theme":"990cb1ccd8901c15","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":"990cb1ccd8901c15","type":"ui-theme","name":"cdl compact","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"cee84983f6323e8e","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.0"}}]