# Creating Page for Options

In *Widgets* folder find and open widget called `WBP_Options` (*BTW*, *It is actually your primary **work-platform*****).**

Once you open it, look at its hierarchy tree. There in some `Canvas` should be a `Widget Switcher` that holds things in it, which i called *"Pages"*:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FtZ74wqU0nVHCADV942NE%2FWBP_Options%20WSwitcher%20before%20Examples%20Page.png?alt=media&#x26;token=121353ed-75b4-4f0a-b789-10ea97eab29b" alt=""><figcaption></figcaption></figure>

primary purpose of the `Page` is to be a container for all `Options` and other elements that are necessary.

So in this chapter our intention is to make one.

***

Before creating a new `Page`, open the folder where they are all located - *Widgets/Pages*. You can see already existing pages there, so right-click somewhere or click the <mark style="color:green;">**`Add`**</mark> button and find the category **User Interface**, and there select **Widget Blueprint**. In a <mark style="color:orange;">class-searching field</mark>, type *"page base"* and then select it as the <mark style="color:red;">base widget class</mark>. In my case, I'll name it `WBP_PageExamples`:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F77XvUYZy1a4Nw7qaOnII%2Fselecting%20PageBase%20widget.png?alt=media&#x26;token=6e9eb0ff-4f53-48d1-a155-0bf0c1b5db15" alt="" width="563"><figcaption><p>1</p></figcaption></figure>

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FpTt2RCI8BtU9IStsVO9B%2FPageExamples%20creation.png?alt=media&#x26;token=4192ffde-66e1-42f5-a5e1-07587397b676" alt="" width="563"><figcaption><p>2</p></figcaption></figure>

Now open the newly created widget, and in the hierarchy tree you should see just one `Named Slot`. Find a simple `Vertical Box` in **Palette** and drop it on that `slot`, rename it to something like I did in the screenshot and hit checkbox <mark style="color:green;">Is Variable</mark><mark style="color:purple;">.</mark> <mark style="color:yellow;">Compile</mark>:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FdIhZgyyNxqg6SsUU4GK8%2FAdding%20VertBox%20to%20Page%20Slot.png?alt=media&#x26;token=8c58aad2-97e8-4968-8f7c-41a04d46d5c5" alt=""><figcaption></figcaption></figure>

Now tab back to the `Options` widget, and add this `WBP_PageExamples` to the `WidgetSwitcher`, rename it, uncheck <mark style="color:red;">Is Variable</mark>. Then in **Details** find category for developers i named *'User Specified'*, there you'll see only one field, specify that <mark style="color:purple;">`Page Display Name`</mark>. <mark style="color:yellow;">Compile</mark>:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FW9JWJbb05rK8Gn7KEtNT%2FAdding%20Examples%20Page.png?alt=media&#x26;token=aa162a76-319b-4087-8c92-2556f4a1fbc0" alt=""><figcaption></figcaption></figure>

Try launch the game. Your empty Page should be present and all button's names must be correct.

{% hint style="warning" %}
One little thing that should be taken care of every time a new page is made - is adding a few crucial nodes to <mark style="color:red;">**Pre-Construct**</mark> (or <mark style="color:red;">**Construct**</mark>):
{% endhint %}

<div align="center"><figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F4CX44agrxTwny1lNqdjD%2FPageExamples%20basic%20pre-construct%20nodes.png?alt=media&#x26;token=b715c5e0-f8de-4325-92e0-9d0c34423713" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="danger" %}
That function call you see at <mark style="color:yellow;">**`3`**</mark> - is absolutely <mark style="color:red;">**MUST**</mark> to be executed after all things you have initialized on your <mark style="color:red;">**`Pre-Construct`**</mark>/<mark style="color:red;">**`Construct!`**</mark>
{% endhint %}

***

### <mark style="color:green;">And that's all!</mark> :thumbsup::clap:

In the next chapters we will learn how to populate `Pages` with `Options` and other widget-elements.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://irrelevant-pixel.gitbook.io/irrelevant-pixel/getting-to-know-how-to-use-it/creating-page-for-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
