Download

UMG expandable tree structure

Hi all,

I am trying to make a expandable tree structure in UE4. The design is like the attached image.
I assumed I should use “Tree View” to make it.
However, I couldn’t find any tutorial regarding about the Tree View in UMG.
I dragged it onto a canvas, but it says “There is no EntryWidgetClass specified on this list. Even if doing custom stuff, this is always required as a fallback.”
I don’t even understand what’s a entry widget class.
When I googled it, there is no tutorial or documentation elaborating on this topic.
All I could find is a plug-in.
Is there any ways I can make a expandable tree structure in UMG?
Please help. I have been desperately trying to figure this out for days.

1 Like

Same, stuck here, but I do found how you can add tree view list items to it: Binding data to ListView - UE4 AnswerHub

That post is about ListView, but using the same approach you can start adding data items to it. However, so far I haven’t been able to figure out how does the “tree” (and ideally it can expand and unexpand) aspect comes into play.

I found the solution here: Listview - getting started in BP - #65 by lobachevscki

Make it yourself.

Take the structure from basic html (tried and true. Probably been around longer than you have been alive at this point).

Create a basic widget - list item.
The widget contains the text field, and whatever button stuff you need (assuming the buttons get clicked and do something).

Create a widget- list group.
This one will just be used to “indent” the list really.
You need to code it’s position so that if a parent element exists, is valid, and is of the same class, it moves over a row.

From then on, you can probably build the structure manually by dragging, dropping your components and editing the variables for text / info.

Alternatively you can build an automated setup to build the list.

Use text, and regular string split operations.
Build it up with specific markers so you differentiate areas.
I suggest something like
Group name: group list item 1, list item 2, list item 3; GroupB: list1,list2;
So on.

Once done, you can go back into your list group widget component and make it so you can minimize the content by hiding/displacing them.

Because you build this with separate custom components you can always alter things globally in moments