Настройка формы
===============

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

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

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

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

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

.. figure:: ../resources/img/form_components.png

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

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


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

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

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

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

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

* **вертикально** — на два столбца:
  
  * левый — наименования полей;
  * правый — поля для ввода данных;

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

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


.. figure:: ../resources/img/form_layout_goal.jpeg

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


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

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

.. figure:: ../resources/img/add_table_structure.png

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

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


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


.. figure:: ../resources/img/table_column_width.png

   Настройка ширины столбца таблицы
   
**Шаг 5.** Для заголовков секций:

* выделяем две ячейки в строке при помощи shift; 
* объединяем их при помощи кнопки "объединить" 

.. image:: ../resources/img/merge_cells.jpeg

* добавляем компонент «Неизменяемый текст»;
* выравниваем текст по центру.

.. raw:: html

   <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top:20px;">
       <iframe src="https://www.youtube.com/embed/HZ--Et7EI8A"
           style="position: absolute; top:0; left:0; width:100%; height:100%;"
           frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen>
       </iframe>
   </div>


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

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

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

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

.. figure:: ../resources/img/table_settings.png

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


Результат этапа
---------------

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

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

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

.. seealso::

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