Help with creating Parent Child List

[warren.hobden]

Hi all

I am new to Bubble and need a little help.

I am trying to create list item that can be inserted into a list item (similar to creating a folder inside a folder)

So this is the interaction design.

User types “name A” into an input field, next to the input field is an add button - this creates list item 1.

Repeat this a few times.

Giving you a list like this…

Level 1
List item - name A (add)
List item - name B (add)
List item - name C (add)
List item - name D (add)

Next to each list item is another “add button”

Clicking on the “add button” on List item - name A, pushes B,C,D down and reveals another input field between List item - name A and List item - name B.

User types “name A - child A” into an input field, next to the input field is an add button - this creates child list item 1.

Repeat this a few times.

Level 1
List item - name A (add)

Level 2
List item - name A - child A (add)
List item - name A - child B (add)
List item - name A - child C (add)
ETC

List item - name B (add)
List item - name C (add)
List item - name D (add)

And so on. Effectively making a Parent, Child, Grand Chlid relationship tree structure.

Hope that makes sense. Any help greatly received.

Here is a link - https://test-tree.bubbleapps.io/version-test/test_page_2?debug_mode=true

W

[blueback09]

Hmmm…I think you’re gonna have a hard time with that. Bubble doesn’t do repetition or recursion. Most of the apps share server resources with other apps and Bubble is very protective of those shared resources. A tree structure inherently requires some kind of repetition or recursion.

You might be able to fake it as long as there’s a reasonable limit on how deep the user can go.

[warren.hobden]

Thanks, @blueback09. Any idea how I would go about faking it?

W

[NigelG]

The database itself is not the issue, you can create the classic folder structure easily.

It is then a case of recursion on your UI. You can’t put a reusable element inside a reusable element, but you can have a repeating group in a repeating group. You would then need to show the “levels” which should not be too difficult.

An easier way may be to only have the “current” level on display, that means you are not having to have recurring elements within themselves.

So a way to navigate both within a level (which should just be a Repeating Group) and then Up/Down buttons.

[warren.hobden]

Thanks, @NigelG. I’m trying to work through a few different option with UI. Your suggestion is a good one.

[NigelG]

This looks terrible, but it works. Hopefully you get the idea.

So you are only showing two levels each time, and you can drill down using the chevrons.

[warren.hobden]

Yes - brilliant. That’s kinda of what I’m trying to do right now

Can you share the link so I can have a look around?

Thanks again for your time - this forum is awesome.

[NigelG]

Here we go.

https://bubble.io/page?type=page&name=tree&id=trest6&tab=tabs-1

Sounds like a useful function, so will tidy it up at put somewhere more permanant.