3.3. Изменения в конструкторе форм

В рамках подготовки новой версии Synergy нашей основной задачей была модификация конструктора форм таким образом, чтобы:

  1. максимально приблизить вид формы в режиме конструктора к итоговому результату;

  2. добавить возможность моментального просмотра результата конструирования формы, не перемещаясь между разделами Конфигуратора;

  3. уменьшить количество действий (в том числе кликов), требующихся для добавления и настройки компонента формы;

  4. реализовать возможность копирования и вставки компонентов формы;

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

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

3.3.1. Новые средства отображения конструктора форм

В предыдущих версиях Synergy использовались разные средства («движки») для отображения формы: в режиме конструктора, и в режиме просмотра и редактирования. Теперь мы используем один и тот же движок для всего этого, поэтому когда вы создаёте форму, она выглядит практически так же, как будет выглядеть у конечного пользователя (WYSIWYG).

Также мы провели улучшения UI/UX конструктора:

  • элементы управления строками и столбцами формы отображаются всегда, а не только при фокусировке на них;

  • элементы управления вложенной таблицей отображаются при выделении ячейки внутри таблицы;

  • при вставке новой строки или столбца выделение переносится на первую ячейку во вновь вставленном столбце или строке

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

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

В версии perlis по двойному клику по форме она сразу открывается в режиме конструктора, а просмотреть форму можно, выбрав в ее контекстном меню пункт «Просмотреть».

3.3.2. Предпросмотр в конструкторе форм

В предыдущих версиях Synergy было два способа просмотреть результат создания формы:

  1. Сохранив изменения, выйти из конструктора форм и открыть форму на просмотр.

  2. Создать и настроить реестр данных по форме, перейти в клиентское приложение Synergy и создать запись этого реестра.

Оба способа имеют весьма существенный недостаток: невозможно было просмотреть еще не сохраненные изменения. Кроме того, эти способы сравнительно неудобны, поскольку требуют лишних действий.

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

  • конструктор;

  • проигрыватель форм - просмотр;

  • проигрыватель форм - редактирование.

В один момент времени может быть включена только одна кнопка.

По умолчанию форма открывается в режиме «Конструктор».

При переключении между режимами отображаемая область не меняется: координаты верхнего левого угла формы (без учёта управляющих элементов) остаются постоянными.

3.3.3. Новый формат форм

Для нового конструктора форм был реализован новый формат формы. Новым форматом формы мы называем формы, которые были созданы в версии perlis.

Определить формат формы можно двумя способами:

  1. Проверить конфигурационный файл формы: в нем описано новое свойство "format": 1. Если форма была создана в предыдущих версиях Synergy, то свойство "format" имеет значение 0 или вовсе отсутствует.

  2. Проверить раздел формы «Метаданные»: новое нередактируемое поле «Формат» имеет значение 1, 0 или не заполнено - в зависимости от значения свойства "format" в конфигурации формы.

Изменить формат формы средствами Synergy нельзя.

Одним из основных отличий формата 1 от формата 0 является отсутствие подписей у всех компонентов, кроме компонента «Неизменяемый текст».

Исключением являются компоненты выбора:

  • «Переключатель вариантов»

  • «Выбор вариантов»

  • «Выпадающий список»

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

Другим отличием нового формата является отсутствие у компонентов размеров по умолчанию и унификация используемых в них шрифтов:

  • в компоненте «Выпадающий список» размер шрифта по умолчанию устанавливается 12 (вместо предыдущего кегля 14);

  • для компонентов «Дата/время» и «Период повторения» при добавлении новых компонентов на форму параметр «Ширина» по умолчанию не заполняется.

Кроме того, мы изменили способ именования компонентов, расположенных в динамической таблице, при настройке связи: обращение к нему будет производиться в формате <id_таблицы>.<id_компонента>.

3.3.4. Флаг «Фиксированные размеры таблицы»

В предыдущих версиях Synergy считалось, что при указании одновременно и ширины столбца, и ширины компонента в ячейке этого столбца приоритет имеет ширина компонента. Если при этом ширина компонента была указана больше, чем ширина столбца, то столбец растягивался.

В новой версии констуктора мы добавили новый флаг «Фиксированные размеры таблицы», применяющийся к самой форме и к таблицам на ней. Для нового формата форм этот флаг включен по умолчанию.

Флаг имеется как у самой формы (на вкладке «Параметры»), так и у всех вложенных таблиц (в настройках компонента).

Поведение основной таблицы формы и компонентов на ней при включенном флаге:

  • ширина не указана ни в одном столбце формы: столбцы растягиваются на всю ширину формы пропорционально их количеству; если в каком-либо столбце есть компонент, заданная ширина которого превышает рассчитанную для столбца, то компонент обрезается (его перекрывает соседний столбец);

  • ширина указана в некоторых столбцах: столбцы с указанной шириной отображаются с этой шириной, оставшееся место поделено поровну между остальными столбцами; если в каком-либо столбце есть компонент, заданная ширина которого превышает явно указанную или рассчитанную для столбца, то компонент обрезается (его перекрывает соседний столбец);

  • ширина указана во всех столбцах: форма не растягивается и отображается с шириной, равной сумме ширины всех столбцов; если в каком-либо столбце есть компонент, заданная ширина которого превышает указанную для столбца, то компонент обрезается (его перекрывает соседний столбец).

Поведение основной таблицы формы и компонентов на ней при отключенном флаге:

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

  • ширина указана в некоторых столбцах: столбцы с указанной шириной отображаются с этой шириной, оставшееся место поделено поровну между остальными столбцами; если в каком-либо столбце есть компонент, заданная ширина которого превышает явно указанную или рассчитанную для столбца, то он перекрывает соседний столбец;

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

Примечание:

Если компонент перекрывает соседний столбец, то в режиме конструктора форм правая часть компонента, перекрывающая соседние ячейки, не кликабельна, и это может вызвать проблемы с указанием значения компонента по умолчанию. Например, если ширина компонента «Ссылка на реестр» больше, чем ширина столбца, в котором он расположен, то при попытке нажать на правую часть компонента с кнопкой <…> будет выделяться ячейка справа. Такое поведение означает, что форма была неправильно сконфигурирована, и не является ошибкой Synergy.

Состояние параметра для всей формы не влияет на поведение вложенных таблиц формы.

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

3.3.5. Мультивыбор ячеек

Для реализации объединения ячеек нам потребовалось добавить вспомогательную функцию мультивыбора ячеек формы.

Способы выделения:

  • выделить одну ячейку - одинарный клик ЛКМ;

  • выделить несколько смежных ячеек - с зажатой клавишей Shift выделить ЛКМ первую и последнюю ячейки диапазона. В случае, если выделяются ячейки, расположенные в разных строках/столбцах таблицы, результатом выделения является прямоугольная область, ограниченная вручную выделенными ячейками. Необходимо запоминать ячейку, выделенную первой. При последовательном выделении ячеек с зажатым Shift итоговая выделенная область вычисляется относительно первой и последней выбранных ячеек.

  • выделить несколько разрозненных ячеек - с зажатой клавишей Ctrl выделить ЛКМ все нужные ячейки.

  • выделить всю строку/ весь столбец таблицы верстки или таблицы-компонента - кликнуть на левый край строки/ верх столбца соответственно.

Если в выделенной ячейке есть таблица, то выделяются все ее элементы.

Примечание:

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

3.3.6. Объединение и разъединение ячеек

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

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

Кнопки «Объединить ячейки» и «Разъединить ячейки» расположены на верхней панели редактора форм.

Доступность кнопок зависит от выделенной области:

Состояние выделенной области «Объединить» «Разъединить»
Выделена прямоугольная область, содержащая только одинарные ячейки доступна не доступна
Нет выделенных ячеек или выделена одна одинарная ячейка не доступна не доступна
Выделена объединенная ячейка не доступна доступна
Выделена прямоугольная область, содержащая только объединенные ячейки доступна доступна
Выделена прямоугольная область, содержащая одновременно и объединенные, и одинарные ячейки доступна доступна

3.3.6.1. Объединение ячеек

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

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

Если же объединяются ячейки, среди которых хотя бы две содержат компоненты, то система запрашивает подтверждение действия у пользователя, поскольку в этом случае в объединенной ячейке сохраняется один компонент, который находился в самой верхней левой непустой ячейке в выделенной области.

Ранее объединенные ячейки объединяются по тем же правилам, что и одинарные.

3.3.6.2. Разъединение ячеек

Разъединяются только ранее объединенные ячейки. Результатом разъединения являются одинарные ячейки.

Доступно одновременное разъединение нескольких объединенных ячеек.

Если разъединяемая ячейка содержала компонент, то после разъединения он располагается в самой верхней левой ячейке выделенной области.

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

3.3.7. Копирование содержимого ячеек

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

3.3.7.1. Копирование/ вырезание ячеек

Копирование выделенной ячейки выполняется по комбинации Ctrl+C, вырезание компонента в ячейке - по комбинации Ctrl+X.

Примечание:

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

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

Если в копируемой ячейке располагается таблица, копируется ее структура и параметры, а также все расположенные в таблице элементы со своими параметрами, связями и настройками.

3.3.7.2. Вставка в ячейку

Вставка в выделенную ячейку по комбинации Ctrl+V. При вставке в выделенную ячейку добавляется объект, который быть скопирован/вырезан последним.

Примечание:

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

Если в момент вставки выделенная ячейка содержала какой-либо объект, то после подтверждения действия он будет замене на вставленный компонент.

При вставке объекта на форму (не в динамическую таблицу) его кода среди других объектов формы, а при вставке объекта в динамическую таблицу уникальность его кода проверяется только среди других объектов в этой таблице. Если код объекта не уникален в своей области, то к нему прибавляться постфикс вида _copy%N%, где %N% - такое число, что полученный код компонента становится уникальным.

Если вставляемым объектом является динамическая таблица, и ее код не уникален среди компонентов формы, то постфикс добавляется только к коду самой таблицы. Коды компонентов таблицы не изменяются.

3.3.8. Inline-редактор компонентов

В предыдущих версиях Synergy все свойства и настройки компонента располагались в двух «разделах»:

  • основные параметры компонента, такие как идентификатор, размеры, выравнивание и используемый шрифт, открывались по нажатию на «шестеренку»;

  • остальные настройки компонента, в том числе специфические для каждого типа компонента, открывались по нажатию на «восклицательный знак».

Кроме того, некоторые настройки компонентов не соответствовали этим разделам: например, настройки таблицы-компонента располагались в «шестеренке», а список элементов в компонентах выбора настраивались в отдельном окне «Элементы».

Мы унифицировали расположение параметров компонентов и реализовали всплывающий («inline») редактор. В него перенесены основные параметры компонентов, которые ранее открывались по нажатию на «шестеренку»:

  • идентификатор компонента;

  • ширина и высота компонента;

  • выравнивание;

  • шрифт, размер и параметры шрифта, используемого в компоненте.

Кроме того, inline-редактор содержит кнопку быстрого перехода к настройкам компонента , кнопку удаления компонента , а также новые кнопки:

  • вставки новых строк и столбцов;

  • выделения таблицы, в которой расположен компонент (только для компонентов, расположенных во вложенных таблицах);

  • очистки выделенной таблицы (только для выделенной ячейки с таблицей).

Внешний вид и набор отображаемых элементов редактора зависит от компонентов, расположенных в выделенных ячейках:

Рисунок 3.1. Выделен один компонент (не таблица)

Выделен один компонент (не таблица)

Рисунок 3.2. Выделен один компонент во вложенной таблице

Выделен один компонент во вложенной таблице

Рисунок 3.3. Выделено несколько компонентов (без таблицы)

Выделено несколько компонентов (без таблицы)

Рисунок 3.4. Выделена ячейка с таблицей

Выделена ячейка с таблицей

Рисунок 3.5. Выделены одновременно ячейки и с обычным компонентом, и с таблицей

Выделены одновременно ячейки и с обычным компонентом, и с таблицей

В рамках реализации inline-редактора были перемещены настройки компонентов, которые ранее располагались в основных параметрах или открывались по клику на компонент:

  1. Для компонента «Таблица» все настройки, кроме имени компонента, перенесены на вкладку «Свойства».

  2. Для объектов «Выпадающий список», «Выбор вариантов» и «Переключатель вариантов» в окне «Настройки компонента» добавлена новая вкладка «Элементы», которая содержит список элементов компонента (выбор справочника, выбор языка, наименования и значения элементов).

  3. Для объекта «Изображение» в окне (!) добавлена новая вкладка «Свойства», на которой располагаются:

  • кнопка «Выберите файл»

  • область отображения имени выбранного файла

  • кнопка «Загрузить»

3.3.9. Отмена и возврат действий в конструкторе форм

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

Примечание:

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

Кнопки «Отменить действие» и «Вернуть действие» расположены на верхней панели редактора форм. Помимо кнопок на панели, отмена выполняется по нажатию на Ctrl+Z, возврат - по нажатию на Ctrl+Y.

Каждое выполняемое действие с компонентами формы сохраняется как отдельное состояние формы. Массовые действия с компонентами (изменение параметров компонентов или их удаление при мультивыборе; объединение ячеек, содержащих компоненты) сохраняются, как один шаг.

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

3.3.9.1. Отмена

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

Аналогично в предыдущее состояние возвращаются все таблицы формы.

В результате отмены изменяется только состав формы. Ее метаданные, параметры, печатные шаблоны и представления не изменяются.

Доступность кнопки «Отменить действие» зависит от наличия шагов, доступных для отмены: если для формы не сохранено ее предыдущего состояния, или форма находится в последнем сохраненном состоянии, то отмена недоступна.

Если в момент времени для формы сохранены и предыдущие, и последующие состояния, то в случае ручного изменения формы пользователем (любым способом, кроме отмены и возврата) сведения обо всех последующих состояниях формы удаляются.

3.3.9.2. Возврат

Функция возврата работает аналогично отмене, при этом в результате возврата форма переходит в следующее сохраненное состояние.

Кнопка «Вернуть действие» доступна только в том случае, если для формы сохранены ранее отмененные состояния.

3.3.10. Удаление мобильного представления

К сожалению, для реализации всех новых возможностей конфигуратора мы были вынуждены прекратить использование мобильного представления форм. Пункт «Мобильное представление» был удален из списка представлений формы, а на верхней панели конструктора форм более не отображается текущее представление формы.

В связи с этим были изменены методы API, связанные с мобильным представлением формы:

  • удален метод saveMobileFormData;

  • в методах rest/api/asforms/form/multipartdata и rest/asforms/form/multipartdata удален параметр typeform;

  • в методе rest/api/asforms/data/save удален параметр isMobile.

3.3.11. Использование счетчика на форме

Вместе с реализацией нового конструктора форм мы изменили поведение компонента формы «Номер». Ранее для каждого компонента этого типа, использующего один шаблон номера, при создании записи по форме выделялось новое значение счетчика, при этом для компонента в динамической таблице использовалось одно значение.

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