How to make an editable/interactive UI list

How can I create an editable/interactive list as a gameplay UI that can be modified during runtime where modifiable items from a set can be added/removed and be moved up/down with click drag and be able to be triggered one by one based on order of placement? Only with blueprints. Explain like I’m 5 please.

Structs would be a great place to start, but given there are countless way to implement an interactive widget, it’s probably better to dig around YouTube for inventory systems, because its never one size fits all…

That doesn’t explain anything at all…

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

If we’re swapping index by 1 only, as in, only the neighbouring elements can be reordered, you can do this with an array:

This should simplify things a bit. I originally assumed the worst case scenario, where you can drag from any place in the list to any other place. I did not account for dragging to the very end of the list, though. Can be added, surely.