UMG, Create Scrollable List of Clickable Buttons From Dynamic Array
- 1 Overview
- 2 Main Widget
- 3 Secondary List Item Widget
- 4 My Character BP
- 5 Create Joy UI
- 6 Add List Items
- 7 Create Button And Set Text
- 8 Significant Improvements in UE4 4.5
- 9 Conclusion
- 10 FAQ
- 11 Related Tutorials
In this tutorial I show you, mostly through pictures, 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 Widget BP
After enabling UMG via Editor Preferences -> Experimental,
Restart the editor and right click to add a UMG widget!
Add Variable Enabled Scroll Box
Add a Panel-> scroll box and make sure it is a variable, and give it a name of your choosing!
Secondary List Item Widget
Create a second widget that is simply a TextBlock wrapped around by a Button.
Make sure both are set to be variables!
Create Bind Event
Create the bind BP function after clicking on "bind" for the buttons On Click event!
My Character BP
Open up your my character BP and create this setup!
Create Joy UI
Add List Items
The String Array called ListItems is a global variable for the My Character BP !
You could edit this variable from anywhere in any other BP to change how the UMG widget creates itself!
Please note that I am retrieving the variable-enabled Scroll Box, called JoyList, from the main widget variable we saved off when creating the main widget.
So I am adding the new buttons directly to the scroll box JoyList!
Create Button And Set Text
The return type of this function is UObject!
Please very carefully note, you cannot return the created widget itself, if you try to add that to the Scroll Box it wont show up, you instead add the button that wraps around the Text Block!
Significant Improvements in UE4 4.5
As of 4.5
1. You dont have to cast the widget after you create it, you can use the special create widget node that returns the widget already casted
2. Add to Viewport and user input are now separated, so you can specify exactly how you want your menu to work. The menu can work with game viewport input or can take away control from the game viewport.
3. Show mouse cursor is done via the Player Controller.
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!
How do I return the Button as type Object?
If you are having trouble setting the return type of the function to be Object, please note you can use the search filter to find it more easily! Here's a pic!