You can switch to the tab "Screen form constructor" either by clicking the button "Create screen form" or by opening the selected screen form by clicking its name in the table "My screen forms".
The "Screen form constructor" tab displays the created and editable screen forms.
Above the workspace of the screen form constructor there is a line with panels of buttons for controlling the screen form and quick action buttons.
When you hover the cursor over a button, a tooltip with the button name appears.
Screen form control bar
The screen form control panel contains the following buttons:
- The "Preview" button - is intended for previewing the ready screen form.
- Publish" button - is used to publish the finished screen form.
- Кнопка «Редактировать» – предназначена для редактирования экранной формы.
- "Close" button - if you click the "Close" button, the editor tab is closed and the "My screen forms" tab is opened. The created form is automatically saved.
Quick action bar buttons
The following quick action bar buttons are provided:
Button display | Button name | Button assignment |
---|---|---|
1. | Undo | Cancel action by step |
2. | Redo | Returning the canceled action by a step |
3. | Clear | Clearing screen form elements |
4. | Delete | Deleting a selected item |
5. | Duplicate | Duplicating a screen form element |
Screen form elements panel
Below the Quick actions panel along the entire left edge of the workspace is a panel with screen form elements.
The table shows the purpose of the screen form elements.
Designation and name of a screen form element in the panel | Assignment of a screen form element | Screen form element designation in the screen form editor |
"Text block" element - is intended for placing text fields on the screen form | ||
"Button" element - is intended for further branching of execution variants. The name of the button is used as the name of a boolean variable. It has a mandatory field to be filled in "Value at confirmation" | ||
"Text field" element is intended for placing text values on the screen form, such as titles and other names, notifications and alerts, which are not changed later in progress with the screen form in the workflow of process instances in which this form is present
| ||
"Checkbox" element is intended for selecting some values from the values presented to the workflow designer in the screen form, one or several, which will result in the next action with the screen form or with the task as a whole, depending on the user's choice and the composition of the screen form itself. That is, checkboxes can be used to create conditions for selecting several related or interrelated values, or not to select at all, which will also result in a certain action in progress of the workflow instance | ||
"Table" element is intended for placing a table on the screen form | ||
"Radio button" element is intended for selecting a single value from several presented ones. The values can be both related and opposite. But, when using this element, there is always a condition for selecting a value, unlike a checkbox, where you can select no element at all
| ||
"Dropdown list" element - is used to select data, within the execution of a workflow instance. The workflow elements are independently inserted into the list | ||
"Upload attachment" element is intended for attaching any user files from local storage, required in the process of screen form execution within the workflow instance operation | ||
"Link" element is intended for downloading an attachment attached to the screen form | ||
"Calendar" element is intended for quick selection by the user, if necessary, of a date or time interval. Thus, the user of the screen form does not need to select the date format, after specifying it in the calendar, it will be selected automatically | ||
"Columns" element - intended for positioning and grouping screen form elements | ||
"Image" element is intended for placing an image |
The elements are grayed out when you point and select them.
Screen form element options panel
Along the right edge, when you add a form element, the Options panel for screen elements opens, which contains fields for entering text, values, and element placement coordinates.
Workspace of the screen form editor
Основную часть страницы занимает рабочее поле редактора экранных форм. На поле могут располагаться элементы из панели с элементами экранной формы. Элементы могут добавляться перетаскиванием с зажатой левой кнопкой мыши.
При добавлении элемента экранной формы выполняется следующая типовая последовательность операций:
- Выбор элемента экранной формы из панели элементов, расположенной слева в окне, перетаскиванием элемента экранной формы, при помощи компьютерной мыши.
- В правой части интерфейса открывается окно «Параметры», где дизайнер процесса может настроить элемент экранной формы.
- Заполнение полей параметров элемента экранной формы, тем самым редактируя вид, форму и наполнение элемента экранной формы.
- Переход к выбору следующего элемента экранной формы.
Элемент «Кнопка»
При добавлении элемента экранной формы "Кнопка" выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемент "Кнопка", в правой части интерфейса открывается окно параметров элемента "Кнопка".
- Выбор переменной в поле «Название», ассоциированной с данной кнопкой.
- Настройка через чекбокс ширины кнопки.
- Выбор типа кнопки из выпадающего списка.
- Выбор через чекбокс выделение цветом всей кнопки или только ее обводки.
- Переход к выбору другого элемента.
Элемент «Блок с текстом»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Блок с текстом», в правой части интерфейса открывается окно параметров элемента «Блок с текстом».
- Заполнение поля «Текст» текстовым сообщением до 500 символов.
- Выбор формата написания шрифта (нормальный, жирный, наклонный, подчеркнутый).
- Выбор размера шрифта.
- Выбор расположения текста (слева, справа, по центру).
- Настройка класса объекта.
- Переход к выбору другого элемента.
Элемент «Текстовое поле»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Текстовое поле», в правой части интерфейса открывается окно параметров элемента «Текстовое поле».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод названия в поле «Название».
- Выбор типа переменной (строка, число) в выпадающем списке.
- Ввод подсказки в поле «Подсказка».
- При необходимости через чекбокс дизайнер процесса можно сделать поле обязательным для заполнения.
- Выбор положения названия (сверху, слева).
- Установка при необходимости значения по умолчанию.
- Корректировка размеров блока и расположения «Названия» относительно текстового поля.
- Установка при необходимости количества отображаемых строк.
- Установка свойства поля (редактируемое, для чтения).
- Настройка класса объекта, если необходимо поменять стиль блока.
- Переход к выбору другого элемента.
Элемент «Чек-бокс»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Чекбокс», в правой части интерфейса открывается окно параметров элемента «Чекбокс.
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод наименования в поле «Название».
- Установка размера.
- Выбор значения по умолчанию (да, нет).
- Выбор свойства чекбокса (редактируемый, для чтения).
- Настройка класса объекта, если необходимо поменять стиль блока.
- Переход к выбору другого элемента.
Элемент «Таблица»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента "Таблица", в правой части интерфейса открывается окно параметров элемента "Таблица".
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод названия переменной в поле «Название».
- Выбор при необходимости через чекбокс значение «Только просматривать данные.
- Ввод параметров для построения таблицы, с указанием числа колонок и строк.
- Настройка заливки, типа и размера шрифта заголовка таблицы.
- Настройка для каждой колонки таблицы ее заголовка и ширины.
- Ввод при необходимости класса объекта.
- Переход к выбору другого элемента.
Элемент «Радиокнопка»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Радиокнопка», в правой части интерфейса открывается окно параметров элемента «Радиокнопка».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод наименования в поле «Название группы».
- Настройка положения названия (сверху, слева).
- Настройка значения ширины названия группы и кнопок.
- Настройка свойств радиокнопки (редактируемая, для чтения).
- Ввод при необходимости через чекбокс признака выбора текущей радиокнопки по умолчанию.
- Ввод при необходимости класса объекта.
- Добавление/удаление радиокнопки в группу (иконки «+» и «Корзина»).
- Наличие возможности настройки каждой радиокнопки группы по аналогии с настройкой первой радиокнопки.
- Переход к выбору другого элемента.
Элемент «Выпадающий список»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Выпадающий список», в правой части интерфейса открывается окно параметров элемента «Выпадающий список».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод названия в поле «Название».
- Настройка положения названия (сверху, слева).
- Настройка значения «Ширина названия».
- Настройка значения «Ширина выпадающего списка» для обозначения ширины поля с выпадающим списком.
- Перечисление значений в разделе «Список», которые будут выводиться в выпадающем списке на экранной форме. Добавление нового значения, вводом текста в поле и нажав на кнопку «+». При помощи кнопки «Корзина» можно удалить лишнее значение.
- Ввод при необходимости класса объекта.
- Переход к выбору другого элемента.
Элемент «Загрузить вложение»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Загрузить вложение».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод в поле «Название» значения для отображения названия поля «Загрузить вложение».
- Настройка положения названия (сверху, слева).
- Настройка значения «Ширина названия».
- Настройка значения «Ширина поля для ввода».
- Ввод типов форматов файлов по форме «.формат» или выбор нужных из списка в поле «Формат принимаемых файлов», чтобы ограничить форматы файлов, которые пользователи смогут прикрепить в качестве вложения к экранной форме.
- Ввод при необходимости класса объекта.
- Переход к размещению нового элемента.
Элемент «Ссылка»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Ссылка».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод в поле «Название» названия вложения.
- Настройка положения названия (сверху, слева).
- Настройка значения «Ширина названия».
- Настройка значения «Ширина поля для ввода».
- Ввод значения ссылки в поле «Текст ссылки».
- Ввод при необходимости класса объекта.
- Переход к размещению нового элемента.
Элемент «Календарь»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Календарь».
- в правой части интерфейса открывается окно параметров элемента «Календарь».
- Ввод в поле «Имя переменной» имени переменной. Используя переменную экранной формы можно подставить ее в качестве входного значение, которое будет отображаться в этом элементе или использоваться в результатах работы с экранной формой.
- Ввод наименования календаря в поле «Название».
- Настройка положения названия (сверху, слева).
- Настройка значения «Ширина названия».
- Настройка значения «Ширина поля для ввода».
- Выбор из выпадающего списка формата представления даты.
- Настройка свойства календаря (редактируемый, для чтения).
- Ввод при необходимости класса объекта.
- Переход к размещению нового элемента.
Элемент «Изображение»
При размещении элемента экранной формы выполняется следующая типовая последовательность операций:
- Перенос из блока элементов и размещение в форму элемента «Изображение».
- В правой части интерфейса открывается окно параметров элемента «Изображение».
- Ввод имени переменной в поле «Имя переменной».
- Настройка при необходимости размера ширины.
- Настройка при необходимости размера высоты.
- Ввод при необходимости класса объекта.
- Переход к размещению нового элемента.
Элемент «Колонки»
При добавлении элемента экранной формы «Колонки» выполняется следующая типовая последовательность операций:
- Дизайнер процесса выбирает в панели функциональных блоков блок «Колонки»
- Дизайнер процесса зажимает левой клавишей мыши блок «Колонки» и переносит блок на рабочую область экранной формы.
- В правой части экрана отображается панель настроек блока «Колонки», размещённого на экранной форме.
- Добавление колонки, внесение корректировок размеров колонок, способов размещения элементов в данных колонках (сверху посередине, в центре, снизу посередине), стиль линии (сплошная, пунктир, точка), ширина линии.
- Настройка блока «Колонки».
- Завершение настройки блока "Колонки" нажатием кнопки «Закрыть».
- Блок «Колонки» закрывается.
Элемент «Колонки» в простейшем случае представляет собой два парных прямоугольника.
Параметры экранной формы используются в процессе для передачи данных в экранную форму и для получения данных из экранной формы в шагах процесса.
Таким образом создается структура экранной формы.
Каждый из элементов экранной формы, кроме блока «Колонки», имеют как входные параметры, так и выходные, которые заполняются уже непосредственно в конструкторе процессов, при выстраивании цепочки задач проекта процесса.
Справа от рабочего поля размещается панель задания свойств настраиваемого инструмента. Панель свойств настраиваемого инструмента может быть закрыта нажатием на расположенный в ее правом верхнем углу значок «Х». После закрытия всех панелей инструментов становится видна панель настройки формы в целом.
Пример задания свойств для элемента "Колонки"
Нажав на кнопку «Добавить колонку», можно добавить новую колонку. Нажав на кнопку «+» справа от номера колонки, можно «Раскрыть подробный список настроек, связанных с выбранной колонкой.
Можно указать сколько процентов будет занимать выбранная колонка, также обводку и ее ширину.
Размещение элементов колонки и стиль линии могут быть настроены с помощью соответствующих выпадающих списков.
Для «свертывания» настроек колонки и ее удаления используются соответственно кнопки «–» и «Корзина», расположенные справа от номера колонки.
Для повышения гибкости настроек некоторых элементов экранной формы (например, текстовое поле, блок с текстом и др.) поддерживается задание стилевого класса элемента экранной формы, что позволяет связать данный элемент экранной формы со стилевым оформлением, который прописывается в настройках параметров экранной формы в поле кода js или css. Для этого вводится необязательный параметр «Класс», в значении которого допускается указывать сразу несколько классов, разделяя их между собой пробелом.
Для структурирования расположения элементов на форме рекомендуется размещать их в прямоугольники инструмента «Колонки».
По ссылке можно посмотреть