I need a widget for my Bubble app. I need a tree hierarchy of dynamic data that can expand and collapse. The data have parent-child relationships. Every child has exactly one parent. I need to display the children of a data item under their parent.
I can display a static tree using CSS and Javascipt:
I can display parent-child relationships using repeating groups:
I found several Bubble solutions with one level of children nested under their parent items. Each parent item can be collapsed (to hide children) and expanded (to show children) for each parent.
I found a Bubble solution with multiple parent-child relationships:
Thank you very much for seeking and providing solutions on Forum. Forum is my best tool for learning Bubble. I would not have gotten as far as I have without Bubble, but I haven’t gone far enough.
I need a solution with dynamic data AND as many levels of child items as are in the database AND more than one child item per level AND the children items under their parent item AND the ability to hide and show the children of each parent individually up to collapsing the tree to show just the top-level parent items.
I think this solution requires coding, either JavaScript or an API. I reached my coding limit getting the CSS tree to work. Any assistance would be appreciated. I am willing to hire to developer to create a collapsible tree hierarchy.
A wild guess but have you tried to make a reusable element with an RG in it and within the cell of the RG the same reusable element. Technically this would create what you want but I’m not sure if bubble allows it.
Before going custom, I’d ensure you’ve closed off whether or not Bubble standard can do.
Thinking through this, here’s what I’d try. Let’s say for example that you’re doing a family tree of parents and children, and to keep it simple, each child just has 1 parent.
One datatype: people
Have a list field for “children”, of type “people”. So you can load in children for a parent. Those children can have children, and so on. So you have an infinite number of potential levels.
Create a group to display the top level parent, and for that group’s data set, set it to the specific top level parent you want to start with. In that group, put a repeating group (RG), which is populated as the parent group’s children. For each additional level, put a RG within the RG, again populated as the parent group’s children. You’ll need to know how many levels you have and set up enough RGs to hold them.
With the above, this should create a hierarchy. I use this approach in my app and it works. The repeating groups should only show if the parent they are under happens to have children.
What I’m not 100% sure on is if you can get the expand/collapse to work (I just display all mine outright). But here’s what I’d try:
Set all the RGs so that they are not visible on page load. Put an icon next to the text cell in the RG that shows the person’s name. You’ll need a separate icon for each RG/level. Create a workflow so that when the icon is clicked, it makes the RG one level below visible. I just tested it and it should work for only showing the RG below a specific parent. Make the workflow conditional so that it only makes the RG visible when it’s not visible. Then do another workflow that’s the opposite. If you set this up, clicking the icon should make the level below appear and disappear (or try the toggle workflow function, it may do the same).
Set a condition for the icon so that it changes to a different icon (say an arrow pointing another way) when the RG one level below is visible.
Note I am using option sets, which populate fairly fast. I am not sure the speed comparison for a datatype.
