UMG question

Development Programming & Scripting Blueprint
1

Hello,

could anyone explain me how to make a scroll menu. I know I can add an existing widget inside a scrollbox and that will be the scrollbox. But how do I do that?

I’ve got a scrollbox, I’ve got the widget that has to go inside of it. How do I add it inside of the scrollbox?

2

Example - Create a scroll box menu that will dynamically contain buttons with resolutions added to them.

  1. Create a UMG Widget blueprint. Delete the canvas. Add a border then add a canvas on top of that. Add a scroll box. Select the scroll box in the Hierarchy panel, rename it in the Details panel, then check the IsVariable box.
  2. Create a UMG Widget blueprint. Delete the canvas. Add a horizontal box. Add a button to the horizontal box and set it to fill-1.0, Horizontal Align Fill, Vertical Align Top. Add a text box onto the button and add padding if you wish.
  3. With the button selected, in the Details panel, under the Events category, select the OnClickedEvent dropdown and select Create Binding. It will automatically take you to the Graph, inside of the new event you just created. Rename the event to something useful like ChangeResolution.
  4. Here is where you would input logic to actually change the resolution (Create a Text variable called ResText and set the default text to whatever you want, like Resolutions. In the ChangeResolutionFunction, Execute a Console Command to set the resolution. Create a FormatText node. In format, type r.SetRes {res} and this will create a specifier. Get ResText and attach).
  5. Go back to your scroll box container widget. In the Graph, create an EventConstruct (Right click and start typing that in. It will be under UserInterface). Next, add a ForEach node. Create a text variable array called ResStrings. Type in the resolutions using the following format: 1920x768. From there, add a CreateWidget node and set the WidgetType to the name of the blueprint widget you want it to hold, in our case BPW_ResolutionButtons. Next, from the ReturnValue pin, cast to that widget type (BPW_ResolutionButtons). Attach the ResText to the ArrayElement pin (ForEachLoop), attach the Content to the ReturnValue pin (CreateWidget), and set the target to the ResolutionList variable (this is your scrollbox that you should have named and set to be used as a variable).

ResolutionButtons.png
ResolutionButtons.png1909×1078 187 KB

OptionsMenu.png
OptionsMenu.png1919×1079 222 KB

That’s all there is to it! Hope this helps :slight_smile:

3

Thanks for answering, I’ll check it out! However you attachments don’t work!

4

I just uploaded new ones!

5

Thanks! It’s late now. But I’ll give it a try tomorrow, thanks in advance and I’ll get back to you with the results!

6

Thanks for this, i was stuck on the very same kind of thing, but used for something else :slight_smile:

7

No problem! :slight_smile:

8

Thanks a lot ^^ This will help me a lot too.

9

Is there a possibility add rows, collums etc in the scrollbox? Cause it seems to be really limited

Simply put the buttons become really small

10

Probably there is a way, but I haven’t tried myself yet. It should resize automatically though, if you did it right. Right now, they don’t have their layout panels finished yet as this is still experimental, but I am sure you will be able to do this eventually. It actually acts a lot like WinForms, which I like bc I have worked in that for a long time :slight_smile:

Can you post a screen of what your resolution buttons look like as well as the graph for the widget that contains the scroll box and also for the resolution button widget? I will see if I can help you debug your issue.

11

Very well explained, I know is example just to format the scrollboxes, but direct don’t show the resolution text in each button added in the scrollbox isn’t it? I add a TextBlock to the button ScrollBox of the BPW_ResolutionButtons, how can we access to this child TextBox to set it up after in the BPW_TtileMenuOpcioncasted it in the Event Graph?

12

If I am misunderstanding what you are asking, please let me know. I think that you are asking how we replace the temporary holding text on the button to contain the resolution text (i.e. 1920x1080).

First off, just to put this out there, be sure to type the resolution like that exactly bc what we are doing in this example is actually a console command and this is the format it expects in order to change the resolution.

Now, to answer your question, first let’s take a look at what is going on in this graph:

example.png
example.png1627×948 163 KB

This is the graph for the scroll box. Notice that I have the ResStrings array selected so that you can see the elements of that array. Here we have the resolutions that we want to be used as the button text. You will see that we are using a for each loop, so basically we are saying for each element in the ResString array, create an instance of the resolution button and replace the placeholder text with the text from the array index we are currently on and add it to the scroll box. The way we are able to do that is by creating the resolution button widget, then we cast to that widget so that we can access its elements. We then set the button’s ResText, which is currently using the “Resolution” placeholder text, to the text in the current array index we are on in the loop. We then add the child, the resolution button, to the scrollbox. Remember to make the scrollbox a variable and name it so you can access it. For example, my scroll box is named ResolutionList.

Let me know if this makes sense of if you have any other questions!

13

So you purpose a new widget to set up the button? Sure is the right way (links), like scrollbox widget to append the option widget.

I place the way I get it, if somebody could place the example to follow the right steps will it be much appreciated.

624a1bf1b34977e4515ebf7be72d3ccd0838ec78.jpeg

14

I’m having a difficult time understanding what you are asking. If you are attempting to follow my example, the way I did it is the correct way. What exactly are you trying to do in the graph you posted? don’t need to cast to the text box. You cast to the button that contains the text box and input the string there. I know mine works because I have a full menu system built that I am pulling these screen shots from so unless you are trying to do something else that I am not understanding, there’s no need to cast it to the button and then to the text box. The text box should automatically resize to fit the text. If it isn’t, either your text is too long and it cannot wrap or, if you are using a style for the buttons, then you need to make sure they are set to draw as box and not image. Make sure you have the buttons are set to Fill 1.0, Horizontal Align Fill, Vertical Align Top. Make sure your scroll box the size you want the buttons to be. The buttons should align them all to the size of that box. If you want to change the alignment dynamically, you can cast to buttons and then Get Alignment and set to Fill, 1.0 or whatever you want. Here’s my end result from the setup I initially posted above. The logic where you are creating the widget and casting to the button should be taking place in the event graph of the widget that contains the scrollbox. The resolution button is a separate widget that simply holds the action binding for the button, so in this case it executes the console command to change the screen resolution.

duringruntime.png
duringruntime.png1918×1056 38.6 KB

15

Thank you for response…

For me doesn’t show in that way, at the beginning I suppoused is necessary a Text Block in the button of the scroll box, in your example I didn’t found you placed it, anyway if you have place it, in which point make reference to this text box to set it up?

How you make this?, I haven’t found so parameters.
align.jpg

16

Oh ok wait so in step 2 there was a typo, which I now fixed; sorry. It should read:

  1. Create a UMG Widget blueprint. Delete the canvas. Add a horizontal box. Add a button to the horizontal box and set it to fill-1.0, Horizontal Align Fill, Vertical Align Top. Add a text box onto the button and add padding if you wish.

Does that solve the issue?

17

TYPO in step 2

Step 2 should read:

  1. Create a UMG Widget blueprint. Delete the canvas. Add a horizontal box. Add a button to the horizontal box and set it to fill-1.0, Horizontal Align Fill, Vertical Align Top. Add a text box onto the button and add padding if you wish.
18

Start from scratch and as well don’t format the text over the buttons, I can’t see in you graphs the point where set that texts, or entire button with the text, just set the var “ResText” for apply the Command.
Neer mind, Thank you for your time, like I told you at the beggining works in different way, don’t have a headache from me :smiley:

19

I’m sorry that I’m digging out dead threads but I had like Orono Studio (and maybe others) some issues to set the text field of the buttons, but @ a big thank you.

Here is my addition to show the corresponding strings in the textfields:
Go to the ButtonWidget, in this case called BPW_ResolutionButtons, make sure you marked the textfield as variable as well. Go the graph and do the following:

Screenshot_ButtonWidget.png
Screenshot_ButtonWidget.png888×513 60.7 KB