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

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

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

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

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

2.30

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

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

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

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

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

form_low_code2

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

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

  1. Перетащите на форму виджет Панель с заголовком. В заголовке укажите «Внесите информацию по договору».
    2.202
  2. В добавленную панель со вкладки Свойства перетащите те поля, в которые пользователи будут вносить информацию: название контрагента, сумму и номер договора и т.д. Обратите внимание, на форму уже добавлено поле для загрузки файла. Его тоже можно поместить в отдельную панель с заголовком.
  3. Настройте боковую панель. Обратите внимание, на ней по умолчанию размещен виджет, который содержит «Стандартную форму элемента». Стандартная форма элемента — это те поля, которые вы добавили ранее при создании приложения. Так как на предыдущем шаге мы уже вынесли нужные нам поля на основную часть формы, этот виджет следует удалить.
    2.222
  4. Теперь настроим поле для того, чтобы сотрудник, создающий договор, мог назначить пользователя, ответственного за исполнение этого договора. Добавьте на боковую панель Виджет боковой панели. Назовем его Контроль, а внутрь перетащим свойство Ответственный.

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

2.201

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

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

2.23

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

Виджеты позволяют вам создавать интерактивные формы, используя простые сценарии. К примеру, когда сотрудник наведет курсор на поле для загрузки файла, всплывет окошко с дополнительной информацией.

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

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

 

Там уже будет прописана функция.

async function showInfo(): Promise<void> {
}

 

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

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

Теперь, когда пользователь наведет курсор на область для загрузки файла, система посчитает, что значение переменной, указанной в виджете Информационный блок, равно Нет, и окошко с инструкцией будет показано.

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас