Hello, i’m doing my first tests with UMG and i wanted to be able to add buttons for every item i have on my inventory, how do i accomplish this?
There are probably many ways to do this, but I’ll briefly explain what I’ve done:
- Created a blueprint structure “InventoryEntry”, containing a item name field (string) and item count (int)
- Created an InventoryItemButton widget. This is a simple widget: A button with a text block.
- Added an InventoryEntry variable to widget.
- Bound the text block’s text to a function “Get Text”, which basically concatenates the InventoryEntry’s name and count.
- Created an InventoryList widget, which is just designed to hold a bunch of InventoryItemButton widgets in a vertical box
- Created a function “AddButton”, which takes an InventoryEntry as a parameter. This creates an InventoryItemButton, and adds it as a child to the vertical box (note: the Vbox has to have “Is Varable” selected in the designer)
- Finally, I’ve added an array of InventoryEntries to the InventoryList widget as a test. Then, on widget construction, I simply run a foreach loop over them and call AddButton
See attached blueprints for more detail (sorry for linked images, the answerhub upload was malfunctioning)
5 Likes
Pretty nice answer thank you, i will try it out 
Do you have any idea how to do this using C++?
UMG is blueprint based or? If you want to do this with C++ you would need to learn slate and that’s not the easiest thing (or at least i find it hard).
It’s sad that UMG has no Drag support at the moment, so making an inventory with it like you have in RPGs is not possible ):
My suggestion would be to make everything gui related in blueprints, and just call the add button function from c++. You might want to use an interface for this to ensure that your c++ code knows that add button is defined, even though it’s implemented in blueprints.
When i try to add my button to the Vertical Box the item isn’t visible. I added manually my custom button on the Vertical Box and it has the same behaviour. After experimenting for a while i found out that i have to to set the layout to Fill instead of Auto for the buttons to show. How can i change those properties on the Graph after executing Add Child?
Update: Nevermind i have figured it out Still don’t understand why Auto isn’t working, but i was able to hack it with the Fill in the Graph so right now it’s all good. thnak you for your help
Im trying to do this for a scroll box, but the buttons do not show up.
How did you change to fill dynamically?
Hello there, the AddChild returns a Slot node, i just casted that to a Uniform Grid Panel Slot (because i was using a Uniform Grid Panel) and with that i had access to the Fill property
In “Set Size”, yes? I can do it just fine in a Vertical Box, but “Set Size” does not exist for a “Scroll Box”.
I did find a Fill option in “Set Horizontal Alignment”, but it did not make the buttons appear.
I plan on creating a button for each object the player creates with no direct limit, so I need the scroll box to work… 
Yes i used SetSize. I’ve looked into it and i can’t also find the equivalent to Scroll Box :S Maybe it’s not yet accessible through Blueprints.
I wasn’t able to add buttons either to a widget using add child to vertical box, and nothing on this page seemed to fix that although it’s all great information.
In my case, I’ve got 2 widgets. 1) is the construction menu and 2) is a button, that is to populate the construction menu dynamically.
My problem was solved by Removing the canvas the button was attached to and putting the button directly onto the root. It would then show up in the construction menu’s vertical box.
The first minute and a half of this video is where i discovered the solution.
Thanks for the answer HorusHeretic.
1 Like
Hey, in case anyone hasn’t been able to solve this; i believe i have just found the solution… I am using a horizontal box and in blueprint, after ‘Add Child’ you need to ‘cast to HorizontalBoxSlot’, followed by a ‘set size’ in which you need to drag backwards off of the ‘in size’ node and create a ‘make SlateChildSize’ node and select ‘fiil’. Hope this helps!.
1 Like
omg… THANK YOU!!! It solved my problem while creating dynamic buttons!!! (infinite applause)!!!
1 Like
I love you!!
1 Like
Hi,
How can I get a reference to each new created button please? I need to dynamicaly change their color in my blueprint but I don’t know how because they don’t exist before the blueprint is executed
What I normally do is when you create a new UI widget at runtime from the character or something, I store its reference in an array called ActiveUIs or something similar. Whenever I want to make a change to one particular one, I parse the array to find the item and cast the result to whatever UI class its called.
The output of the cast to node will have all the variables of your particular UI widget. So say your dynamically populated buttons are all in a vertical box, you could obtain the vertical boxes children, which should return another UI widget class containing a button/text etc. You’d cast the child of the vertical box to your dynamic button class and the return result of that would give you all the variables in your button widget class. You’d then grab the variable for text or button and change its colours.
If you want to change its colours over time, an animation, I like to use “set timer by function” node, because you can set your own tick rate and change it on the fly, as long as you restart the timer after a tick change.
If you need a more detailed explanation with screenshots let me know. This is just from memory without actually booting up the editor.
1 Like
Interesting. Here’s my actual blueprint:
And the function for adding new buttons:
I don’t know how to add the new buttons to an array and how to get the one I want
Ok sorry, I got it. I’m tired 
Thank you so much for this solution!
Uhm just want to Point out that you dont have to create separate Userwidgets for simple things like Buttons, Horizontal Boxes etc. you can spawn them with create Object from Class. Outer would be the thing you end up as a child (if you want to be as close to typical Widgetree hiarchy) but you could simply drop a self refference too.
6 Likes