UMG, Create Scrollable List of Clickable Buttons From Dynamic Array - Epic Wiki

# UMG, Create Scrollable List of Clickable Buttons From Dynamic Array

From Epic Wiki

# Contents

1 Overview
2 Main Widget
- 2.1 Create Widget BP
- 2.2 Add Variable Enabled Scroll Box
3 Secondary List Item Widget
- 3.1 Create Bind Event
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
- 10.1 How do I return the Button as type Object?
11 Related Tutorials

# Overview

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!

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!

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.

# 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!