Редактор экранных форм

Переход на вкладку "Редактор экранных форм" происходит:

• нажатием кнопки "Создать экранную форму
• открытием выбранной экранной формы кликом -
  • по ее наименованию в таблице "Черновики"
  • по номеру версии в таблице "Опубликованные"

Вкладка "Редактор экранных форм" отображает создаваемые и редактируемые экранные формы. 

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

При наведении курсора на кнопку появляется всплывающая подсказка с названием кнопки.

Панель управления экранной формой 

Панель управления экранной формой содержит следующие кнопки:

1. Кнопка "Посмотреть"- предназначена для предпросмотра готовой экранной формы.
   
   
2. Кнопка "Опубликовать"– предназначена для публикации готовой экранной формы.
   
3. Кнопка "Редактировать"– предназначена для редактирования экранной формы.
   
   
4. Кнопка "Закрыть" – при нажатии кнопки "Закрыть"  закрывается вкладка редактора и открывается вкладка "Черновики". Создаваемая форма при этом автоматически сохраняется.

Кнопки панели быстрых действий

Предусмотрены следующие кнопки панели быстрых действий:

Панель элементов экранной формы

Под панелью кнопок быстрых действий вдоль всего левого края рабочей области располагается панель с элементами экранной формы.

В таблице приведено назначение элементов экранной формы.

При наведении и выборе элементы выделяются серым цветом.

Панель параметров элементов экранной формы

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

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

Рабочее поле редактора экранных форм

Основную часть страницы занимает рабочее поле редактора экранных форм. На поле могут располагаться элементы из панели с элементами экранной формы. Элементы могут добавляться перетаскиванием с зажатой левой кнопкой мыши.

При добавлении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Выбор элемента экранной формы из панели элементов (1), расположенной слева в окне, перетаскиванием элемента экранной формы, при помощи компьютерной мыши на рабочее поле редактора (2).
2. Нажатие на элемент в рабочем поле редактора, при этом открывается в правой части интерфейса окно "Параметры" (3), где Дизайнер процесса может настроить элемент экранной формы.
3. Заполнение  полей параметров элемента экранной формы, задавая тем самым вид, форму и наполнение элемента экранной формы.
4. Переход к выбору следующего элемента экранной формы.

Элемент "Кнопка" 

Элемент «Кнопка» размещается на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Кнопка".

Поля настройки параметров элемента "Кнопка".

При добавлении элемента экранной формы "Кнопка" на рабочее поле редактора экранных форм выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение в форму элемент "Кнопка", при этом в правой части интерфейса открывается окно параметров элемента "Кнопка".
2. Выбор переменной в поле "Название", ассоциированной с данной кнопкой.
3. Настройка ширины кнопки через чекбокс.
4. Выбор типа кнопки из выпадающего списка.
5. Выбор выделения цветом всей кнопки или только ее обводки через чекбокс .
6. Переход к выбору другого элемента.

Элемент "Блок с текстом" 

Элемент "Блок с текстом" размещается на рабочем поле редактора экранных форм.

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

Ввести текст вручную.

Использовать входной параметр для передачи в него текста.

Описание настроек параметров элемента "Блок с текстом".

При добавлении элемента экранной формы "Блок с текстом" на рабочее поле редактора экранных форм выполняется следующая последовательность действий:

1. Размещение блока
   Пользователь переносит элемент "Блок с текстом" из панели элементов на рабочую область редактора экранных форм. После размещения справа автоматически открывается окно параметров этого блока.

2. Определение способа задания текста

   • Если пользователь хочет задать текст вручную — он оставляет чекбокс "Добавить входной параметр" выключенным.

     • В этом случае отображается поле "Текст", куда можно ввести текст длиной до 500 символов.

   • Если пользователь хочет передавать текст в этот элемент экранной формы — он включает чекбокс "Добавить входной параметр".

     • В поле "Название входного параметра" вводится наименование, которое будет присвоено полю входного параметра элемента экранной формы при ее добавлении в аналогичный блок на схеме процесса. 
       Например, публикуем экранную форму и задаем элементу "Блок с текстом" название входного параметра:
       
       Переходим на создание процесса и размещаем блок "Экранная форма". При выборе ранее настроенной экранной формы название входного параметра будет отображаться в свойствах "Входные параметры". Пользователь сможет передавать в элемент "Блок с текстом" на экранной форме значение из других блоков или из переменных.
       

     
     

3. Настройка внешнего вида текста

   • Пользователь выбирает формат шрифта: нормальный, жирный, наклонный, подчёркнутый.

   • Выбирает размер шрифта из выпадающего списка.

   • Определяет положение текста: слева, по центру, справа.

4. Сохранение настроек
   Все параметры сохраняются автоматически при их изменении.

5. Продолжение работы
   После настройки блока пользователь может приступить к размещению и настройке других элементов экранной формы.

Элемент "Текстовое поле" 

Элемент "Текстовое поле" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Текстовое поле".

Описание настроек параметров элемента "Текстовое поле".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение в форму элемента "Текстовое поле", в правой части интерфейса открывается окно параметров элемента "Текстовое поле".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.
3. Ввод названия в поле "Название".
4. Выбор типа переменной (строка, число) в выпадающем списке.
5. Ввод подсказки в поле "Подсказка".
6. При необходимости через чекбокс Дизайнер процесса может сделать поле обязательным для заполнения.
7. Выбор положения названия (сверху, слева).
8. Установка при необходимости значения по умолчанию.
9. Корректировка размеров блока и расположения "Названия" относительно текстового поля.
10. Установка при необходимости количества отображаемых строк.
11. Установка свойства поля (редактируемое, для чтения).
12. Настройка класса объекта, если необходимо поменять стиль блока.
13. Переход к выбору другого элемента.

Элемент "Чек-бокс" 

Элемент "Чек-бокс" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Чек-бокс".

Описание настроек параметров элемента "Чек-бокс".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  "Чекбокс",  при этом в правой части интерфейса открывается окно параметров элемента "Чекбокс".

2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.

3. Ввод наименования в поле "Название".

4. Установка размера.

5. Выбор значения по умолчанию (да, нет).

6. Выбор свойства чекбокса (редактируемый, для чтения).

7. Настройка класса объекта, если необходимо поменять стиль блока.

8. Переход к выбору другого элемента.

Элемент "Таблица"  

Элемент "Таблица" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Таблица".

Описание настроек параметров элемента "Таблица".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента "Таблица",  в правой части интерфейса открывается окно параметров элемента "Таблица".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.
3. Ввод названия переменной в поле "Название".
4. Выбор при необходимости через чекбокс значение "Только просматривать данные".
5. Ввод параметров для построения таблицы, с указанием числа колонок и строк.
6. Настройка заливки, типа и размера шрифта заголовка таблицы.
7. Настройка для каждой колонки таблицы ее заголовка и ширины.
8. Ввод при необходимости класса объекта.
9. Переход к выбору другого элемента.

Элемент "Радиокнопка" 

Элемент "Радиокнопка" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Радиокнопка".

Описание настроек параметров элемента "Радиокнопка".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  "Радиокнопка",  в правой части интерфейса открывается окно параметров элемента "Радиокнопка".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.
3. Ввод наименования в поле "Название группы".
4. Настройка положения названия (сверху, слева).
5. Настройка значения ширины названия группы и кнопок.
6. Настройка свойств радиокнопки (редактируемая, для чтения).
7. Ввод при необходимости через чекбокс признака выбора текущей радиокнопки по умолчанию.
8. Добавление/удаление радиокнопки в группу (иконки "+" и "Корзина").
9. Наличие возможности настройки каждой радиокнопки группы по аналогии с настройкой первой радиокнопки.
10. Переход к выбору другого элемента.

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

Элемент "Выпадающий список" размещается на рабочем поле редактора экранных форм.

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

Описание настроек параметров элемента "Выпадающий список".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

• Размещение блока
  Элемент "Выпадающий список" перетаскивается на рабочее поле редактора экранных форм.
  Открывается панель параметров справа.

• Настройка списка значений

  • Если используется статичный список:

    • Пользователь вручную вводит значения в поля "Список".

    • Для добавления нового значения нажимает кнопку "+", для удаления — кнопку "Корзина".

  • Если используется список из словаря:

    • Пользователь активирует чекбокс "Использовать список из словаря".

    • Отображается поле "Название входного параметра словаря", в котором необходимо указать имя параметра, который в процессе будет содержать в себе словарь значений (например, из результата выполнения другого блока или переменной процесса).

    • В области редактирования и предпросмотра экранной формы список остаётся пустым до использования экранной формы в процессе.

• Дополнительные настройки

  • Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.

  • Настраивается Название и его положение.

  • Устанавливаются значения Ширина названия и Ширина выпадающего списка.

  • При необходимости вводится Класс для кастомизации блока.

• Сохранение и продолжение работы
  Все настройки сохраняются автоматически. После настройки пользователь может перейти к размещению следующих элементов.

Элемент "Вложение" 

Элемент "Вложение" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента "Вложение".

Описание настроек параметров элемента "Вложение".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  "Загрузить вложение".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать файлы в элемент экранной формы из других блоков процесса. 
3. Ввод в поле "Название" значения для отображения названия поля "Загрузить вложение".
4. Настройка положения названия (сверху, слева).
5. Настройка значения "Ширина названия".
6. Настройка значения "Ширина поля для ввода".
7. Ввод типов форматов файлов по форме ".формат" или выбор нужных из списка в поле "Формат принимаемых файлов", чтобы ограничить форматы файлов, которые пользователи смогут прикрепить в качестве вложения к экранной форме.
8. Ввод при необходимости класса объекта.
9. Переход к размещению нового элемента.

Элемент "Ссылка"

Элемент "Ссылка" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента  "Ссылка".

Описание настроек параметров элемента "Ссылка".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента "Ссылка".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.
3. Ввод в поле "Название" названия вложения.
4. Настройка положения названия (сверху, слева).
5. Настройка значения "Ширина названия".
6. Настройка значения "Ширина поля для ввода".
7. Ввод значения  ссылки в поле "Текст ссылки".
8. Ввод при необходимости класса объекта.
9. Переход к размещению нового элемента.

Элемент "Календарь" 

Элемент "Календарь" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента  "Календарь".

Описание настроек параметров элемента "Календарь".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента "Календарь", при этом в правой части интерфейса открывается окно параметров элемента "Календарь".
2. Ввод в поле "Название входного параметра" имени параметра. Параметр позволяет передавать данные в элемент экранной формы из других блоков процесса (например, из переменных или результатов предыдущих шагов). Также его можно использовать как выходное значение — сотрудник вводит данные вручную, а процесс затем использует это значение для выполнения следующих действий.
3. Ввод наименования календаря в поле "Название". Это необходимо для обозначения календаря.
4. Настройка положения названия (сверху, слева).
5. Настройка значения "Ширина названия".
6. Настройка значения "Ширина поля для ввода".
7. Выбор из выпадающего списка формата представления даты.
8. Настройка свойства календаря (редактируемый, для чтения).
9. Ввод при необходимости класса объекта.
10. Переход к размещению нового элемента.

Элемент "Колонки" 

Элемент "Колонки"  размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента  "Колонки".

Описание настроек параметров элемента "Колонки".

При добавлении элемента экранной формы "Колонки" выполняется следующая типовая последовательность операций:

1. Дизайнер процесса выбирает в панели функциональных блоков блок "Колонки"
2. Дизайнер процесса зажимает левой клавишей мыши блок "Колонки" и переносит блок на рабочую область экранной формы. При этом в правой части экрана отображается  панель настроек блока "Колонки", размещённого на экранной форме.
3. Добавление колонки, внесение корректировок размеров колонок, способов размещения элементов в данных колонках (сверху посередине, в центре, снизу посередине), стиль линии (сплошная, пунктир, точка), ширина линии.
4. Настройка блока "Колонки".
5. Завершение настройки блока "Колонки" нажатием кнопки "Закрыть".
6. Блок "Колонки" закрывается.

Элемент "Колонки" в простейшем случае представляет собой два парных прямоугольника.

Параметры экранной формы используются в процессе для передачи данных в экранную форму и для получения данных из экранной формы в шагах процесса.
Таким образом создается структура экранной формы. 

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

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

Пример задания свойств для элемента "Колонки" 

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

Можно указать сколько процентов будет занимать выбранная колонка, также обводку и ее ширину.

Размещение элементов колонки и стиль линии могут быть настроены с помощью соответствующих выпадающих списков.

Для "свертывания" настроек колонки и ее удаления используются соответственно кнопки "–" и "Корзина", расположенные справа от номера колонки.

Для повышения гибкости настроек некоторых элементов экранной формы (например, текстовое поле, блок с текстом и др.) поддерживается задание стилевого класса элемента экранной формы, что позволяет связать данный элемент экранной формы со стилевым оформлением, который прописывается в настройках параметров экранной формы в поле кода js или css. Для этого вводится необязательный параметр "Класс", в значении которого допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Для структурирования расположения элементов на форме рекомендуется размещать их в прямоугольники инструмента "Колонки".

По ссылке можно посмотреть 

• Примеры работы со вкладкой "Редактор экранных форм"

Элемент "Изображение" 

Элемент "Изображение" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента  "Изображение".

Описание настроек параметров элемента "Изображение".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  "Изображение".
2. В правой части интерфейса открывается окно параметров элемента "Изображение".
3. Ввод названия параметра в поле "Название входного параметра".
4. Настройка при необходимости размера ширины.
5. Настройка при необходимости размера высоты.
6. Ввод при необходимости класса объекта.
7. Переход к размещению нового элемента.

Элемент "Вкладки" 

Элемент "Вкладки" размещён на рабочем поле редактора экранных форм.

Справа находится окно параметров элемента  "Вкладки".

Описание настроек параметров элемента "Вкладки".

При размещении элемента экранной формы выполняется следующая типовая последовательность операций:

1. Перенос из блока элементов и размещение  в форму элемента  "Вкладки", при этом в  правой части интерфейса открывается окно параметров элемента "Вкладки".
2. Отображение в рабочей области панели с активной  вкладкой.
3. Определение и задание числа вкладок: по умолчанию открыта одна вкладка.
4. Задание названия, цвета названия вкладок.
5. Добавление нужных функциональных блоков на каждую вкладку.

Следует отметить, что Редактор экранных форм  автоматически запоминает конфигурацию экранной формы вместе с ее свойствами.

Элемент "Справочник" 

Элемент "Справочник" размещён на рабочем поле редактора экранных форм.

1. Справа находится панель параметров элемента  "Справочник" без выбора справочника.
   
2. Справа находится окно параметров элемента  "Справочник" с  выбором справочника.
   

Для того чтобы выбрать справочник необходимо:

1. Нажать на  кнопку "Выбрать справочник".
2. Появится окно со списком доступных справочников
   
3. Выбрать необходимый справочник.
4. В окне параметров элемента "Справочник" появится название выбранного справочника.
   

Более подробно информацию по работе со справочниками можно посмотреть здесь: Справочники

Описание настроек параметров элемента  "Справочник".

Чекбокс "Создать" - на экранной форме пользователю отображается кнопка . С помощью нее можно добавить запись в справочник. 

Чекбокс "Редактировать" - на экранной форме пользователю отображается кнопка . С помощью нее можно отредактировать запись в справочнике.

Чекбокс "Показать всю информацию" - с помощью чекбокса можно просмотреть всю информацию о записях на экранной форме.