Accordion style widget

Is there a widget that can allow me to present structured data something like this : I do not want the typical > for the row expansion.
4 answers

Bill beware, once Eline devotes herself to getting the problem solved, she is not going to let go until she has done so.

Developer tools: in your browser press F12.


You can either use the Tree Node widget or the Accordion Widget depending on your use case. The tree note widget is part of the Data Widgets module in the marketplace.



Thank you. I had tried those before. Second try:

- Tree Node – Previously I couldn’t get to work beyond two levels but upon closer reading I have figured out how to get it to go beyond two levels. Really ugly UI – It only lets me do the header on the top with no (currently) obvious way to change format of the text without also impacting the format of the icon. Not seeing third level but that may be my data. Will research that. Nevertheless, I am not 100% sure if the list for the third level is working as I don’t see how to only show the details for the final leg. Maybe when the data is fixed, I can experiment further.

- Accordion – I have no clue what it wants for Group – what would the Dynamic Class look like? Sounds like code and the target here is very low code or no code.


Tree Node:

OK. Fixed some associations and finally have the data part working. Formatting is still ugly and a mystery. Observations:

- Font size, when applied at the topmost tree widget affects the icon but NOT the header. It also affects every font for all widgets inside it (except for headers of other tree widgets).

- Font weight, when applied at the topmost widget does NOT affect the icon but does affect the header AND every font for all widgets inside it (except, of course other tree icons).

So whatever one does to make the topmost look right has to be overridden for all widgets inside it. 


Finally, while I can see the classes, I do not have the knowledge as to what to do with that information. 

Topmost tree widget:

First level still has font/weight (both lines have same font)

Header value somehow overrides the font:

I suspect this is the override:

And the icon somehow overrides the weight:

The icon does not have anything about the font when I hover.


And I currently do not know how to use the class information. (If I can’t do it in the style box, I will need to learn more about whatever method is needed to fix things.)