# Selector

### <mark style="color:blue;">Now, when you have created your Page, we can finally start playing the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**main**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">thing of this entire product:</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Modular Options**</mark><mark style="color:blue;">.</mark>

And we begin with probably the most valuable and code-heavy of all four - Option Selector.

***

Open the `Page` asset you've created in the previous chapter. In the widget **Palette,** at the **User Created** category, find **WBP Modular Selector**, and just throw it at `Vertical Box` you've placed recently on that `Named Slot`:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2Fol2NAqHAr9ftUKN9nQPM%2Fadding%20Selector.png?alt=media&#x26;token=af7436e9-b575-4a65-8f44-e70d9878d61b" alt=""><figcaption></figcaption></figure>

Now we will focus on the *'User Specified'* area, where you specify each field you are interested in:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FsWKYV7E0TDUB2EC7Ggv6%2FSelector%20User%20Specified%20area.png?alt=media&#x26;token=4041b0d7-e96a-4626-8633-6141e0e68143" alt=""><figcaption></figcaption></figure>

* `Selector Type:`  just change type of your widget when you want to.&#x20;
* <mark style="color:blue;">`Array Of Options:`</mark> it is a simple array of `Texts`, most of the time you fill it right there, but sometimes you leave it empty and untouched and specify your <mark style="color:blue;">options</mark> inside Blueprint with dedicated function and it will be filled at the runtime.
* `Default Value:` since this **Modular Option** is <mark style="color:blue;">integer-based</mark>, all you have to handle when the <mark style="color:blue;">**Option**</mark> is switched - is its index(<mark style="color:blue;">`Int`</mark>). So just fill this field with the index number (*if incorrect -* *`Reset to Defaults Button`* *will do nothing to such an <mark style="color:blue;">**Option**</mark>*).
* `Custom Default Value:` sometimes you don't know what the default value should be, and you have to get it at runtime programmatically. For such situations, this checkbox exists. Once it's checked, - `Default Value` checkbox above will be ignored, and you'll have to handle it via Blueprint *(just ignore for now, we'll get to that later)*.
* `Option Name:` that will be displayed to the player.
* `Option Tool Tip:` will be shown if the mouse hovered over the `Option Name`. This functionality is completely raw and untouched, it is presumed that you'll implement it your own way (if even you think that it is necessary in the first place), since there are plenty of cool and very different ways you can possibly do that.
* `Auto Apply:` i think this one is pretty self-explanatory.

For this example, I filled it with something like that:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FGWbqp7M47w5uiZibRH58%2FSelector%20UserSpecified%20filled.png?alt=media&#x26;token=ac5331f3-17a0-40c8-9ca2-7c992e6e1dc1" alt=""><figcaption></figcaption></figure>

And you can see that Widget part works in game:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2Faa8wopqUE3dXYmLtCVX5%2FSelector%20Example%20in%20game.png?alt=media&#x26;token=23414f4c-8b51-4b11-a8c1-2c85337c3c4e" alt=""><figcaption></figcaption></figure>

***

### Now lets make it do something.

Scroll down to the **Events** section, and there click at <mark style="color:blue;">**Option Selected**</mark>:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FQpirt1KvzIgQH5AKMfmZ%2FSelector%20Events%2C%20Option%20Selected.png?alt=media&#x26;token=bf239c42-56df-4ed8-a732-e9595095b1f3" alt=""><figcaption></figcaption></figure>

This is the main **Event Dispatcher** for this widget.

You probably have plenty of useful applications that make sense for such a widget, but in my case for sake of example I'll just stick with a simple `Print String` functions:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2Fhf7Y7q7ERf6tqz43jp0X%2FSelectors%20Option%20Selected%20Even%20printing%20itself.png?alt=media&#x26;token=84f727e5-0747-4dea-9867-e1035f12a957" alt=""><figcaption></figcaption></figure>

And in game it truly printing once button clicked! Isn't that a miracle?!

Besides, since I specified correct `Default Value`, clicking `Reset to Defaults` button also performs correctly.

Okay, now we have a little problem. As you might notice, when you launch the game, `Selector` is not selected any option, it means it is deselected and started at -1. To deal with that, <mark style="color:red;">**`On Construct`**</mark>(I prefer <mark style="color:red;">**`On Pre-Construct`**</mark>) you must specify which <mark style="color:blue;">Option</mark> at what index you want to be selected.

To do that, go to your **Page's** <mark style="color:red;">**`Pre-Construct`**</mark> `Sequence` node which you left empty in the previous chapter, pull your `Selector` variable there, and run a single function from it:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FwhbUJLXmcs1haKNd38R4%2FSelector%20Example%20selecting%20on%20pre-construct.png?alt=media&#x26;token=310bfd42-8ed7-4b76-bc5c-54004ef95826" alt=""><figcaption></figcaption></figure>

Now when you launch the game, you can see `Print String` message of this <mark style="color:blue;">Option's</mark> index once the game appears on the screen, and the widget part *(button, menu, toggle, slider or whatever)* is already set as well.

In some cases however, <mark style="color:yellow;">you</mark> <mark style="color:yellow;"></mark><mark style="color:yellow;">**don't want**</mark> the `Option` to perform its <mark style="color:red;">**functional part**</mark>, you just want *'silently'* set the <mark style="color:green;">**widget part**</mark>. For such purposes exists nearly identical function:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FRcuildJNAdiNGJ00ddEF%2FSelector%20Example%20silent%20selecting%20on%20pre-construct.png?alt=media&#x26;token=f3dab101-ef9e-406f-a7e3-fed941e63cab" alt=""><figcaption></figcaption></figure>

As you can see, there is no `Print String` message on startup anymore, but your widget part is selected.

And by the way, those are general-purpose functions, which could be used all over the place, not necessarily for running them just on startup.

Now lets quickly cover up the second `Event Dispatcher` of this Widget:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FDaEWDe7lhaQo8pgrW0Ry%2FSelector%20reset%20to%20default(custom)%20selecting.png?alt=media&#x26;token=1f30dd0f-c20d-4062-ae0b-16e469376419" alt=""><figcaption></figcaption></figure>

I am implementing it simply like so:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2Fbj43LWFpAMD3Cvqesvfg%2FSelector%20custom%20to%20defaults%20implementation.png?alt=media&#x26;token=59b5f773-db90-4502-81a2-55e8bfc13342" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Do not forget to check `Custom Default Value` checkbox in order it to work!
{% endhint %}

Go and try press `Reset to Defaults` button now.

The last thing that remained to be shown is `Auto-Apply` functionality. Just uncheck it and go play with it in game.

***

#### <mark style="color:green;">That's enough for now. All the basic functionalities of the Option Selector are covered.</mark>
