Создание экранных форм

💡
Экранная форма - это как правило форма, которая создана специально для пользователя. Она позволяет рационально расположить данные на экране, использовать разные элементы оформления, обеспечивать возможность проверок при вводе данных.

Создание, редактирование, копирование и удаление бизнес-компонент
💡
При нажатии клавиш Enter и Esc можно выйти из режима редактирования имени формы. Так же, если необходимо выйти из создания формы, можно нажать Esc.

Редактирование формы

Экран редактирования формы

Для редактирования формы необходимо открыть бизнес-компонент, который нужно отредактировать. На открывшемся экране для редактирования и создания форм выделены несколько главных блоков:

  1. Навигация: В данном блоке отображается информация о том, что находится на форме. Информация обновляется сразу после добавления очередного компонента на форму. Так же через нее можно выбрать тот или иной компонент, который необходим для изменения его параметров. Так же через навигацию, можно перейти в параметры переменных формы, которые необходимы для передачи информации по процессу.
  1. Компоненты: В блоке отражены компоненты, из которых может быть создана форма. В базовых компонентах находятся части формы, которые в дальнейшем составляют одну большую экранную форму с множеством полей для ввода необходимых данных. В бизнес компонентах отражаются формы, уже созданные ранее, которые можно с помощью функции Drag & Drop перетащить в поле редактирования.
  1. Источники данных: Здесь указаны источники данных. Первый источник всегда добавляется автоматически.

Если пользователь захочет добавить новый источник данных с помощью кнопки "Добавить", которая обозначается в блоке "Источники Данных". Выбирается тип будущего источника данных, вводится его название и URL для привязки.

После успешного добавления Источника он появляется в отведенном ему блоке "Источники Данных"

Добавление нового источника данных

По всему источнику есть поиск. Для проведения поиска необходимо нажать в блоке "Источники Данных" на лупу и откроется поле для введения запроса. При введении, например, параметра запроса client в списке останутся только необходимы поля, которые содержат "client".

Так же, если Модель (подробнее в "Создании модели данных") была обновлена и при этом была открыта вкладка с формой, то необходимо нажать на "Обновить", чтобы изменения подтянулись и вступили в силу.

Поиск по источнику данных

4. Параметры: Это блок предназначен для привязки к бэкенду и настройки полей, настройки карточек.

Блок "Навигация"
Блок "Компоненты" вкладка "Базовые"
Блок "Компоненты" вкладка "Бизнес"

Блок "Источники данных"
Блок "Параметры"

Создание экранной формы

Самая простая форма может создаваться из 2-3 элементов. Рассмотрим пример, который прикреплен справа.

В поле редактора из компонентов вытаскиваем:

  1. Карточка
  1. Текстовое поле
  1. Панель действий

Так как в Карточке автоматически уже есть текстовое поле, то выбираем его, в "Надписи" указываем как будет называться данное поле, в "Прочитать из" необходимо ввести то значение, которое должно содержаться в данном поле. Например это: app.loanFindById.client.firstName Так же необходимо ввести куда будет записываться введенное значение после сохранения, поле "Записать в". Например: app.loanSave.entity.client.firstName

По такому же принципу заполняем и второе текстовое поле. Для каждой модели "Прочитать из" и "Записать в" поля будет разным.

Примеры созданных форм

  1. Клиент
  1. Форма кредита
  1. Форма для вывода информации
  1. Форма для заполнения БД Кредит
  1. Форма для заполнения БД Пол клиента
  1. Форма для заполнения БД Тип документа

Создание простой формы

Переменные "roles" и "userName" создаются автоматически при создании формы. Они используются для установления ограничений по ролям и юзерам.

Передача переменной в процесс:

  • Для передачи данных в процессе, который состоит из нескольких шагов, необходимо на бизнес-компоненте (верхнем уровне дерева элементов формы) в "Переменные" установить маппинг переменной процесса с переменной формы. Название переменной в процессе - произвольно, но связанное с ним название переменной формы должно соответствовать модели объекта, возвращаемого форме. Примеры на рис. "Переменная основного объекта процесса" и рис. "Переменные для вложенных сущностей"
  • Для инициализации переменной формы необходимо на форме в "Значения по умолчания" установить маппинг атрибутов модели на переменные формы. Поиск атрибута в модели всегда идёт от объекта, привязанного к атрибуту "id". Примеры значений по умолчанию находится справа на рис. "Значение по-умолчанию для основного объекта процесса" и "Значения по-умолчанию вложенных сущностей"
‼️
В камунду после сохранения сущности попадают все переменные. Если не будет переменной, но будет значение по умолчанию, или переменная будет, но не будет значения по умолчанию, то в камунду ничего не будет передано.
  • Для разработчиков

    "Переменные"

    • В серой области сверху указано название переменной процесса (в Camunda, в объекте params). В белой области снизу - данные формы.
    • Данные формы есть сущность в ответе после сохранения данных формы (не сохранил → не инициализировал form.* → не сохранил переменную в процесс).
    • При открытии формы происходит обратный процесс: значение переменной процесса (из Camunda, из params) с названием, указанным в серой области сверху, записывается в данные формы, указанные в белой области ниже.

    "Значения по умолчанию":

    • В запрос из серой области сверху передаётся значение переменной, указанной в белой области снизу
    • Значение переменной устанавливается уровнем выше, в бизнес-компоненте в разделе . "Переменные"
    • Без маппинга переменной на "*save.entity.id" при сохранении каждый раз будет генерироваться новый id.
Значение по умолчанию для основного объекта процесса
Значения по умолчанию для вложенных сущностей

Переменная основного объекта процесса
Переменная основного объекта процесса, которые заполняются автоматически
Переменные для вложенных сущностей

Так же переменная необходима для редактирования значений в справочниках. (см. подробнее в "Работа с задачами")

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

Добавление компонента "Карточка"

Чтобы переименовать заголовок "Карточки", необходимо в параметрах карточки, ввести необходимое название "Карточки". Так же можно установить, подзаголовок, аватар и отображается ли данная карточка.

  • Для Подзаголовка можно установить дату, время и, например, должность сотрудника, или кто этот человек в системе
  • Для Аватара можно установить картинку, которую можно подтягивать из базы, или брать из Интернет
  • Для Отображения можно установить отображается ли секция или нет.

Редактирование "Заголовки" карточки

Из компонентов выбрать ещё 2 текстовых поля и добавить в секцию формы.

Выбрать поле и в параметрах указать название этого поля. Информация обновилась и в Навигации и на форме

Добавление текстовых полей на форму

В пункте "Стили" возможно установить какая маска будет применена к текстовому полю. Например, "Пользовательская" позволяет пользователю самому устанавливать параметры для маски.

Квадратными скобочками "[ ]" можно вводить произвольные буквы и цифры (подробнее здесь).

Цифра - "0" - это обязательные цифры, к примеру на изображении, указано [000].[000], это значит, что до точки и после точки обязательно будут идти 3 произвольные цифры.

Цифра - "9" - это необязательные цифры. [000999] - данный пример позволит ввести от 3 до 6 цифр.

Буква "A" - это обязательные буквы. [AAA] - такой пример позволит ввести произвольные 3 буквы.

Буква "а" - это необязательные буквы. [АААааааа] - такой пример позволяет вводить от 3 до 8 букв.

"_" - обязательный символ.

"-" - не обязательная символ.

Пример использования маски на поле

В пункте "Стили" можно установить "Префикс" и "Суффикс", которые будут отображать то, что должно быть в данном поле. В большинстве случаев можно использовать только "Префикс".

Отступы предназначены для того, чтобы регулировать расстояние между полями. Устанавливаются как в пикселях, так и в процентах. Например: 8px 8px 0px 8px

Пример полей без отступов (слева) и с отступом (справа)
Пример использования "Префикса" и "Суффикса"

Пример использования "Префикса" и "Суффикса"

Например:

У нас есть форма и нам необходимо указать, что поле "Имя" будет сохраняться во вложенную сущность.

Например путь: client.fl.firstName.value

Устанавливаем его в поле "Сохранить как" и переходим на необходимую нам форму, где у нас есть компонент "Список сущностей". В параметрах устанавливаем "Бизнес компонент", который будет отображаться.

Пример формы
Форма с компонентом "Список сущностей"
Выбор отображаемого Бизнес компонента

На форме нажимаем добавить, у нас появляется форма для заполнения. Вводим имя и нажимаем "Сохранить"

Форма с открытым компонентом "Список сущностей"
Введенные значения на форме

В консоли браузера, мы видим по какому пути все сохранилось

Поле "Сохранить как" необходимо для того, чтобы вложенные сущности сохранять по нужному пути. Пример сохраненной информации находится справа.

Сохраненное значение

(убрать)

Если предполагается вызов формы из бизнес-процесса, добавляем панель камунды из компонентов и устанавливаем заголовок и значение

💡
Заголовок - это поле, которое отображается в исполнении процесса. Имя - это поле, которое отражает выражение, применимое к условию в процессе. Значение - это поле, которое отражает какое значение необходимо передать, чтобы процесс прошел дальше.

Панель позволяет перекидывать переменные в Камунду, так же данная панель во Preview Mode добавляет кнопки, являясь заменой некоторой панели действий.

Так же она используется для передачи переменных в процессе без их сохранения в сущность.

Добавление панели Камунды и установление её значений

Добавление панели Камунды отражается добавлением кнопки "Сохранить" сверху формы

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

В тулбаре, в режиме редактирования формы, можно перейти в режим диаграммы и посмотреть, какие параметры есть и к чему они привязаны. Данная диаграмма доступна для всех форм, которые созданы или будут созданы.

Редактирование "Надписи" на форме с помощью редактора.

Например, нам надо в дизайнере форм создать таблицу, которая будет выводить данные по заданным параметрам. Поэтому из компонентов в поле для редактирования вытаскиваем компонент "Таблица".

В поле редактирования "Таблица" выглядит так, как показано справа.

Чтобы добавить колонки для отображения, необходимо заполнить "Параметры" таблицы.(пример справа) После заполненных полей, таблица обновиться и там появятся необходимые данные.

Компонент "Таблица"

Компонент "Таблица" в поле редактирования
Заполненная таблица
Заполнение "Параметров"
Заполнение "Параметров"

Формулы

(Тут можно найти некоторые формулы)

Основные параметры

У каждого поля есть редакторы. Именно с помощью этих редакторов можно пользоваться формулами.

Например, можно сделать поле видимым или только читаемым с помощью чек бокса. В "Данных" у чек бокса указываем "Имя", по которому будем обращаться к нему, например "checkbox"

Данное "Имя" можно установить в поля "visible" или "readonly", так же оно используется в формулах.

Редактор для использования формул

Пример формы с чекбоксами

Установка значения "Имя" для чек бокса

Связанные выпадающие списки

Представим ситуация, когда нам надо вывести клиента по его полу. На форму добавляем секцию формы и в секцию добавляем два выпадающих списка.

Секция и два выпадающий списка

Например выберем выпадающий список для клиента.

  1. В пункте параметров "Основные" вводим Надпись "Пол"
  1. В пункте "Данные" задаем
    1. Имя: "gender"
    1. Ввести значение, которое будет отправлять данное поле. "app.loanFindById.client.gender.id"
    1. Ввести куда данное значение будет сохраняться. "app.loanSave.entity.client.gender.id"
  1. В пункте "Элементы списка" необходимо указать
    1. Получить из - откуда будут браться данные списка "app.genderFind"
    1. Отображаемое значение - какое значение будет отображаться в данном выпадающем списке "app.Gender.name"
    1. Значение для отправки - что будет отправляться в запросе "app.Gender.id"
Пункт "Данные" выпадающего списка "Пол"
Пункт "Элементы списка" выпадающего списка "Пол"

Выбираем теперь второй выпадающий.

  1. Указываем в пункте "Основные" вводим Надпись "Клиент"
  1. В пункте данные в поле "Значение" вводим "gender"
  1. В пункте "Элементы списка" указываем
    1. Получить из - откуда будет получатьcя значение "app.clientFind"
    1. Отображаемое значение - то что будет отображаться в выпадающем списке "app.Client.lastName"
    1. Значение для отправки - то что будет отправляться в запросе "app.Client.id"
    1. Параметры - то по какому параметру необходимо отсортировать клиентов "({ conditions: { gender: { value: gender } } })"

    (Возможно не работает)

Пример формы со связанными списками можно посмотреть тут

Пункт "Данные" выпадающего списка "Клиент"
Пункт "Элементы списка" выпадающего списка "Клиент"

Связанные поля

Бывают ситуации, когда надо, чтобы из двух полей составлялось одно.

Для этого необходимо 3 текстовых поля.

Для поля "Фамилия" устанавливаем в данных "Имя", например fam. Для поля "Имя" устанавливаем в данных "Имя", например imya. Для поля "Отчество" устанавливаем в данных "Имя", например otch.

В четвертое поле, в значение поля, вводим формулу, которая собирает из трех полей полное ФИО/наименование организации и т.д., например (fam || "") + " " + (imya || "") + " " + (otch || ""). Точно так же можно сделать и с "Заголовком" Карточки

Пример связанных полей можно увидеть здесь.

Форма со связанными полями

Параметры для поля "Фамилия"
Параметры для поля "Имя"
Параметры для поля "Отчество"

Так же можно использовать функции, которые используются в языке javascript (подробнее узнать здесь).

Связанные поля с помощью формулы
Связанные поля

Установка ограничений по полям

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

В поле "Мин" будем устанавливать минимальное значение, в поле "Макс" - устанавливаем максимальное значение, в поле "Значение" будем вводить необходимое нам значение. Чтобы было удобнее оперировать, необходимо установить в "Параметрах" в разделе "Данные" в поле "Имя" названия как в "Источниках Данных". Так же устанавливаем для полей "Мин" и "Макс" "Тип" данного поля на "Число".

Форма с тремя текстовыми полями: Мин, Значение и Макс

Для ограничения поля "Значение" в "Валидации" данного поля необходимо установить минимум и максимум, например к длине текста, который будет введён в данное поле.

Устанавливаем в параметрах валидации привязку к полям "Мин" и "Макс".

Привязка валидации по полям
Минимальное значение и сообщение о минимальном значении в поле
Максимальное значение и сообщении о максимальном значении в поле
Установка ограничений полей

Так же можно вводить, например формулами "+max +/-1" в параметрах валидации "Макс. длина". Соответственно, так же можно применять и для min.

Пример ограничения с формулой "+max + 1"

Так же ограничение можно установить и через бэкенд. Для этого нужна программа "Insomnia" и определенный код, который вызовет нужный нам id. (перепроверить)

mutation {

validationSave (entity { min: 2, max: 5}) {

id}

}

Отправляем запрос, нам возвращают id. На форме, нам необходим "Выпадающий список" и 3 текстовых поля. Указываем поля выпадающего списка:

  1. Задаем имя выпадающему списку в пункте "Данные"
  1. Получить из
  1. Отображаемое значение. Например, если у вас в сущности нет поля "name", то можно просто вписать id
  1. Значение для отправки
Заданное имя поля в параметрах "Данные"

Элементы списка компонента "Выпадающий список"

В первом поле указать значение: validation.min. Во втором поле указать тоже самое, но для максимума.

Установка значений для минимума
Установка значений для максимума

Чтобы в дальнейшем их не изменять, необходимо установить поле readonly на true. Для третьего поля выбираем тип число и устанавливаем валидацию на минимум и максимум. Выбираем правило "Минимум" и указываем откуда будет браться значение: validation.min. Повторяем тоже самое для максимума, выбирая правило "Максимум" и указание значения validation.max.

Примеры можно увидеть на форме.

Установка валидации для поля
Работа с бэкендом для минимума
Работа с бэкендом для максимума

Описание компонентов форм, которые используются для создания и редактирования форм