С чего начать / Low-code дизайнер для приложений ELMA365

Low-code дизайнер для приложений

В Low-code дизайнере при помощи метода drag'and'drop вы можете создавать и настраивать удобные интерфейсы для приложений. В нём настраиваются:

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

Дизайнер выглядит следующим образом:

designer-window

По центру расположено поле, на котором вы настраиваете внешний вид страницы или формы. Справа — панель с доступными компонентами интерфейса и свойствами. Эти компоненты и свойства можно перетаскивать на поле и компоновать так, как вам необходимо.

Добавить свою форму приложения

После того как вы создали приложение, в low-code дизайнере вы можете настроить свои собственные формы для работы с ним. Подробнее о том, как добавить новое приложение, читайте в статье «Создать приложение». Теперь рассмотрим пример настройки формы, которую пользователи будут заполнять, создавая новый договор в приложении Договоры.

Перейти в low-code дизайнер

  1. Откройте приложение Договоры и нажмите на значок шестерёнки рядом с его названием. В меню выберите пункт Настройка формы, в открывшемся окне настроек нажмите на ссылку Расширенный режим.

form_low_code1

  1. Откроется вкладка Контекст. Здесь вы можете добавить поля, которых ещё нет в контексте приложения, например, поле Ответственный. В этом поле можно будет указывать сотрудника, который будет контролировать работу с договором. Для этого нажмите +Добавить и задайте параметры для поля. В качестве типа свойства выберите Пользователь, чтобы можно было выбрать пользователей системы.
  2. Перейдите на вкладку Создание. Нажмите на ссылку По умолчанию — появится кнопка +Создать форму. Нажмите на неё, чтобы перейти в low-code дизайнер.

form_low_code2

Настроить форму

В low-code дизайнере с помощью виджетов и свойств с правой панели, вы можете сделать форму удобной для пользователя: разделить поля на смысловые блоки и добавить понятные для пользователя инструкции. Разберём настройку на примере:

  1. Перетащите на форму виджет Панель с заголовком. В заголовке укажите: Внесите информацию по договору.

2.202

  1. В добавленную панель со вкладки Свойства перетащите те поля, в которые пользователи будут вносить информацию: название контрагента, номер договора и т. д. Обратите внимание, на форму уже добавлено поле для загрузки файла. Его тоже можно поместить в отдельную панель с заголовком.
  2. Настройте боковую панель. Обратите внимание, на ней по умолчанию размещён виджет Стандартная форма элемента. В нём содержатся поля, которые вы добавили ранее при создании приложения. Так как на предыдущем шаге мы уже вынесли нужные нам поля на основную часть формы, этот виджет следует удалить.

2.222

  1. Настройте поле, в котором сотрудник, создающий договор, сможет назначить пользователя, ответственного за исполнение договора. Добавьте на боковую панель Виджет боковой панели. Назовите его Контроль, а внутрь перетащите свойство Ответственный.

Теперь форма выглядит следующим образом: основная часть поделена на два смысловых блока — для внесения информации и для загрузки файла; на боковой панели добавлено поле для выбора сотрудника, ответственного за договор.

2.201

  1. Нажмите кнопку Сохранить и Опубликовать в верхнем меню, чтобы форма стала доступна пользователям.

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

2.23

Добавить сценарий

С помощью виджетов вы можете создавать интерактивные формы, используя простые сценарии. Например, когда сотрудник наведёт курсор на поле для загрузки файла, всплывёт окно с дополнительной информацией.

Чтобы добавить такой сценарий:

  1. В дизайнере интерфейсов на вкладке Контекст создайте переменную info с типом Выбор «да/нет».
  2. Добавьте на поле для моделирования виджет Информационный блок. В открывшемся окне настроек введите текст инструкции, например, Загрузите файл в формате .docx. Затем перейдите на вкладку Системные и в поле Видимость выберите опцию Показать по условию. Укажите переменную info. Отображение информационного блока будет зависеть от значения этой переменной: виджет будет показан, если значение true.

form_low_code3

  1. Выделите виджет Загрузка файла с предпросмотром и откройте его настройки, нажав на значок шестерёнки.
  2. Перейдите на вкладку События добавьте сценарий, который будет изменять значение переменной info на true. Для этого в опции Событие при наведении курсора нажмите кнопку Создать, а затем Открыть.

form_low_code4

  1. На открывшейся вкладке Сценарии укажите код, который будет определять значение переменной info, например:

async function showInfo(): Promise<void> {
    ViewContext.data.info = true
}

  1. Сохраните и опубликуйте внесённые изменения.

Теперь, когда пользователь наведёт курсор на область для загрузки файла, значение переменной info изменится на true и информационный блок с инструкцией отобразится в карточке создания элемента.