Legacy/UMG, Create Scrollable List of Clickable Buttons From Dynamic Array

From UE4: Community Wiki
Jump to: navigation, search

Overview

RamaUMGTitle.jpg

Author: Rama (talk)

Dear Community,

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!

Main Widget

Create Widget BP

After enabling UMG via Editor Preferences -> Experimental,

Restart the editor and right click to add a UMG widget!

UMGStep1.jpg

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!

MainWidget.jpg

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!

SecondWidget.jpg

Create Bind Event

Create the bind BP function after clicking on "bind" for the buttons On Click event!

BindEvent.jpg

My Character BP

Open up your my character BP and create this setup!

UMG Mycharacter1.jpg

Create Joy UI

CreateJoyUI.jpg

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!

UMG MyCharacter2.jpg

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!

UMG MyCharacter3.jpg

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.

UMG Tutorial Update Rama.jpg

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!

Rama (talk)

FAQ

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!

ObjectInSearchFilter.jpg

Related Tutorials

Epic's UMG Documentation

How to extend UserWidget in C++, by WCode!


How to add the widget itself, not the button