import { Callout } from 'nextra/components'
Форма добавления/просмотра
Когда использовать
Форму добавления рекомендуется использовать в случае, если необходимо разместить большое количество полей ввода.
Карточка
Карточка содержит шапку формы, саму форму и подвал формы.
Шапка формы
Шапка формы содержит баннер, причем в форме добавления он обычно в заблокированном свернутом виде. Баннер, в свою очередь, содержит заголовок в формате
<Наименование грида (таблицы), с которого перешли к форме> / Добавление <Наименование объекта>
Форма
Форма содержит поля ввода, которые должны быть расположены от одного края формы до другого, то есть по всей ширине формы. При расположении полей в форме важно придерживаться модульной сетки. Обычно это четырехколоночная, а реже трехколоночная сетка.
Также форма может содержать простую таблицу со связанным объектом.
🔴 Плохо
🟢 Хорошо
Следите за тем, чтобы поля в форме располагались в смысловом порядке, например, цена и валюта всегда находятся рядом.
Структурирование контента в форме
В больших формах добавления/просмотра следует использовать группировку полей (с помощью подзаголовков и/или разделителя p-divider), или аккордеон, или табы, или степпер. Это поможет пользователю ориентироваться в форме.
Критерии использования компонентов
| Критерий / Компонент | Группировка | Аккордеон | Табы | Степпер |
|---|---|---|---|---|
| Форма содержит несколько логических разделов, в каждом не более 10 полей | 🟢 | 🟢 | 🔴 | 🔴 |
| Есть необязательные разделы, которые нужно скрывать | 🔴 | 🟢 | 🟢 | 🔴 |
| Некоторые разделы содержат больше 10 полей ввода | 🔴 | 🔴 | 🟢 | 🔴 |
| Некоторые разделы содержат и поля, и таблицу | 🔴 | 🔴 | 🟢 | 🟢 |
| Разделы содержат более 10 полей, важно наличие возможности промежуточных сохранений | 🔴 | 🔴 | 🔴 | 🟢 |
| Разделы формы зависят друг от друга, необходимо последовательное заполнение | 🔴 | 🔴 | 🔴 | 🟢 |
| Необходимо отобразить дополнительное краткое описание раздела | 🔴 | 🔴 | 🔴 | 🟢 |
Пример использования группировки:
В дизайнере интерфейсов подзаголовок - это компонент текст, начертание
bold, стильheadline 2
Пример использования аккордеона:
Пример использования табов:
Пример использования степпера:
Подробные примеры работы и описания компонентов можно увидеть в статьях, кликнув на компонент в шапке таблицы выше.
Использование выпадающих списков, лукапов
| Компонент | Описание |
|---|---|
 | Выпадающий список p-dropdown - используется в случае, когда нужно выбрать значение из выпадающего списка. |
 | Лукап p-lookup - используется, когда необходимо поднять модальное окно, например, с данными из справочника и по ним отфильтроваться, чтобы найти нужное значение. |
Использование чекбоксов, радиокнопок, переключателей
| Компонент | Описание |
|---|---|
 | Группа чекбоксов p-checkbox - чекбоксы используются в том случае, если нужно выделить несколько параметров. |
 | Группа радиокнопок p-radioButton - используется, если нужно выбрать один параметр из группы. Группа может быть как вертикальной, так и горизонтальной. |
 | Переключатель p-inputSwitch - используется, в основном, для обозначения наличия/отсутствия какого либо признака. Также может выполнять функцию переключения, например, набора полей. |
Форма добавления
При добавлении объекта, как правило, форма поднимается с незаполненными полями ввода.
Также форма добавления может содержать поля ввода в состоянии на просмотр shapeshifted, если поле удовлетворяет одновременно трем критериям:
- Когда поле важно видеть в самой первой строке формы или сайдбара, потому что оно формирует восприятие объекта;
- Когда поле генерируется автоматически и не доступно для редактирования никогда, например, дата и время создания или порядковый номер;
- Когда поле заполнено сразу при открытии формы, еще до заполнения других полей, и от них не зависит;
Например:
Форма редактирования
Форма редактирования содержит те же самые поля, что и форма добавления, кроме того, расположение полей должно быть идентичным.
На форме редактирования должны быть заполнены, как минимум, обязательные поля.
Форма просмотра
В форме просмотра все поля должны быть в состоянии shapeshifted, при этом их расположение должно полностью повторять расположение полей в формах просмотра и добавления.
В подвале формы просмотра располагается только кнопка Отмена.
Например:
Больше про поля доступные только для просмотра можно прочесть в этой статье.
Подвал формы
Подвал формы обычно содержит в себе набор кнопок. Самые распространенные - кнопки Отмена и Сохранить. Важно отметить, что кнопка "Сохранить" должна быть Primary цвета, когда активна, а кнопка Отмена - вторичная, серого цвета (класс p-button-secondary).
Учитывайте, что если форма не валидна или вообще не заполнена, кнопке "Сохранить" должно быть присвоено состояние disabled, иными словами кнопка должна быть не активной.
При отправке запроса из формы (например при ее сохранении) необходимо выводить индикатор загрузки и снова блокировать кнопку, чтобы пользователь, если у него, например, медленный интернет, понимал, что его действие в данный момент обрабатывается.