Create Reusable Button Widget

Hello aspartamed,

You can bind the text component on the button to a variable and change the contents of that variable.

You need a text variable so create that first. The binding is done in the umg designer. Next to the text box under Content there is a small dropdown menu to the right. Open this and choose the text variable you created. It will now display the contents of the variable instead of the text written in the text box.

I just have to be sure here. You are changing the value under Default Value in the text variable? If you are right, we are probably looking at a bug in the engine.

204372-textvar.png

Ah ha! That makes more sense. I didn’t realize you had several widgets. :frowning:

I think this is a question wheter you want to change the button in the editor or at runtime. If you drag the CustomButton widget into the ButtonUser widget you can either change the text variable directly in the button or you need to use blueprint to change it at runtime.

The runtime option can be tricky but it all depends on how many button you need. Each button you drag into ButtonUser will have a reference variable that comes along with it. You need to use that reference to access the button variables.

204373-buttonref.jpg

I am building a UI using the UMG Editor. I am not sure the art style I will use for my buttons so I would like to create a prefab or a reusable widget that I can use in my various other Widgets for my screens. Then if I later decide I want the font larger or the button a different color I only have to modify it in the one place.

I started by making a widget that contained just a button that had text. This worked fine changing color and fotn on all instances whenever I compiled it. However it failed when I wanted to change the buttons text as there as no way I could do that

How can I create a button prefab/widget that changes will effect all uses.

Thanks!

How? That doesnt allow editing of the text in the UMG as far as I can tell. It requires code or blue print? or am I confused?

So I created a binding

193610-binding.png

Then I create a variable and set it in the bindign like so

Then I add the widget to my other UMG widget.
And edit the property in the editor

193612-set.png

But I dont see the difference in the editor. And playing I dont see the difference.

Clearly I am missing something. Thanks so much for the help!

Are there no difference if you change to contents of the variable?

correct no difference if I modify the variable. No differences in the editor or at runtime

I am changing the variable, in the widget that is using the customButtonWidget I created.

So I have a widget 2 Widgets

  1. CustomButton Widget

  2. ButtonUser Widget

CustomButton widget binds the text element of the button to a function, shown above as GetText_0

I created a variable called Button Text which is the return value of GetText_0

ButtonUser places multiple CustomButtons on the Canvas. The Button User will reflect any changes made to the CustomButton widget. In the ButtonUser widget clicking on a CustomButton shows the properties, which includes the Default->Button Text. Setting that property changes nothing.

I may be confused in one of the steps so I wanted to be clear what exactly I was doing.

Ok Yeah I see set it explicitly in the Constructor. This works at runtime, but unfortunately you cannot see the changes at design time. Thanks for the help. I still feel there is a better way out there. I cant be the only one trying to do this.

You’re welcome!

Can I ask what you are trying to make or is it secret? :slight_smile:

Eh, I set my button’s text through the constructor as well. The only difference from the above being that I have my “Button Text” exposed as a variable that I can edit in the designer. The changes don’t show at design time, though.

I honestly never thought to try to make it show at design time. It just wasn’t necessary. Generally button width will be consistent, so I set it according to my longest button text and never needed to worry about it.

Not sure yet, Just trying to learn how to build a reusable UI design properly. I couldn’t find good resources on reuse. All the examples I found build it one off.

I have never seen tutorials that do that either.

You called this prefab earlier so I guessing you are familiar with Unity? Is this something that is usual there (reusable buttons, I mean) ?

Yes, that never occured to me either.

If you want to see the changes at design time, you need to use the “Event Pre Construct” node

1 Like