# 's UMG Tutorial: Create a Scrollable List of Buttons From a Dynamic Array **URL:** \ **Category:** Community & Industry Discussion\ **Tags:** unreal-engine\ **Created:** [September 19, 2014, 6:47am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650 "2014-09-19T06:47:23Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 19, 2014, 6:47am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/1 "2014-09-19T06:47:23Z")
Dear Community, In entirely BP tutorial I show you how you can make a scrollable list of clickable buttons from a String array on key press from the Character BP! You can run any BP code you want when any of the buttons are pressed! The power of what I am sharing with you is that you can so easily add new entries by simply adding another string to the String Array, either in defaults or during runtime! Because the foundation of my UMG setup is a dynamic array, my tutorial is showing you how to make **Dynamic UMG elements** , that could be based on user input or runtime game conditions! I show the entire setup here, with lots of pictures! > **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)** > > After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from... Many thanks to Nick Darnell and the rest of Epic for UMG! [FONT=Comic Sans MS]❤ ![RamaUMGTitle.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/3X/a/1/a1db00c53cbd1b0ed474edaf1dad831734a784c2.jpeg) ---
**Author:** ![ChrisTm](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ChrisTm](https://forums.unrealengine.com/u/ChrisTm)\ **Post date:** [September 19, 2014, 12:11pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/2 "2014-09-19T12:11:33Z")
easy to read , will help me a lot when I will learn UMG thank you so much ---
**Author:** ![Tim\_Hobson](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Tim\_Hobson](https://forums.unrealengine.com/u/Tim_Hobson)\ **Post date:** [September 19, 2014, 3:04pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/3 "2014-09-19T15:04:50Z")
Hi, To add to our Doc’s Team has recently updated and added some documentation for UMG and using it for different functionality! Make sure to have a look at ! 🙂 **.unrealengine.com/latest/INT/Engine/UMG/index.html** ---
**Author:** ![Fen](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/fen/32/635651_2.png) [@Fen](https://forums.unrealengine.com/u/Fen)\ **Post date:** [September 19, 2014, 3:35pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/4 "2014-09-19T15:35:53Z")
Thank you ( and like you : thank you Epic for UMG too.) ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 19, 2014, 4:26pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/5 "2014-09-19T16:26:06Z")
> [@;146870](#): > > Hi, > > To add to our Doc’s Team has recently updated and added some documentation for UMG and using it for different functionality! Make sure to have a look at ! 🙂 I added your link to my wiki, thanks for the letting me know ! [https://wiki.unrealengine.com/UMG,\_Create\_Scrollable\_List\_of\_Clickable\_Buttons\_From\_Dynamic\_Array#Related\_Tutorials](https://wiki.unrealengine.com/UMG,_Create_Scrollable_List_of_Clickable_Buttons_From_Dynamic_Array#Related_Tutorials) > [@;146631](#): > > You rocks , I will bookmark it to read it later. Let me know how you like it ! > [@;146804](#): > > easy to read , > will help me a lot when I will learn UMG thank you so much Hee hee! > [@Fen;146884](#): > > Thank you ( and like you : thank you Epic for UMG too.) You’re welcome! And thanks again Epic, for everything! 🙂 ---
**Author:** ![anonymous\_user\_0df12f74](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0df12f74](https://forums.unrealengine.com/u/anonymous_user_0df12f74)\ **Post date:** [September 19, 2014, 4:37pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/6 "2014-09-19T16:37:58Z")
Looks great ! Man I love UMG, the visual editor is awesome, I need to do some more work with it soon. Thanks for the tutorial! 🙂 ---
**Author:** ![Pampers](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Pampers](https://forums.unrealengine.com/u/Pampers)\ **Post date:** [September 19, 2014, 10:46pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/7 "2014-09-19T22:46:00Z")
Hi! In the function CreateButtonAndSetText, I can’t seem to set the output variable type to Object, can’t even see that in the list. Any pointers on how to fix ? ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 20, 2014, 6:45am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/8 "2014-09-20T06:45:18Z")
> [@;146922](#): > > Looks great ! Man I love UMG, the visual editor is awesome, I need to do some more work with it soon. Thanks for the tutorial! 🙂 You’re welcome , great to hear from you! Yea UMG is amazing! > [@Pampers;147057](#): > > Hi! > In the function CreateButtonAndSetText, I can’t seem to set the output variable type to Object, can’t even see that in the list. Any pointers on how to fix ? if you go to the function node and click to add a new output variable, you can then type in the word “Object” into the search filter I admit it too me a while to find it too! I had to end up using the method I describe just above, of using a search filter. The search filter method definitely works! Here’s a pic! ![efa0ff24104348c6fa689b8687cc84910d018958.jpeg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/f/a/efa0ff24104348c6fa689b8687cc84910d018958.jpeg) [FONT=Comic Sans MS]❤ ---
**Author:** ![Pampers](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Pampers](https://forums.unrealengine.com/u/Pampers)\ **Post date:** [September 20, 2014, 2:10pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/9 "2014-09-20T14:10:10Z")
Aha! Thank you very much 🙂 ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 21, 2014, 2:24pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/10 "2014-09-21T14:24:40Z")
> [@Pampers;147516](#): > > Aha! > Thank you very much 🙂 Hee hee! 🙂 ---
**Author:** ![anonymous\_user\_277de8fa](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_277de8fa](https://forums.unrealengine.com/u/anonymous_user_277de8fa)\ **Post date:** [September 22, 2014, 10:59pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/11 "2014-09-22T22:59:29Z")
I actually asked a question earlier on the forum but I believe is actually close to what I am looking for. I am trying to install an image border around my Hud using the widget blueprint section. I already have a decent blueprint thanks to a tutorial I found. I found a section that says image and a place where i can install an image, I have already gotten the checkered box to show up in game, just need to replace that with an image. I assume it’s something to do with the blueprint. ![Untitled.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/d/2/d255a516f5293f5096b332d07ea4b1765c3d3b6b.png) and here is the blueprint (I don’t need the floats yet, I will plug those in later.) Edit: sorry wrong blueprint and i plugged one in just to show where it would be going, I believe the object return value needs to go into my hud interface somewhere but I can not for the life of me figure out where ![widget blueprint accurate.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/1/0/1088ba40efeb1a669b38b3d81f39aef3e20db7d8.png) ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 23, 2014, 5:24am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/12 "2014-09-23T05:24:11Z")
> [@XLCRHItmanEQ;149318](#): > > I actually asked a question earlier on the forum but I believe is actually close to what I am looking for. I am trying to install an image border around my Hud using the widget blueprint section. I already have a decent blueprint thanks to a tutorial I found. I found a section that says image and a place where i can install an image, I have already gotten the checkered box to show up in game, just need to replace that with an image. I assume it’s something to do with the blueprint. > > ![Untitled.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/d/2/d255a516f5293f5096b332d07ea4b1765c3d3b6b.png) \*\* Right Click-\>User Interface-\>Slate Brush Asset\*\* Hi there! Have you created a Slate Brush yet for your image? Right click in content browser -\> Slate Brush then open that asset, and you can set the image, please note you can tile the image if you want Then go back to your Widget BP and now you can apply the image! Let me know if that works! ---
**Author:** ![anonymous\_user\_277de8fa](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_277de8fa](https://forums.unrealengine.com/u/anonymous_user_277de8fa)\ **Post date:** [September 23, 2014, 9:32pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/13 "2014-09-23T21:32:07Z")
Yes that work, but i was under the impression that black worked as a transparency. Am I wrong? because I have a black background for the bar, thinking that that would be invisible to the player. ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [September 24, 2014, 4:22am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/14 "2014-09-24T04:22:24Z")
> [@XLCRHItmanEQ;150229](#): > > Yes that work, but i was under the impression that black worked as a transparency. Am I wrong? because I have a black background for the bar, thinking that that would be invisible to the player. If you import a Texture2D that uses an Alpha channel (32 bit TGA file), then you will get transparency in the Slate Brush in UE4 🙂 ---
**Author:** ![anonymous\_user\_277de8fa](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_277de8fa](https://forums.unrealengine.com/u/anonymous_user_277de8fa)\ **Post date:** [September 26, 2014, 7:26pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/15 "2014-09-26T19:26:56Z")
lol, thank you, I had kinda figured out how to do that, I sort of have a habit of asking questions and then as soon as I ask the question on here I find the answer. we imported an alpha from photo shop and it worked out fine. It looked weird before I created a slate brush, but when I did, It looked like a normal alpha. but I do have one question, mostly because you seem to be the only one answering my questions about the widget blueprint editor and you know what your doing, I had created the blueprint and saved yesterday, I came back and my blueprint was gone (I know I saved). So after trying to find it and being unsuccessful, I decided to draw up a new one, but for some reason I cannot find the Add To Viewport node anywhere? Any ideas why? ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [October 3, 2014, 2:53am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/16 "2014-10-03T02:53:11Z")
> [@XLCRHItmanEQ;152655](#): > > So after trying to find it and being unsuccessful, I decided to draw up a new one, but for some reason I cannot find the Add To Viewport node anywhere? Any ideas why? Where are you trying to Add To Viewport? Try in Level Blueprint or in your My Character BP ! Also I think a lot of is going to be vastly improved in the near future when 4.5 comes! ❤ ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [October 31, 2014, 6:12pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/17 "2014-10-31T18:12:52Z")
\*\*New UMG Node for my Victory BP Library Get All Widgets of Class Ideal for UMG Level Transitions\*\* I needed node for Solus and so I am now sharing it with you! The was that I could not save a reference to my new widget because it is loaded and then a level change occurs which resets all my HUD variables. So I needed to access the widget after it was created dynamically, not relying on stored references within the HUD class. I also did not want to have to store a reference to it in my Game Instance class cause then that leads to garbage collection issues. I had to make the node for my own use and I have tested it as working in Solus! \*\*Now you can retrieve an array of any type of UMG widget instances in your game at any time! \*\* ```auto **Victory BP Library Download** https://wiki.unrealengine.com/File:VictoryPlugin.zip ``` **C++ Code** Here’s what my C++ for node looks like! ```auto void UVictoryBPFunctionLibrary::GetAllWidgetsOfClass(UObject* WorldContextObject, TSubclassOf WidgetClass, TArray& FoundWidgets) { //Prevent possibility of an ever-growing array if user uses in a loop FoundWidgets.Empty(); // ~~~~~~~~~~~~ if(!WidgetClass) return; if(!WorldContextObject) return; UWorld* const World = GEngine->GetWorldFromContextObject(WorldContextObject); if(!World) return; // ~~~~~~~~~~~ for(TObjectIterator Itr; Itr; ++Itr) { if(Itr->GetWorld() != World) continue; // ~~~~~~~~~~~~~~~~~~~~~ if(Itr->IsA(WidgetClass)) { FoundWidgets.Add(*Itr); } } } ``` ```auto **Pic** ![GetAllWidgetsOfClass.jpg|1280x960](upload://k3rJSJemWVjAQ9p7eXZQVNYeJAl.jpeg) Enjoy! ``` ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [December 17, 2014, 8:35pm UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/18 "2014-12-17T20:35:28Z")
Bump for those who have not seen ! ---
**Author:** ![anonymous\_user\_88daa2b7](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_88daa2b7](https://forums.unrealengine.com/u/anonymous_user_88daa2b7)\ **Post date:** [June 13, 2015, 4:13am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/19 "2015-06-13T04:13:10Z")
Hey , is there a way to implement in C++? I extended UserWidget to my C++ project and all I would like to do is add buttons to my ScrollBox via C++. Best ---
**Author:** ![Rama](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/rama/32/882413_2.png) [@Rama](https://forums.unrealengine.com/u/Rama)\ **Post date:** [June 15, 2015, 6:33am UTC](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650/20 "2015-06-15T06:33:33Z")
> [@ChrisTheEngineer;310236](#): > > Hey , is there a way to implement in C++? I extended UserWidget to my C++ project and all I would like to do is add buttons to my ScrollBox via C++. > > Best Rather than trying to use UMG in C++ I’d recommend taking advantage of **BlueprintImplementable** **Events** to tell UMG whatever you want it to do from C++! way you can do all the button creation logic in C++, and just send the parameters to BP / UMG to build and initialize the buttons. **Wiki on BP Implementable Events** [https://wiki.unrealengine.com/Blueprints,\_Empower\_Your\_Entire\_Team\_With\_BlueprintImplementableEvent](https://wiki.unrealengine.com/Blueprints,_Empower_Your_Entire_Team_With_BlueprintImplementableEvent) 🙂 [Next page](https://forums.unrealengine.com/t/s-umg-tutorial-create-a-scrollable-list-of-buttons-from-a-dynamic-array/11650.md?page=2)