.. _form_builder: Конструктор форм ================= .. contents:: :depth: 3 Общее описание --------------- Конструктор форм позволяет моделировать формы в специальном дизайнере, можно настроить какие данные будут отображаться на форме, как они будут расположены, какие поля обязательны для заполнения, какие доступны только для чтения. Так же можно настроить видимость полей, определить действия, которые выполняются при взаимодействии пользователя с элементами на форме. Добавление компонента формы ----------------------------- Каждая новая форма начинается с автоматически добавленных кнопок и текстового поля, могут быть удалены или отредактированы по мере необходимости. .. image:: _static/form_builder/builder.png :width: 600 :align: center Чтобы добавить компонент в форму, перетащите компонент из левого столбца в нужное место в форме: .. image:: _static/form_builder/builder_1.png :width: 600 :align: center Редактирование компонента формы -------------------------------- Чтобы изменить компонент формы, наведите указатель мыши на компонент и щелкните значок шестеренки - откроется ​​форма настроек для компонента. .. image:: _static/form_builder/builder_2.png :width: 600 :align: center Общие настройки компонентов --------------------------- Ниже приведен список общих настроек, которые присутствуют в большинстве компонентов. Настройка компонентов --------------------- Основные вкладки, используемые для настройки: 1. **Базовые**. Хранит в себе основные, используемые чаще всего, настройки. .. image:: _static/form_builder/tab_1.png :width: 600 :align: center .. list-table:: :widths: 10 30 30 :header-rows: 1 :align: center :class: tight-table * - п/п - Наименование - Описание * - 1 - **Название поля** - имя компонента, как оно будет отражаться на форме. * - 2 - **Имя свойства** - | имя свойства из :ref:`типа данных` | При вводе имени свойства появляется выпадающий список атрибутов типа данных, для которого форма создается (при наличии частичного совпадения имен). Это позволяет понять, какие имена уже заняты, чтобы не привести к ошибке при создании или редактировании формы. .. image:: _static/form_builder/tab_1_variants.png :width: 500 :align: center * - 3 - **Подсказка** - подсказка, которая отображается при наведении курсора на знак вопроса возле поля, если необходимо. * - 4 - **Множественный выбор** - отвечает за возможность множественного выбора (нужно для выбора из списка, журнала, или оргструктуры). * - 5 - **Заблокирован ввод** - отключает возможность ввода данных в компонент. * - 6 - **Обязательное** - обязательность заполнения поля. 2. **Вид**. Хранит в себе настройки для отображения. Для базовой настройки нужны: .. image:: _static/form_builder/tab_2.png :width: 600 :align: center .. list-table:: :widths: 10 30 30 :header-rows: 1 :align: center :class: tight-table * - п/п - Наименование - Описание * - 1 - **Текст для пустого поля** - подсказка, которая отображает до начала заполнения поля. Используется в основном для текстовых полей. * - 2 - **Описание** - подсказка, которая отображается на форме всегда, в отличие от Placeholder, если необходимо. * - 3 - **Очистить значение, если оно скрыто** - отвечает для очистку данных в компоненте, когда она скрыта. 3. **Данные**. Отвечает за автоматическое заполнение поля данными. В списках, есть возможность заполнить список статическими, или полученными из асинхронного запроса данными. .. image:: _static/form_builder/tab_3.png :width: 600 :align: center 4. **Валидация**. Отвечает за проверку правильности заполнения поля. Поддерживает как простые проверки (проверки длины введенной строки или принятия конкретного значения), так и сложные. .. image:: _static/form_builder/tab_4.png :width: 600 :align: center 5. **API**. Хранит в себе ключ и атрибут для корректного сохранения данных. Необходимо заполнить следующие поля: .. image:: _static/form_builder/tab_5.png :width: 600 :align: center В поле **Ключ** ввести строку attribute, а в **Значение** ввести данные как в заголовке %prefix%_%localName%. Например: initiator 6. **Отображение**. Отвечает за настройку отображения компонента. Поддерживает как простую логику, например, сопоставление значения поля и отображения при совпадении, так и сложную. .. image:: _static/form_builder/tab_6.png :width: 600 :align: center 7. **Логика**. Пользовательская логика. Добавление динамического поведения в формы: - Показ/скрытие полей. - Изменение значений, обязательности, доступности полей. - Выполнение кастомных действий через JavaScript. .. image:: _static/form_builder/tab_7.png :width: 600 :align: center Тип триггера определяет структуру и условия срабатывания. Конфигурация триггера зависит от выбранного типа: 1. **Простой**. Использует стандартный интерфейс и методы настройки, аналогичные вкладке **"Отображение"**. См. `Документация по простым условиям `_ 2. **JavaScript**. Позволяет писать пользовательские условия на JavaScript. Интерфейс и настройки совпадают с **Расширенные условия отображения**. См. `Документация по расширенным условиям `_ 3. **JSON Logic**. Альтернатива JavaScript для написания логических условий с использованием JSON-структур. См. `Документация по JSON Logic `_ 4. **Событие**. Предназначен для создания пользовательских событий в форме. Доступны следующие действия, которые могут быть выполнены при активации условия: 1. **Свойство**. Изменение настроек поля (видимость, обязательность, текст подписи и др.). 2. **Значение**. Динамическое обновление данных с помощью JavaScript (доступны переменные row, data, component, result). 3. **Валидация**. Настройка правил проверки данных формы в зависимости от условий. 8. **Шаблон элемента**. Отвечает за дополнительные атрибуты, которые могут быть добавлены в форму. Настройки макета. Можно изменить расположение компонентов на форме, используя HTML-атрибуты. Например, отступы сверху, снизу, слева и справа. Величины должны быть введены в допустимом формате CSS (например, 10px), чтобы отображаться корректно. Компоненты будут располагаться соответствующим образом в зависимости от того, какие поля отступов вы настроите. .. image:: _static/form_builder/tab_8.png :width: 600 :align: center