How to make an editable/interactive UI list

tl;dr: reordering stuff in widget containers is a royal pain in the butt

I don’t know how to speak to 5 year olds but I often talk to The Rubber Duck:


  • have a Vertical Box or Horizontal Box (or a Wrap Box if it’s more than 1 row / column), this container will host the interactive Item widgets
  • ensure you’re familiar with the fundamentals of Drag & Drop (covered extensively, luckily!) and have each Item implement it

  • a vertical box is like an array, its children are ordered

Only with blueprints.

You can Add an item to the end of a VB, you can Get any elementy by Index, and you can Remove any element at index.

However, BPs do not allow Inserting at index into widget containers. You will need a helper array and order it all there first, and only then (re)populate the widget container. This applies only to inserting, other operations would be fine.

  • when Items are added to the VB, feed them the Index they’re sitting at
  • use drag & drop to reorder the list
  • newly added Items go to the end of the VB
  • when a widget is dropped onto another:
    – store a reference to the item you’re dropping, remove it from the VB, store the reference to the item you’re dropping on
    – fetch all Items from the VB and set them to the (cleared) Temp array
    – find the dropped on Item and insert the dropped Item at its index; the array will indexes shift by 1
    – clear the VB and repopulate it from the array, feed widgets new indexes in the very same loop
    – clean up - clear references and the temp array

triggered one by one based on order of placement?

This one is easy providing we ordered Items correctly using the above pseudo-logic. You did not specify what triggers them, I’ll assume it’s on a timer.

  • create a looped timer firing every X seconds
  • when the timer’s event executes get element 0 from the parent container - that’s the 1st Item
    – if these are instances of the single widget class, Cast → execute what is needed, remove from parent
    – if the container hosts various classes, consider implementing a blueprint interface to communicate what triggered means; or use inheritance - although inheritance in widgets is somewhat counterintuitive the way it’s implemented…

Explain like I’m 5 please.

You can also use a List View but it’s more involved. These make sense if you have a huge number of items. But you’d need to be, like, at least 6 for that :wink:

Here’s an example of inserting with a List / Tile View:


Now, I did it all in my head, so there’s bound to be a gotcha somewhere there.

1 Like