# Set up the context of custom widgets

> [HTML Version](user-widgets-context.html)

When working with widget context, you can create variables that are used to configure interfaces and write scripts. 

However, note that the context of system and custom widgets are different. Read more about working with system widget context in [Context types](context_types.md).

When creating a [custom widget](user_widgets.md), you can specify the input and output variables, which you cannot do in system widgets. You can also modify the settings form that opens when you place the widget on a form, page, or within another widget template.

To do this, go to the [custom widget designer](user_widgets.md#custom-widget-constructor) and select the **Context** tab.

## Input and output variables

When you place a widget on a form or a page, you can use the **Input** and **Output** options to:

- Manage the visibility of the widget’s variables in the context of a page or a form.

- Pass the widget’s context to the context of a page or form.

For this option to work correctly, you need to map the widget’s context variables to the properties of the form or page that it is located on.

To enable the **Input** and **Output** options, open the widget in the [interface designer](interface_designer.md). On the top panel, select the **Context** tab. Configure the options for each variable.

**(custom-widget-context.png)**

- **Input**. This variable will record and store the value of a property from the form or page that the widget is located on.

- **Output**. The value of this property will be passed to the property of the form or page that it is located on.

- **Both options are enabled**. In this case, when the value of the widget’s variable changes, the value of the form or page property will also change, and vice versa.

- **Both options are disabled**. In this case, the value of the widget’s variable is not passed to the form or page context. The variable is not mapped with a field of the form or page. Its value is set up in the widget’s settings when the widget is added.

## Example of configuring additional options

To see how the **Input** and **Output** options work in real life, take a look at the following example. Let’s create a widget named **Calculator**:

1. Go to **Administration > Interfaces**, click **+Create**, select **Widget**, enter its name, and save the settings. 

2. The interface designer will open. Click **+Widget** and drag the [Panel with header](panel_with_heading.md) widget to the modeling canvas. 

3. Go to the **Context** tab and add properties of the [Number](360009707032.md#number) type:** Addend 1**, **Addend 2**, and **Sum**. 

4. Set up additional options for the added properties: 

	- For **Addend 1** and **Addend 2**, enable the **Input** option.

	- For **Sum**, enable the **Output** option.

5. Go back to the **Template** tab. On the right-side panel, switch to **Properties** and drag the added variables to the canvas. Place them inside the **Panel with header** widget. 

6. Now add a [script](client_server_scripts.md) that will calculate the sum of the **Addend 1** and **Addend 2** fields. To do that, select the **Addend 1** field click on the gear icon next to its name to open the settings. Go to the **Events** tab and click **Create** in the **On value change handler**. Enter a name and click **Create** and **Open**. On the **Scripts** tab that opens, add the following: 

````
async function calc (): Promise<void> \{  
    debugger;  
    Context.data.sum = Context.data.addend\_1 \!== undefined \&\& Context.data.addend\_2 \!== undefined ? Context.data.addend\_1 + Context.data.addend\_2 : undefined;  
    \}

````
Do the same for **Addend 2**.

7. Save and publish the widget. Now you can add the custom **Calculator** widget to pages and forms of apps.

Let’s say you have the **Clients** app. You can place the **Calculator** widget on its form. In **Settings**, map the widget’s variables to the app’s field named **Total**.

As the **Input** option is enabled to the **Addend 1** and **Addend 2** variables, the values of the mapped fields will be passed to the widget. The script will calculate the total. Since the **Output** option is enabled for the **Sum** field, its value will then be passed to the **Total** field.** **

**(context_06.PNG)**

## Create a widget settings form

You can create a custom settings window for each widget you create to define the widget’s behavior.

To do this, click the **Create Form** button in the upper-right corner of the **Context** tab. The interface designer will open.  Here you can change the layout of the settings window, create new context variables, write scripts, etc.

By default, the settings form template contains a preconfigured [Tabs](tabs.md) widget, which already has **Main**, **Events**, and **System** tabs. The **Main** tab contains the [Standard settings form](settings-standart-form-widget.md) widget. You can reconfigure or delete these objects, as well as [add widgets](360027211631.md) or properties.

**(custom-widget-context01.png)**

When you finish making changes, click **Save** on the top panel of the interface designer. To go back to the custom widget creation page, click **(back-arrow.png) **in the top left corner of the page.

When the widget is published, the new settings page will be available to users when they place the widget on a form, page, or inside another widget template.