В Low-code дизайнере при помощи метода Drag-and-Drop вы можете создавать и настраивать удобные интерфейсы:
- формы — для приложений и задач бизнес-процесса, например, карточки для создания и просмотра документа;
- страницы — пользовательский интерфейс для работы в системе;
- виджеты — компоненты, с помощью которых задаётся вид форм и страниц.
В этой статье на примере рассмотрим создание и настройку пользовательской формы и изменим форму создания в приложении Договоры:
- Разделим данные в карточке на смысловые блоки.
- На боковой панели отобразим ответственного сотрудника.
- При помощи скрипта добавим интерактивную подсказку для пользователя.
Шаг 1. Создать форму и перейти в Low-code дизайнер
После того как вы создали приложение, вы можете добавить пользовательскую форму и настроить её в расширенном режиме в Low-code дизайнере. Для этого:
- Откройте приложение Договоры и нажмите на значок шестерёнки рядом с его названием. В меню выберите пункт Настройка формы, в открывшемся окне нажмите Расширенный режим.
- На открывшейся вкладке Контекст можно добавить поля, которых ещё нет в контексте приложения. В примере создадим поле для заполнения сотрудника, который будет контролировать работу с договором. Для этого нажмите + Добавить и создайте поле Ответственный с типом Пользователи (один), чтобы выбирать в нём пользователей системы.
- Чтобы открыть Low-code дизайнер, перейдите на вкладку с названием формы, которую хотите настроить: Создание, Просмотр, Редактирование. В нашем примере откройте вкладку Создание, нажмите <По умолчанию>, а затем + Создать форму.
Шаг 2. Настроить внешний вид формы
По центру Low-code дизайнера расположено поле для моделирования, а справа — панели со свойствами приложения и готовыми виджетами.
С их помощью настроим удобную для пользователей форму создания договора:
- Разделите форму на блоки. Для этого перетащите на поле для моделирования виджет Панель с заголовком. В заголовке укажите: Внесите информацию по договору.
- Разместите в блоке основные поля для заполнения. Для этого со вкладки Свойства перетащите поля: Контрагент, Номер договора, Дата заключения договора.
- Создайте отдельный блок для загрузки файла. Для этого добавьте ещё одну панель с заголовком с названием Загрузить файл договора. Поместите в неё виджет, который размещён на форме по умолчанию — Загрузка файла с предпросмотром.
- Настройте боковую панель. По умолчанию здесь размещён виджет Стандартная форма элемента, который содержит все созданные поля приложения. Выделите его и удалите его, поскольку в нашем примере нужные поля располагаются в основной части формы. Затем добавьте Виджет боковой панели, назовите его Контроль и поместите внутрь свойство Ответственный.
Теперь форма настроена следующим образом: основная часть поделена на два смысловых блока — для внесения информации и для загрузки файла; на боковой панели добавлено поле для выбора сотрудника, ответственного за договор.
- Нажмите кнопку Сохранить и Опубликовать в верхнем меню, чтобы форма стала доступна пользователям.
Теперь, когда сотрудники будут добавлять новые договоры, интерфейс будет выглядеть следующим образом:
Шаг 3. Добавить скрипт для отображения подсказки
С помощью виджетов вы можете создавать интерактивные формы, используя простые скрипты. Например, когда сотрудник наведёт курсор на поле для загрузки файла, всплывёт окно с дополнительной информацией.
Чтобы добавить такой скрипт:
- В дизайнере интерфейсов на вкладке Контекст создайте переменную info с типом Выбор «да/нет».
- Добавьте на поле для моделирования виджет Информационный блок. В открывшемся окне настроек введите текст инструкции: «Загрузите файл в формате .docx». Затем перейдите на вкладку Системные, в поле Видимость выберите опцию Показать по условию и укажите переменную info. Отображение информационного блока будет зависеть от значения этой переменной: виджет будет показан, если значение true.
- Выделите виджет Загрузка файла с предпросмотром и откройте его настройки, нажав на значок шестерёнки.
- Перейдите на вкладку События и добавьте скрипт, который будет изменять значение переменной info на true. Для этого в опции Событие при наведении курсора нажмите кнопку Создать, укажите название функции showInfo и выберите Сохранить, а затем — Открыть.
- На открывшейся вкладке Скрипты добавьте в созданную функцию следующий код, который будет определять значение переменной info:
async function showInfo(): Promise<void> {
ViewContext.data.info = true
}
- Сохраните и опубликуйте внесённые изменения.
Теперь, когда пользователь наведёт курсор на область для загрузки файла, значение переменной info изменится на true и информационный блок с инструкцией отобразится в карточке создания элемента.
Что делать дальше
После настройки и адаптации форм создания, просмотра и редактирования приложения вы можете автоматизировать обработку договоров в компании.
начало примечание
Полезные статьи:
- «Дизайнер интерфейсов» — как настраивать страницы и виджеты в дизайнере;
- «Действия с виджетами на поле для моделирования» — как управлять элементами в дизайнере при создании сложных интерфейсов;
- «Пример: связать процесс с приложением» — как смоделировать процесс согласования договора и настроить его запуск после создания элемента;
- «Пример: настроить статусы для мониторинга процесса» — как отслеживать этапы продвижения элементов по настроенному маршруту.
конец примечание