#Поток событий

#Введение

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

#Как использовать

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

Шаги настройки:

1. Нажмите на иконку «молния» в правом верхнем углу левого блока таблицы, чтобы открыть панель настройки потока событий.
2. Нажмите Добавить поток событий, выберите Клик по строке в качестве Условия срабатывания — это означает, что поток будет запускаться при клике по строке таблицы.
3. Настройте «Время выполнения», чтобы определить, где ваш пользовательский поток запускается относительно встроенных потоков. В большинстве случаев можно оставить значение по умолчанию. Если нужно показать обратную связь или выполнить навигацию после завершения встроенной логики, выберите «После встроенных потоков». См. Время выполнения ниже.
4. «Условие срабатывания» используется для настройки условий. Поток событий сработает только при выполнении этих условий. В этом случае условия не нужны, поэтому поток будет запускаться при любом клике по строке.
5. Наведите на «Добавить шаг», чтобы добавить шаги операций. Выберите «Задать область данных», чтобы настроить область данных для правой таблицы.
6. Скопируйте UID правой таблицы и вставьте его в поле "UID целевого блока". Ниже появится панель настройки условий, где можно настроить область данных правой таблицы.
7. Настройте условие, как показано ниже:
8. После настройки области данных нужно обновить блок, чтобы показать отфильтрованный результат. Добавьте шаг "Обновить целевые блоки" и укажите UID правой таблицы.
9. В конце нажмите кнопку сохранения в правом нижнем углу, чтобы завершить настройку.

#Типы событий

#Перед рендером

Универсальное событие, которое можно использовать на страницах, в блоках, кнопках или полях. Используйте его для задач инициализации, например настройки разных областей данных по разным условиям.

#Клик по строке

Событие, специфичное для блока таблицы. Срабатывает при клике по строке таблицы. При срабатывании добавляет в контекст «Запись нажатой строки», которую можно использовать как переменную в условиях и шагах.

#Изменение значений формы

Событие, специфичное для блока формы. Срабатывает при изменении значений полей формы. Значения формы доступны через переменную «Текущая форма» в условиях и шагах.

#Клик

Событие, специфичное для кнопки. Срабатывает при клике по кнопке.

#Время выполнения

В настройках потока событий легко перепутать два понятия:

• Событие срабатывания: когда поток запускается (например: Перед рендером / Клик по строке / Клик / Изменение значений формы).
• Время выполнения: после наступления этого же события срабатывания — где именно ваш пользовательский поток запускается относительно встроенных потоков.

#Что такое встроенные потоки и шаги?

У многих страниц, блоков и действий есть встроенное поведение (например: отправка, открытие диалога, запрос данных). Когда вы добавляете пользовательский поток событий на то же событие (например «Клик»), «Время выполнения» определяет:

• запускать ли ваш поток до или после встроенной логики, или
• запускать ли его вокруг конкретного встроенного потока/шага.

#Как выбрать опцию в UI

• Перед всеми потоками: выполняется первым. Подходит для подготовки/проверок (валидация, подтверждение, инициализация переменных и т.д.).
• После встроенных потоков: выполняется после завершения встроенной логики. Подходит для завершающих действий/обратной связи (сообщения, обновление других блоков, навигация и т.д.).
• До/после встроенного потока: более точная точка вставки. Нужно выбрать «Встроенный поток».
• До/после шага встроенного потока: максимально точная точка вставки. Нужно выбрать и «Встроенный поток», и «Шаг встроенного потока».

Совет: если не уверены, какой встроенный поток/шаг выбрать, обычно достаточно первых двух опций.

#Типы шагов

#Пользовательская переменная

Создайте пользовательскую переменную для использования в контексте.

#Область видимости

Пользовательские переменные имеют область видимости. Например, переменную, заданную в потоке событий блока, можно использовать только внутри этого блока. Чтобы переменная была доступна во всех блоках текущей страницы, настройте ее в потоке событий страницы.

#Переменная формы

Используйте значения из блока формы как переменную. Конфигурация:

• Заголовок переменной: заголовок переменной
• Идентификатор переменной: идентификатор переменной
• UID формы: UID формы

#Другие переменные

В будущем будут поддерживаться дополнительные типы переменных.

#Установить область данных

Настроить область данных для целевого блока. Конфигурация:

• UID целевого блока: UID целевого блока
• Условие: условие фильтра

#Обновить целевые блоки

Обновить целевые блоки. Можно настроить несколько блоков. Конфигурация:

• UID целевого блока: UID целевого блока

#Перейти по URL

Перейти по URL. Конфигурация:

• URL: целевой URL, поддерживает переменные
• Параметры запроса: query-параметры в URL
• Открыть в новом окне: если отмечено, URL открывается в новой вкладке браузера

#Показать сообщение

Показывать глобальные сообщения обратной связи.

#Когда использовать

• Для показа успешных, предупреждающих и ошибочных сообщений.
• Для легковесной обратной связи: отображается сверху по центру и автоматически скрывается, не прерывая действия пользователя.

#Конфигурация

• Тип сообщения: тип сообщения
• Содержимое сообщения: содержимое сообщения
• Длительность: длительность показа (в секундах)

#Показать уведомление

Показывать глобальные уведомления.

#Когда использовать

Показывает уведомления в одном из четырех углов системы. Часто используется для:

• сложного содержимого уведомления;
• интерактивных уведомлений, подсказывающих пользователю следующий шаг;
• уведомлений, инициируемых системой.

#Конфигурация

• Тип уведомления: тип уведомления
• Заголовок уведомления: заголовок уведомления
• Описание уведомления: описание уведомления
• Позиция: позиция, варианты: сверху слева, сверху справа, снизу слева, снизу справа

#Выполнить JavaScript

Выполняет JavaScript-код.

#Примеры

#Форма: вызов стороннего API и заполнение полей

Сценарий: запустить поток событий в форме, вызвать сторонний API и заполнить поле формы ответом.

Пример настройки:

1. Откройте настройки потока событий в блоке формы и добавьте поток событий;
2. Выберите «Перед рендером» как событие срабатывания;
3. Установите «Время выполнения» на «После встроенных потоков»;
4. Добавьте шаг «Выполнить JavaScript» и вставьте/измените код ниже:

const res = await ctx.api.request({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/users/2',
  skipNotify: true,
  // Примечание: ctx.api по умолчанию включает текущие заголовки аутентификации/кастомные заголовки NocoBase
  // Здесь мы переопределяем их "пустым Authorization", чтобы не отправлять токен третьей стороне
  headers: {
    Authorization: 'Bearer ',
  },
});

const username = res?.data?.username;

// замените на фактическое имя поля
ctx.form.setFieldsValue({ username });