x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

Office Holiday

Epic Games' offices will be on holiday from June 22nd to July 7th. During this period support will be limited. Our offices will reopen on Monday, July 8th. 

Create Reusable Button Widget

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!

Product Version: UE 4.15
Tags:
more ▼

asked Aug 11 '17 at 07:25 PM in Using UE4

avatar image

aspartamed
120 26 34 40

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

1 answer: sort voted first

Hello aspartamed,

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

more ▼

answered Aug 12 '17 at 01:59 AM

avatar image

Fjellgnu
562 18 24 41

avatar image aspartamed Aug 14 '17 at 12:11 PM

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?

avatar image Fjellgnu Aug 14 '17 at 12:47 PM

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.

avatar image aspartamed Aug 14 '17 at 02:27 PM

So I created a binding alt text

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

alt text

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

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!

binding.png (4.3 kB)
event.png (170.6 kB)
set.png (3.1 kB)
avatar image Fjellgnu Aug 14 '17 at 05:20 PM

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

avatar image aspartamed Aug 14 '17 at 05:30 PM

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

avatar image Fjellgnu Aug 14 '17 at 05:59 PM

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.

TextVariable

textvar.png (26.9 kB)
avatar image aspartamed Aug 14 '17 at 06:10 PM

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

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.

clairfy.png (36.8 kB)
avatar image Fjellgnu Aug 14 '17 at 06:37 PM

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

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.

ButtonReference

buttonref.jpg (29.8 kB)
avatar image aspartamed Aug 15 '17 at 07:09 PM

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.

avatar image Fjellgnu Aug 15 '17 at 07:44 PM

You're welcome!

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

avatar image aspartamed Aug 15 '17 at 08:02 PM

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.

avatar image Fjellgnu Aug 15 '17 at 08:28 PM

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) ?

avatar image Archduke_ Aug 15 '17 at 07:57 PM

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.

avatar image Fjellgnu Aug 15 '17 at 08:37 PM

Yes, that never occured to me either.

avatar image MyroG Mar 01 '19 at 08:17 PM

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

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question