# Collapse UI group

**URL:** <https://discourse.nodered.org/t/collapse-ui-group/57173>\
**Category:** Dashboard\
**Created:** [24 January 2022 20:23 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173 "2022-01-24T20:23:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 January 2022 20:23 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/1 "2022-01-24T20:23:35Z")

</div>

This thread is so close, but not quite what I want.

> [@Collapse/expand (open/close) group via ui\_control](https://discourse.nodered.org/t/collapse-expand-open-close-group-via-ui-control/36461/2):
>
> No idea?? Anyone??

And I have been here a long time ago. ☹

What I am wanting is a way so the group is collapsed.  
If all is _good_, the icon (the triangle) is one colour.

If something happens in the collapsed group the icon (triangle) changes colour.

I get it that this _change_ would/could be better if a `flow.context` to keep things easier (I'm guessing)

Changing the icon would/may be nice too. But I can live with just the triangle.  
Just an icon that maybe goes from a _tick_ to an _exclamation mark_ (and change colour) would be better to indicate things need doing in the collapsed group.

So,  
I have asked before and someone obliged. I'm not 100% sure what was done and I have lost the code. ☹ (Yes, searching for it.....)  
I don't remember when it was but it was a LONG TIME AGO, so maybe not findable, and I can't remember anything to help identify it.

While searching I found that one I mentioned at the stop which does nearly do what I want.

Thanks.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 January 2022 19:04 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/2 "2022-01-27T19:04:48Z")

</div>

Try this -

```auto
[{"id":"0918ee609bf69fc7","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"3dcb174d7ba3088e","type":"ui_template","z":"0918ee609bf69fc7","group":"5e4e9e67d081f578","name":"group2","order":7,"width":0,"height":0,"format":"<style>\n .group2 p.nr-dashboard-cardtitle {\n color:{{msg.payload}} !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":800,"y":400,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n color: green !important;\r\n }\r\n</style>"},{"id":"d9c05df8e5f12ca0","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","className":"","x":980,"y":140,"wires":[]},{"id":"fd43fdf97dacc8b9","type":"ui_text","z":"0918ee609bf69fc7","group":"5e4e9e67d081f578","order":0,"width":0,"height":0,"name":"group2","label":"Some widgets here","format":"Some widgets here","layout":"col-center","className":"","x":980,"y":380,"wires":[]},{"id":"df06348b4295e9df","type":"ui_text","z":"0918ee609bf69fc7","group":"5e4e9e67d081f578","order":0,"width":0,"height":0,"name":"group2","label":"Some widgets here","format":"Some widgets here","layout":"col-center","className":"","x":980,"y":420,"wires":[]},{"id":"8e80beb59e380f96","type":"ui_text","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","order":0,"width":0,"height":0,"name":"group1","label":"Some widgets here","format":"Some widgets here","layout":"col-center","className":"","x":980,"y":100,"wires":[]},{"id":"bf67ca0eb24dac61","type":"ui_template","z":"0918ee609bf69fc7","group":"924a2dc07ecdd1a4","name":"group1","order":7,"width":0,"height":0,"format":"<style>\n .group1 p.nr-dashboard-cardtitle {\n color: {{msg.payload}} !important ;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":800,"y":120,"wires":[[]],"info":"<style>\r\n.mplug17 p.nr-dashboard-cardtitle {\r\n color: green !important;\r\n }\r\n</style>"},{"id":"58d9e91c3691c384","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":610,"y":100,"wires":[["bf67ca0eb24dac61"]]},{"id":"43040dbea39ee0d9","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":610,"y":140,"wires":[["bf67ca0eb24dac61"]]},{"id":"1db4f1691e991dfb","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"red","payloadType":"str","x":610,"y":380,"wires":[["3dcb174d7ba3088e"]]},{"id":"78a21e96f2e9c39b","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lime","payloadType":"str","x":610,"y":420,"wires":[["3dcb174d7ba3088e"]]},{"id":"cd5885fca11e0d37","type":"inject","z":"0918ee609bf69fc7","name":"Open group1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"3","topic":"","payload":"{\"group\":{\"open\":[\"TEST_group1\"]}}","payloadType":"json","x":630,"y":200,"wires":[["b35aa3598c9c2951"]]},{"id":"b35aa3598c9c2951","type":"ui_ui_control","z":"0918ee609bf69fc7","name":"","events":"all","x":900,"y":260,"wires":[[]]},{"id":"206cec4c3973862a","type":"inject","z":"0918ee609bf69fc7","name":"Close group1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"3","topic":"","payload":"{\"group\":{\"close\":[\"TEST_group1\"]}}","payloadType":"json","x":630,"y":240,"wires":[["b35aa3598c9c2951"]]},{"id":"8cab184c0e2eff06","type":"inject","z":"0918ee609bf69fc7","name":"Open group2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"3","topic":"","payload":"{\"group\":{\"open\":[\"TEST_group2\"]}}","payloadType":"json","x":630,"y":280,"wires":[["b35aa3598c9c2951"]]},{"id":"178849937dcaaa87","type":"inject","z":"0918ee609bf69fc7","name":"Close group2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":"3","topic":"","payload":"{\"group\":{\"close\":[\"TEST_group2\"]}}","payloadType":"json","x":630,"y":320,"wires":[["b35aa3598c9c2951"]]},{"id":"5e4e9e67d081f578","type":"ui_group","name":"group2","tab":"9e1ed5e519ff655f","order":2,"disp":true,"width":"6","collapse":true,"className":"group2"},{"id":"924a2dc07ecdd1a4","type":"ui_group","name":"group1","tab":"9e1ed5e519ff655f","order":1,"disp":true,"width":"6","collapse":true,"className":"group1"},{"id":"9e1ed5e519ff655f","type":"ui_tab","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [27 January 2022 19:48 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/3 "2022-01-27T19:48:43Z")

</div>

Sorry but the colours don't change.

Probably some CSS code on another tab I have. ☹  
(That is a whole other world to me and I am only just getting to know it).

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [28 January 2022 15:56 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/4 "2022-01-28T15:56:20Z")

</div>

Is that after importing without any changes ?  
It works for me but you are right something else could be getting in the way, I did need the **!important** bit to override standard settings, and had to add a CSS class to the group in its config node.

If you right click on the one of the group headers and click inspect (after injecting lime) it should look something like this -

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

Where you can see the crossed out lines for color settings, except the **.group1** one which is the one we want to take preference.  
If you post your screen shot then perhaps I can figure out why its not working for you.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 January 2022 20:20 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/5 "2022-01-28T20:20:25Z")

</div>

Yeah, but on this machine, it has become a _very much dog's breakfast_ as it is the one I try things on and I keep a _backup_ here so even after applying them to where ever..... the code stays here.

There are a lot of `template` nodes with `!important` in them.

I shall have to go along and disable all other tabs and try again.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [5 February 2022 16:03 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/6 "2022-02-05T16:03:39Z")

</div>

Did you have any luck getting this to work ?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [5 February 2022 19:41 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/7 "2022-02-05T19:41:50Z")

</div>

Alas no.

And just now I am busy with a heap of other stuff, so the priority is not very high.

---

<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:** [7 March 2022 19:42 UTC](https://discourse.nodered.org/t/collapse-ui-group/57173/8 "2022-03-07T19:42:28Z")

</div>

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