Collapse UI group

[Trying_to_learn]

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

Collapse/expand (open/close) group via ui_control

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.

[smcgann99]

Try this -

[{"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}]

[Trying_to_learn]

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).

[smcgann99]

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 -

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.

[Trying_to_learn]

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.

[smcgann99]

Did you have any luck getting this to work ?

[Trying_to_learn]

Alas no.

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