# Передать событие в родительский виджет

> [HTML Version](event-in-widgets.html)

В ELMA365 вы можете создать пользовательское событие в виджете и передать его в другой виджет. Событиями могут быть нажатие кнопки, ввод данных в поле и т. д. Чтобы зафиксировать его, в контексте виджета добавляется поле типа **Событие**. При размещении виджета на форме или странице пользовательское событие отображается в настройках виджета на вкладке [События](common_widget_settings.md#event). Вы можете работать с ним так же, как и с системными событиями, доступными по умолчанию.

Рассмотрим примеры использования переменной данного типа:

1. Передача события из дочернего виджета в родительский — в дочернем виджете создаётся переменная типа **Событие**, а в родительском — к ней привязывается скрипт. Рассмотрим пример в данной статье.

2. Передача события между дочерними виджетами, которые расположены на одном родительском. Комплексный пример с использованием различных функций и дополнительных переменных. Подробнее о нём читайте в статье [«Передать событие между дочерними виджетами»](child-widget-event.md).

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

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

**(event-in-widgets-1.png)**

Рассмотрим подробнее, как выполнить настройку такой передачи данных.

## Шаг 1. Создать виджет «Фильтр данных» и настроить передачу события из него

Начните настройку с создания дочернего виджета. В нём нужно:

- добавить свойства для поиска;

- создать переменную типа **Событие**, к которой в родительском виджете нужно привязать скрипт для выполнения поиска;

- разместить кнопку **Найти**, чтобы при её нажатии передать событие в родительский виджет.

Для этого:

1. [Создайте виджет](interface_settings.md#create-widget) **Фильтр данных** со следующими переменными:

- **При поиске** — служебная переменная типа [Событие](360009707032.md#event). Она будет использована в скрипте, который передаст событие, произошедшее в виджете;

- **Строка поиска** — переменная типа [Строка](360009707032.md#string). В этом поле пользователь укажет название нужного договора;

- **Созданы после** — переменная типа [Дата/время](360009707032.md#date-time). Здесь можно указать дату создания договора для его поиска.  
**(event-in-widgets-2.png)**

2. Вынесите на шаблон свойства **Строка поиска **и** Созданы после**. Также добавьте виджет [Кнопка](button_widget.md) с названием **Найти**.  
**(event-in-widgets-3.png)**

3. В настройках виджета **Кнопка** укажите скрипт с переменной типа **Событие**, чтобы передать событие, когда пользователь нажмёт **Найти**.  
**(event-in-widgets-4.png)**

Для этого справа от поля **Выполняемый скрипт** нажмите **Создать**, введите название функции **search** и выберите **Сохранить**, а затем — **Открыть**. На вкладке **Скрипты** создастся асинхронная функция. Добавьте в неё следующий скрипт:

````
async function search(): Promise<void> \{  
    Context.data.onSearch\!.emit();  
\}

4. ````
Сохраните и опубликуйте виджет **Фильтр данных**.

Теперь его можно использовать в других виджетах как дочерний для настройки быстрого поиска элементов любых приложений.

## Шаг 2. Разместить виджет на странице и настроить скрипт при получении события

На готовую страницу **Оптовые продажи** со списком задач добавьте созданный виджет. Страница станет для него родительским виджетом. Для этого нужно:

- создать в её контексте переменные, чтобы записать данные фильтрации и найти договоры;

- разместить на ней созданный на первом шаге виджет и поле для отображения результатов поиска;

- в настройках добавленного виджета указать скрипт в пользовательском событии, чтобы находить нужные элементы при получении события о нажатии кнопки **Найти**.

Выполните эти действия:

1. Откройте настройки страницы **Оптовые продажи** и перейдите в [дизайнер интерфейсов](360027211631.md#setting-in-designer), нажав опцию **Конструктор**. 

2. На вкладке **Контекст** создайте переменные:

- **Результаты поиска** — переменная типа [Приложение](app-data-type.md) с опцией **Несколько**. Выберите приложение **Договоры**. Здесь пользователь увидит найденные элементы, когда нажмёт кнопку **Найти**;

- **Поиск** — служебная переменная типа **Строка**;

- **Дата создания** — служебная переменная типа **Дата/время**.

В переменные **Поиск** и **Дата создания** будут записаны значения соответствующих полей из виджета **Фильтр данных**, когда пользователь в нём нажмёт кнопку **Найти**.  
**(event-in-widgets-5.png)**

3. На вкладке **Шаблон** вынесите созданные ранее:

- виджет **Фильтр данных** с боковой панели **Виджеты**;

- свойство **Результаты поиска**.  
**(event-in-widgets-6.png)**

4. Откройте настройки виджета **Фильтр данных**. На вкладке **Основные** свяжите поля виджета с переменными из контекста страницы. Теперь значения, которые пользователь введёт для поиска договоров, запишутся в контекст страницы.  
**(event-in-widgets-7.png)**

5. На вкладке **События** отобразится созданная ранее переменная **При поиске** типа **Событие**. К ней привяжите скрипт, который выполнит фильтрацию данных приложения **Договоры**, когда пользователь нажмёт кнопку **Найти** в виджете **Фильтр данных**.  
**(event-in-widgets-8.png)**

**Скрипт для фильтрации договоров при наступлении события**

````
declare const alert: (msg: string) => void;  
async function search(): Promise<void> \{  
    if (\!Context.data.searchString) \{  
        alert('Заполните строку поиска');  
        return;  
    \}  
    Context.data.items = await Global.ns.contracts.app.outcoming\_contracts.search().where((f, g) => \{  
        const fts = g.fts(Context.data.searchString\!);  
        if (\!Context.data.sozdany\_posle) \{  
            return fts;  
        \}  
        return g.and(fts, f.\_\_createdAt.gt(Context.data.sozdany\_posle));  
    \}).all();  
\}

````


6. Сохраните и опубликуйте страницу.

Теперь на ней можно находить элементы приложения **Договоры** по названию и дате создания.