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)

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

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

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

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

Give them a color you think appropriate.

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

Don’t forget to make them editable by clicking that eye thing!

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

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

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

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

Set horizontal box’ all offsets to 0.

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

From the Designer section select Button1 and add event OnClicked.

Add this code to OnClicked(Button1) event.

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

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

Create a function called SetSelectedOption and add the shown functionality.

Create a function called GetSelectedOption and again…

Create GetSelectedOptionIndex and again…

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

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

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

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.

**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.

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…