# Creating a window displaying a widget

{% stepper %}
{% step %}

## :page\_facing\_up: Requirements

To have a basic understanding on how this plugin gets used

* you followed step **2:** [**Installing This Plugin**](https://kibibyte.gitbook.io/multi-window-extension/installing-this-plugin)
* you followed step 3: [**Enabling This Plugin**](https://kibibyte.gitbook.io/multi-window-extension/enabling-this-plugin)
* you followed step 4: [**Working With The Subystem**](https://kibibyte.gitbook.io/multi-window-extension/working-with-the-subsystem)
  {% endstep %}

{% step %}

## :heavy\_plus\_sign: Creating a widget to display on the window

1. Right click in your content browser. If you don’t see your content browser, press CTRL+Spacebar on your keyboard
2. Hover over “User Interface”
3. Click on “Widget Blueprint"
4. Click on “User Widget”
5. Name the widget like you want. But remember how you named it

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2FeZSkb3G6uSIwxdhY7AvZ%2FAufzeichnung%202024-02-10%20222249.gif?alt=media&#x26;token=9ca944b6-1258-424b-ac94-f77a403c9078" alt=""><figcaption></figcaption></figure>

6. After you named the widget, double click to open it
7. In your Palette, search for “Canvas Panel”
8. Drag and drop the Canvas Panel on your widget root

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2FxBTpcgPA0w8v6kQnEnEj%2FUntitled.png?alt=media&#x26;token=450142f1-8cb6-4d9f-90a6-1718b1fcc07e" alt=""><figcaption></figcaption></figure>

9. Add what ever you like. Example: A Text

→ Search for “Text”. Drag and drop the text on your Canvas Panel

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2FqlFxxWSPXaOvfCxfiOir%2FUntitled2.png?alt=media&#x26;token=b1a913e8-d2e2-491f-8369-7e0333dbc778" alt=""><figcaption></figcaption></figure>

10. Compile and save the widget

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2FlpSXh7V92jgiHwLwRnen%2FUntitled3.png?alt=media&#x26;token=03664b92-f8d0-4d10-932f-d2cf083e3c87" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

## :computer: Creating the window

1. Go into any blueprint, [call the subsystem](https://kibibyte.gitbook.io/multi-window-extension/working-with-the-subsystem) and from there, call the “Create Window” node.&#x20;
2. Make the Window Settings struct
3. Click on the arrow to expand the struct to see more settings
4. Make the Advanced Border Settings Struct
5. Make the Size Restriction Settings Struct and expand it
6. Make the Bool Values Struct and expand it

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2F6iypF5plzlEbB9afSixU%2FAufzeichnung%202024-02-10%20221627.gif?alt=media&#x26;token=0ee9db9b-9dc6-4915-9bc1-605b9078f8ee" alt=""><figcaption></figcaption></figure>

7. Now you can see all the settings for creating a window. If you want to know more about what each settings does, make sure to check out the [Window Settings](https://kibibyte.gitbook.io/multi-window-extension/all-nodes/structs/window-settings) struct
8. Run this code for creating a window anywhere and whenever you want and you will get a result like the following picture. Now you can easily tweak the widget and the window however you want&#x20;

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2FxSjvUE9vUO1Z9zDUGOUa%2Fimage.png?alt=media&#x26;token=e85965ec-9813-421d-9a71-225207636fd2" alt=""><figcaption></figcaption></figure>

When you now tweak the data shown in your widget, you can do stuff like this:

<figure><img src="https://3004307226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6enYcHpHQYBydrytzoC1%2Fuploads%2Ff39Q51Bj4ExMzGGBhcwR%2FAufzeichnung%202024-02-13%20182942.gif?alt=media&#x26;token=80d88474-eb66-4455-acf4-8be25632c18a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

## :pray: Final Words

Are you enjoying this plugin? Then don’t forget to [leave a review to support the creator!](https://www.fab.com/listings/c979e063-985b-4ea5-9fbb-bef1340b6a1c?tab=reviews)
{% endstep %}
{% endstepper %}
