Create Scrollable List of Clickable Buttons From Dynamic Array
Guides you through the process of creating a list of buttons which have dynamically bindable on click functions.
Overview
In this tutorial I show you how to make a UMG widget that is a scrollable list of clickable buttons, created during game time from a dynamic array!
In other words, you can use this tutorial to fill a scrolling list with any text items you want, from a simple String Array!
And each of the buttons you create from the dynamic array can perform any BP actions you want!
The setup for this is actually quite simple, compared to the result of being able to add as many clickable buttons as you want to a scrolling list, by just adding entries to a BP String Array!
Create Button with Text
Create a second widget that is simply a TextBlock wrapped around by a Button.
Make sure that the buttons Is Variable flag is set to true.
To set the string go to the event graph and add a variable of the type string. It should be Instance Editable = true and Expose on Spawn = true.
The last step is to bind the newly created string to the text on the button. This can be done by selecting the text block and clicking bind like shown.
Create Scroll Box for Buttons
Create a new Blueprint Widget and create a scrollbar. The scrollbar will hold all spawned buttons and handle the binding of the button functionality. Do not forget to set the Is Variable checkbox to true.
This is how the widget looks like:
The idea for the scroll box is to have a function which iterates over all elements in a list and creates buttons in order of the elements of the list. The constructor of the button takes the string and assigns it as the text displayed on the button. To bind a function or event to the spawned button you'd have to get the button and assign the button > On Clicked delegate.
For the tutorial the text is a random number between 0 and 255. We bind the EventFoo to uneven numbers and EventBar to even numbers.
Main Widget
The main widget is the widget which displays the list we created is used for layouting the list.
For this tutorial it also holds a slider which controls how many buttons will be spawned when pressing the debug button.
Player
Open up your player and give let it spawn the main widget which has the scroll box and the spawn logic inside.
The only thing which is missing now is to create a random list of strings which can be displayed on the buttons. For this example im going to generate integers between 0 and 255 and convert them to a string.
Conclusion
By adding the button of the secondary widget to the scroll box of the first widget, I have enabled you to create an easy-to-use dynamic list of scrollable buttons that can perform any BP actions when clicked!
Enjoy!
Files on GitHub
https://github.com/magerbeton/WikiScrollableButtonList