Download

Creating a Widget Template: Selectable

Hello everyone

I wanted to share a widget template with you.

**IDEA: **
Sometimes you have an option that has just two selections available. From a straight perspective, just a checkbox is enough. But what if these two selection available isn’t just a simple yes/no or on/off? Imagine you have two antialiasing available; Temporal and FXAA. See, this is not just an on/off question. Well, in this case, most people would go for a combobox. But a combobox isn’t that of a good idea if you only have two options. It is designed for situations where there are many options. Therefore I find this as a bad idea from a design perspective(Though I am not a designer). So, this tutorial comes in here.

To get an idea. Basically we are trying to create this: (I am surprised unreal don’t have it as a ready template under palettes. Hope it will be added in the future versions of the engine)
1f540ecf395dd0c7f205caa13487a4431f9a4e5c.png

**TUTORIAL: **
Start by creating a widget and name it BP_Selectable(Let’s not start with how my naming sucks).
eaab967fa72b17cd252f71dad086ef80e3aafbe3.png

Add a horizontal box and add two buttons as children to that horizontal box. After that name buttons Button1 and Button2 in order.
d503934a94194a0bfe71995e04fe38c6d0f0c92b.png

Add text as child for each button and name them Text1 and Text2 respectively. Make them both variables!
3e87baf4901e50db7dc7103f5387d8f3a7ad7941.png

In the Graph section create new variables named ColorSelected and ColorInactive. Don’t forget to make their type “Linear Color”.
090ede6831d5f7226a45f87892bf564d15591066.png

Give them a color you think appropriate.
b2d5b8527a91b0d6717e202a5ffd3a3c9cb050b3.png

Create new variables named Option1 and Option2 and make their type “Text”.
b5c9106e1b0f53273455ef286bdb78a576c573ab.png

Don’t forget to make them editable by clicking that eye thing!
0f6603b1c8f6e56ed3fcd3a5a38d4e8be2b61dfb.png

Go to Designer section and select Text1. At content section click bind and bind Option1 we created. After this do the same for Text2 and Option2.(If you are not seeing Option1, then you have missed the former step!)
69787cebe9797176b63fecaaf4c89323acb55891.png

Now time to create our final variable isOption1Selected. Make it a boolean and set default value to true. This is important!
688a2a1db18989e6487419f885689f030cda4177.png

Please go back to Designer section again and select both Buttons. Inside Layout section, select “Fill” as their side option.
978e4d9d6bf9f1fda29bcd25823329cbbc77bd36.png

Select horizontal box and make its anchor this thing in the image(Fill maybe?).
a4824fdf658bbd4920da18f6fe3a5f747be8bcaa.png

Set horizontal box’ all offsets to 0.
8c16f7fdde307e531017d5bd3402cd7ab88651a3.png

Now go back to Graph section and add this code to Event Construct.
d399631ebd875ed7fc62ca7527358145ff3cb42a.png

From the Designer section select Button1 and add event OnClicked.
fd32741dda132ae669d2e397223a8638bda004ca.png

Add this code to OnClicked(Button1) event.
2f6b352642ef287bad7c960fa70756e91a1b1759.png

Repeat the last two steps for Button2. This time be careful about which color we are using!
16.png

Create a function called SetSelectedOptionIndex and add this functionality in it.
1b526f52a5ebe9a5d2c1762cec72755ac2bb31b6.png

Create a function called SetSelectedOption and add the shown functionality.
03297effc75cd44566f999c373647f757aaec28f.png

Create a function called GetSelectedOption and again…
f922ade405b19d31ba8d380290fe42c4a18c0031.png

Create GetSelectedOptionIndex and again…
389d57b72c31a23e298314fa3165d5732befa708.png

Create an Event Dispatcher called OnSelectionChangedIndex and add an integer called Index as input
21.png

Create an Event Dispatcher called OnSelectionChanged and add a string named Option as input.
ee3140ad5c58bc39a065b68e0218f15ea79a3cdc.png

Add the shown functionality at the picture to Your OnClicked(Button1) and OnClicked(Button2) events as shown.
05aa6277d33a034365082d5eb950158ee3e7df10.png

Now here comes the important stuff. Imagine our user clicked on button1 and then he decided to click Button1 again. Our events OnSelectionChanged and OnSelectionChangedIndex are called twice although our selection has not changed at all! In order to avoid this, add the shown code between OnClicked events and their code.
5ee3405c13cde60292e98534c64af1d5e9ffa7f3.png

**Usage: **
All the process is now complete. You can add this template to any widget you like and reuse it as many times as you desire.

You can bind OnSelectionChanged events like this. It will be called whenever selection changes.
31bb8a1dd234d40915fa7a58f70ccc737ef1c57a.png

In my case. I am making a chess game. There are two sides; white and black. When one is selected the other gets disabled and I will know selection has changed through OnSelectedChanged event.

About the colors… Until I get my hands on an actual designer, it will stay that way… So try not to look so deep at it…
14afd201c2084b1eeacc2dc0e7f5b88b1984a534.png