Инпуты и формы во Flow Builder

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

Добавление поля ввода

Add input
  1. Нажмите + в верхнем левом углу.
  2. Выберите Input.
  3. Выберите тип поля ввода:
    • Text: Любой короткий текст.
    • Email: Адрес электронной почты с опциональной проверкой формата.
    • Password: Защищённый ввод текста с настраиваемыми требованиями.
    • Number: Числовые значения с настраиваемым форматом.
    • Phone number: Номера телефонов.
    • Date: Открывает выбор даты.
    • Time: Открывает выбор времени.
    • Date and time: Открывает комбинированный выбор.

Настройка поля ввода

Подробнее о визуальных настройках — макете, стиле и видимости — читайте в разделе Стили и оформление.

Для всех типов полей ввода в вкладке Design доступны следующие настройки:

  • Type: Измените тип ввода (Text, Email, Password, Number, Phone number, Date, Time или Date and time).
  • Element ID: Идентификатор, который используется для обращения к значению поля в других частях флоу. См. Использование значений полей ввода ниже.
  • Placeholder: Текст-подсказка, отображаемый внутри пустого поля.
  • State: Определите, как поле выглядит в разных ситуациях. Переключайтесь между Default, Active, Invalid и Disabled и применяйте разные стили к каждому состоянию.
  • Typography: Стиль текста для значения, отображаемого в поле.
  • Leading and trailing icons: Добавьте иконки внутри поля ввода.
Добавить поле ввода

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

НастройкаТипы полей ввода
Clear buttonText, Email
Validate email formatEmail
Show password iconPassword
Edit password requirementsPassword
Number formatNumber
Date/time formatDate, Time, Date and time
Min and max dateDate, Date and time
Add input
Add input

Использование значений полей ввода

Каждое поле ввода автоматически становится переменной — никаких дополнительных настроек или действия On Submit не требуется. На значение ссылаются через Element ID поля, который задаётся в Input Settings.

Чтобы использовать значение поля ввода в другом месте флоу (например, для персонализации текста, заполнения другого поля или условной навигации), вставьте переменную и выберите:

Element > Screen > <elementId>.value

Ознакомьтесь с соответствующими гайдами, чтобы понять, как использовать сохранённые входные значения:

Валидация ввода

Поведение валидации зависит от типа поля. Каждое поле предоставляет переменную Boolean только для чтения, <elementId>.isValid, которая отражает, соответствует ли введённое значение правилам валидации этого поля. Используйте её в условных действиях или условной видимости — например, чтобы скрывать кнопку «Далее», пока формат email не будет корректным.

  • Переменная isValid доступна только для чтения — задать её значение нельзя.
  • Пустое поле всегда считается валидным.
  • Для текстовых полей правила валидации отсутствуют. textInput.isValid всегда возвращает True.
Тип вводаПоведение валидации
TextВстроенных правил валидации нет.
EmailОпционально. Включите Validate email format в панели Design, чтобы проверять введённое значение на соответствие формату электронной почты.
Phone numberВстроенная проверка формата номера телефона. Не настраивается в Builder — правило применяется во время выполнения.
PasswordНастраивается. См. раздел Требования к паролю ниже.
NumberНа основе формата. Введённое значение должно соответствовать выбранному числовому формату. См. раздел Числовой формат ниже.
Date, Time, Date and timeВстроенная. Пикер принимает только корректные значения даты или времени.
Визуальное состояние Invalid активируется, когда пользователь отправляет форму — например, нажимая Enter или Done на клавиатуре. До этого момента поле ввода отображается в состоянии Active или Default.

Требования к паролю

Поля для ввода пароля поддерживают настраиваемые правила валидации. Нажмите Edit password requirements на панели Design, чтобы открыть редактор правил. Активные правила отображаются в виде живого списка под полем ввода — каждый пункт отмечается галочкой, как только соответствующее условие выполнено.

Доступные правила:

  • Min length — минимальное количество символов. По умолчанию: 8.
  • Max length — максимальное количество символов. По умолчанию: 32.
  • Uppercase letter — хотя бы одна заглавная буква A–Z.
  • Lowercase letter — хотя бы одна строчная буква a–z.
  • Number — хотя бы одна цифра.
  • Special character — хотя бы один неалфавитно-цифровой символ (например, !@#$%).

Пароль считается действительным только при соблюдении всех включённых правил.

Формат числа

Выпадающий список Format в настройках поля Number определяет, как интерпретируется введённое значение:

  • Integer — только целые числа (например, 4).
  • Decimal (Point) — десятичные дроби с точкой в качестве разделителя (например, 4.89).
  • Decimal (Comma) — десятичные дроби с запятой в качестве разделителя (например, 4,89).

Значения, не соответствующие выбранному формату, считаются недопустимыми.

Запуск действий по событиям ввода

Основная статья: Действия

Вы можете запускать действия в ответ на действия пользователя через панель Interactions:

  • On changed — срабатывает, когда пользователь изменяет значение поля ввода. Доступно для всех типов полей.
  • On submit — срабатывает, когда пользователь отправляет текстовый ввод, нажав Enter или Done на клавиатуре. Для выборщиков даты и времени этот триггер недоступен.