3.2. Настройка формы

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

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

3.2.1. Переход к добавлению компонентов

Для дальнейшей работы необходимо открыть вкладку «Компоненты».

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

../_images/form_components.png

Вкладка «Компоненты»

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

3.2.2. Шаги настройки формы

Шаг 1. Переходим во вкладку «Компоненты» → раздел «Структура».

Шаг 2. Выделяем ячейку рабочей области и кликом добавляем компонент «Таблица» на форму.

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

Визуально форма делится:

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

Такая структура необходима для удобства заполнения заявки пользователем и наглядного разделения информации.

../_images/form_layout_goal.jpeg

Логика разметки формы согласно ордеру

Шаг 3. Создаём таблицу с двумя колонками:
  • левая колонка — названия полей;
  • правая колонка — поля ввода.

Чтобы сделать две колонки — нажимаем стрелку влево/вправо, добавляя нужные столбцы.

../_images/add_table_structure.png

Добавление компонента «Таблица» и создание колонок

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

Шаг 4. Настраиваем ширину колонок через иконку шестерёнки (px - в пикселяъ / % - в процентах / Авто).

../_images/table_column_width.png

Настройка ширины столбца таблицы

Шаг 5. Для заголовков секций:

  • выделяем две ячейки в строке при помощи shift;
  • объединяем их при помощи кнопки «объединить»
../_images/merge_cells.jpeg
  • добавляем компонент «Неизменяемый текст»;
  • выравниваем текст по центру.

3.2.3. Настройки компонента «Таблица»

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

Компонент «Таблица» поддерживает следующие настройки:

  • Отобразить границы — отображение внешних и внутренних линий таблицы;
  • Фиксированные размеры таблицы — фиксирует размеры столбцов, при этом вложенные компоненты подстраиваются под заданную ширину;
  • Выводить содержимое в виде абзаца при просмотре/печати — отображает данные таблицы в виде текста;
  • Добавлять строки в режиме заполнения — делает таблицу динамической;
  • Добавить заголовок динамической таблицы — отображает постоянный заголовок над динамическими строками.
../_images/table_settings.png

Настройки компонента «Таблица»

3.2.4. Результат этапа

После выполнения данного этапа:

  • заданы основные параметры формы;
  • выполнена разметка формы в соответствии с ордером;
  • форма подготовлена к добавлению полей заявки.

В следующем этапе будет выполнено добавление полей формы в соответствии со структурой данных ордера.

См.также

Дополнительную информацию можно найти в официальной документации: http://rtd.lan.arta.kz/docs/docs-po-platforme-arta-synergy/ru/latest/form/form-structure.html