# Настроить контекст пользовательского виджета

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

При работе с контекстами виджетов вы можете создавать переменные, которые будут использоваться для настройки интерфейсов и написания скриптов.

Обратите внимание, контексты системного и пользовательского виджетов различаются. Подробнее о работе с контекстом системного виджета читайте в статье [«Типы контекста в интерфейсах»](context_types.md). 

В контексте [пользовательского виджета](user_widgets.md), в отличии от системного, вы можете указать, какие переменные являются входными и выходными параметрами. Также вы можете изменить форму настроек, которая открывается при размещении виджета на форме, странице или в шаблоне другого виджета. 

Для этого перейдите в [конструктор пользовательского виджета](user_widgets.md#custom-widget-constructor) и выберите вкладку **Контекст**.

### Входные и выходные переменные 

При размещении виджета на форме или странице с помощью опций **Входное** и **Выходное** вы сможете: 

- управлять видимостью переменных виджета в контексте формы или страницы;

- передавать контекст виджета в контекст страницы или формы.

Для корректной работы настройки, необходимо сопоставить контекстные переменные виджета со свойствами формы или страницы, на которых данный виджет располагается. 

Чтобы включить опции **Входное** и **Выходное**,** **перейдите в [дизайнер интерфейсов](interface_designer.md) добавленного вами пользовательского виджета. На верхней панели выберите вкладку **Контекст**. Настройте опции для каждой переменной.

**(context-types-5.png)**

- **Входное** — в данную переменную будет записываться значение свойства формы или страницы, на которую добавлен виджет; 

- **Выходное** — значение переменной виджета передаётся в свойство формы или страницы;

- **Включены обе опции** — в этом случае при изменении значения переменной виджета будет меняться значение свойства формы или страницы и наоборот;

- **Отключены обе опции** — переменная виджета не будет передаваться в контекст формы или страницы. Переменную не нужно связывать с полями на странице или форме, её значение задается в настройках виджета при его создании.

### Пример настройки дополнительных опций 

Рассмотрим работу опций **Входное** и **Выходное **на примере. Создадим пользовательский виджет **Калькулятор**. Для этого:

1. Перейдём в **Администрирование > Интерфейсы**, нажмём **+Создать**, выберем **Виджет**, укажем его название и сохраним настройки. 

2. Откроется дизайнер интерфейсов. Нажмём **+Виджет** и добавим на поле для моделирования [Панель с заголовком](panel_with_heading.md). 

3. Перейдём на вкладку **Контекст **и добавим свойства типа [Число](360009707032.md#number): **Слагаемое 1**, **Слагаемое 2**, **Сумма**. 

4. Настроим дополнительные опции для добавленных свойств: 

- **Слагаемое 1** и **Слагаемое 2** — включим опцию **Входное**;

- **Сумма** — включим опцию **Выходное**.

5. Вернёмся на вкладку **Шаблон**. На правой панели дизайнера интерфейсов нажмём **Свойства** и перенесём добавленные переменные на поле виджета **Панель с заголовком**. 

6. Добавим [скрипт](client_server_scripts.md), в котором будет просчитываться сумма значений полей **Слагаемое 1** и **Слагаемое 2**. Для этого выберем строку **Слагаемое 1** и откроем настройки, нажав на значок шестерёнки рядом с названием. Перейдём на вкладку **События** и нажмём **Создать** в поле **Событие при изменении значения**. Введём название и нажмём **Создать** и **Открыть**. На открывшейся вкладке **Скрипты** добавим команды: 

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

````
Таким же образом привяжем добавленный скрипт в настройках строки **Слагаемое 2**. 

7. Сохраним и опубликуем виджет. Теперь мы можем добавлять пользовательский виджет **Калькулятор** на страницы или формы приложения.

Допустим у нас есть приложение **Клиенты**. Разместим на его форме настроенный виджет **Калькулятор**. На форме **Настройки** свяжем переменные виджета с полями приложения: в **Слагаемое 1** передадим поле **Сумма заказа №1**, в **Слагаемое 2** — **Сумма заказа №2**, в переменную **Сумма** запишем поле **Общая сумма заказов**.

При включённой опции **Входное** для переменных **Слагаемое 1** и **Слагаемое 2** значения связанных полей на форме будут передаваться в виджет. Сумма слагаемых рассчитывается при помощи скрипта. Затем значение переменной виджета будет передаваться в поле **Общая сумма заказов**, так как для переменной **Сумма** включена опция **Выходное**.** **

**(context_types-6.png)**

## Создать форму настроек виджета 

Для пользовательского виджета вы можете создать индивидуальную форму настроек, чтобы задать параметры работы виджета. 

Для этого на вкладке **Контекст** в правом верхнем углу нажмите кнопку **Создать форму**. Откроется конструктор формы настроек виджета. Здесь вы можете изменить её внешний вид, создать контекстные переменные, прописать скрипт и т. д. 

По умолчанию в шаблоне формы настроек размещён преднастроенный виджет [Вкладки](tabs.md), в котором уже созданы вкладки **Основные**, **События** и **Системные**. На вкладке **Основные** расположен виджет [Стандартная форма настроек](settings-standart-form-widget.md). Вы можете перенастроить или удалить эти объекты, а также [добавить виджеты](360027211631.md) или свойства.

**(user-widgets-context-1.png)**

После внесения изменений нажмите **Сохранить** на верхней панели конструктора формы настроек. Чтобы вернуться в конструктор пользовательского виджета, нажмите кнопку (context_types-7.png) в левом верхнем углу страницы. 

Если виджет опубликован, созданная форма настроек отобразится при размещении виджета в шаблоне страницы, формы или другого виджета.