Общее описание =============== .. contents:: :depth: 4 Основные компоненты -------------------- Text Field ~~~~~~~~~~~~ .. _Text_Field: Однострочное текстовое поле. .. image:: _static/Text_Field_Component.png :width: 400 :align: center `См. подробное описание Text Field на Form.io `_ :ref:`См. доработки компонента` :ref:`См. пример Text Field` Select Journal ~~~~~~~~~~~~~~~ .. _Select_Journal_: Компонент, отвечающий за выбор из журнала. Работает только в том случае, если для ссылочного типа существует журнал. .. image:: _static/Select_Journal_Component.png :width: 400 :align: center :ref:`См. подробное описание Select Journal` :ref:`См. пример Select Journal` Select Orgstruct ~~~~~~~~~~~~~~~~~~ .. _Select_Orgstruct_: Компонент, отвечающий за выбор из оргструктуры пользователей/групп. Что именно будет выбираться (пользователи с группами вместе, или что-то одно), – регулируется внутри компонента. .. image:: _static/Select_Orgstruct_Component.png :width: 400 :align: center :ref:`См. подробное описание Select Orgstruct` :ref:`См. пример Select Orgstruct` Number ~~~~~~~ .. _Number: Числовое поле. Может принимать в себя как целочисленные значения, так и с плавающей точкой. Это регулируется внутри компонента. По умолчанию разряды числа разделены пробелом. Например, 1 000 000 `См. подробное описание Number на Form.io `_ Date/Time ~~~~~~~~~~ .. _Date_Time: Поле, отвечающее за отображение даты и времени. .. image:: _static/Date_Time_Component_01.png :width: 250 :align: center Отображение регулируется внутри компонента, доступна локализация RU/Eng .. image:: _static/Date_Time_Component.png :width: 600 :align: center `См. подробное описание Date/Time на Form.io `_ :ref:`См. пример Date/Time` Text Area ~~~~~~~~~~~ .. _Text_Area: Аналог Text Field. Многострочное текстовое поле. .. image:: _static/Text_Area_Component.png :width: 400 :align: center Для вывода введенных данных многострочно необходимо добавить редактор на вкладке **Вид**: .. image:: _static/Text_Area_Component_01.png :width: 600 :align: center `См. подробное описание Text Area на Form.io `_ Checkbox ~~~~~~~~~ .. _Checkbox: Поле выбора нескольких значений из списка параметров. .. image:: _static/Checkbox_Component.png :width: 200 :align: center `См. подробное описание Checkbox на Form.io `_ Day ~~~~ .. _Day: Поле для ввода значений «День», «Месяц» и «Год» с использованием числа или выбора типа поля. `См. подробное описание Day на Form.io `_ ECOS Select ~~~~~~~~~~~~~ .. _Ecos_Select_: Поле, отвечающее за выбор из списка. Основан на стандартном formio-компоненте Select, был модифицирован. .. image:: _static/ECOS_Select_Component.png :width: 400 :align: center :ref:`См. подробное описание Ecos Select` :ref:`См. пример Ecos Select` Button ~~~~~~~~ .. _Button: Добавление кнопок для выполнения различных действий в форме. .. image:: _static/Button_Component.png :width: 600 :align: center `См. подробное описание Button на Form.io `_ :ref:`См. пример Button` Расширенные ------------ ML Text ~~~~~~~~~ .. _ML_Text: Однострочное текстовое поле. Для выбора языка предусмотрен переключатель в виде флага России /США. После выбора языка в поле вводится текст. Сохраняются оба введенных зачения. Если поле содержит постфикс ML и является объектом (содержит ключ EN/RU), то элемент отрисовывается. .. image:: _static/ML_Text_Component.png :width: 400 :align: center Поддержка ML text реализована для поля "Название поля", "Подсказка" всех компонент редактора форм, так же для поля "Контент" компонента Html Component, "Название свойства" компонента Panel Component. Table Form ~~~~~~~~~~~~~~~ Компонент позволяет отображать выбранные значения в виде таблицы. :ref:`См. подробное описание Table Form` Task Outcome ~~~~~~~~~~~~~~~ Компонент используется для добавления кнопок вердиктов задачи на форму. Компонент автоматически формирует кнопки вердиктов исходя из настроек Результатов задачи. :ref:`См. пример Task Outcome` Import Button ~~~~~~~~~~~~~~~ Компонент позволяет добавить на форму настраиваемую кнопку для загрузки файлов. :ref:`См. подробное описание Import Button` Email ~~~~~~ Компонент представляет собой строковое поле, которое выполняет специальную проверку ввода, гарантирующую, что введенные данные находятся в допустимом формате электронной почты. Действительный адрес электронной почты состоит из префикса электронной почты и домена электронной почты в приемлемых форматах. `См. подробное описание Email на Form.io `_ URL ~~~~ Компонент имеет настраиваемый параметр проверки, который, если он настроен правильно, может гарантировать, что введенное значение является допустимым URL-адресом. `См. подробное описание URL на Form.io `_ Phone Number ~~~~~~~~~~~~~ Компонент можно использовать для ввода номеров телефонов в форму. Можно задать маску ввода номера. `См. подробное описание Phone Number на Form.io `_ Address Field ~~~~~~~~~~~~~~~ Cпециальный компонент, выполняющий поиск введенных адресов. `См. подробное описание Address Field на Form.io `_ ML Textarea ~~~~~~~~~~~~ Многострочное текстовое поле для ввода на русском/анлийском языках. Для выбора языка предусмотрен переключатель в виде флага России /США. После выбора языка вводится в поле вводится текст. Сохраняются оба введенных зачения. Если поле содержит постфикс ML и является объектом (содержитключ EN/RU), то элемент отрисовывается. .. image:: _static/ML_TextArea_Component.png :width: 400 :align: center HTML Element ~~~~~~~~~~~~~ Компонент может быть добавлен в форму для отображения одного элемента HTML. `См. подробное описание HTML Element на Form.io `_ File ~~~~~ .. _File_: Компонент для загрузки файлов. .. image:: _static/File_Component.png :width: 400 :align: center `См. подробное описание File на Form.io `_ :ref:`См. подробное описание File ` Select Action ~~~~~~~~~~~~~~~ Компонент для отображения список значений в раскрывающемся списке. Пользователи могут выбрать одно из значений. `См. подробное описание Select Action на Form.io `_ Макет ------- Horizontal Line ~~~~~~~~~~~~~~~ Компонент для отображения разделителя блоков. :ref:`См. подробное описание Horizontal Line` Columns ~~~~~~~~ .. _Columns_: Компонент, отвечающий за разделение формы на столбцы. Основан на стандартном formio-компоненте Columns, был модифицирован. .. image:: _static/Columns_Component_1.png :width: 400 :align: center `См. подробное описание Columns на Form.io `_ :ref:`См. подробное описание Columns` :ref:`См. пример Columns` Panel ~~~~~~ .. _Panel: Панель, в которую можно поместить свойство. Нужна для зонирования. В неё помещаются близкие по смыслу компоненты и им присваивается заголовок. .. image:: _static/Panel_Component.png :width: 400 :align: center `См. подробное описание Panel на Form.io `_ :ref:`См. подробное описание Panel` :ref:`См. пример Panel` Table ~~~~~~ .. _Table: Компонент позволяет создать таблицу со столбцами и строками. .. image:: _static/Table_Component.png :width: 500 :align: center `См. подробное описание Table на Form.io `_ Tabs ~~~~~ Компонент твечает за вкладки на форме. Вкладка скрывается, когда на ней все компоненты скрыты, либо компонентов нет совсем. `См. подробное описание Tabs на Form.io `_ Данные -------- Скрытое поле ~~~~~~~~~~~~~~ Компонент можно добавить в форму, чтобы создать свойство ресурса, которое можно настроить в форме. Внешнего виджета для скрытых компонентов нет. Они не отображаются в визуализированных формах. `См. подробное описание Hidden на Form.io `_ Async Data ~~~~~~~~~~~ Невидимый компонент для загрузки асинхронных данных. .. image:: _static/Async_Data_Component.png :width: 400 :align: center :ref:`См. подробное описание Async Data` :ref:`См. пример Async Data` Include Form ~~~~~~~~~~~~~~ Компонент для включения одной формы в другие. В свойствах одно поле - **formRef** с выбором из журнала форм (ecos-forms). Внеший вид в билдере (как у компонента Hidden, но имя формируется по шаблону "Форма: имя_формы"). Вариант на английском: Form: form_name где **form_name** и **имя_формы** - это атрибут **"?disp"** выбраной формы. Если форма не выбрана, то пишется No form (Нет формы) При отрисовке формы не в билдере компонент рисовать не нужно (на сервере он будет автоматически заменяться на все компоненты, которые есть в выбранной форме). .. image:: _static/Include_Form_Component.png :width: 500 :align: center Контейнер ~~~~~~~~~ Оболочка для набора полей, аналогичная **Field Set**. .. image:: _static/Container_Component.png :width: 400 :align: center Компонент управления отображением данных, основанный на использовании Bootstrap Grid. Система **Bootstrap Grid** нужна для разметки страницы, в частности, для создания адаптивных макетов. Фреймворк определяет 5 уровней адаптивности (брейкпоинтов), которые основаны на ширине области просмотра: * **xs** — extra small, супермаленький — ширина < 576px (это уровень по умолчанию); * **sm** — small, маленький — ширина ≥ 576px; * **md** — medium, средний — ширина ≥ 768px; * **lg** — large, большой — ширина ≥ 992px; * **xl** — extra large, супербольшой — ширина ≥ 1200px. Сетка состоит из групп рядов и колонок, расположенных внутри одного или нескольких контейнеров. Основные правила сетки в Bootstrap: * колонки находятся строго внутри ряда на первом уровне вложенности; * ряды нужны только для размещения колонок; * ряды должны располагаться внутри контейнера. Ряды и колонки всегда работают вместе, их нельзя разделять. Элемент с классом **.container** является корневым блоком сетки в Bootstrap, то есть располагается на внешнем уровне. Контейнер подходит для хранения любых элементов, а не только рядов и колонок. Внутри ряда должны находиться только колонки, а контент – уже внутри них. Колонки нужны для разделения области просмотра по горизонтали, при этом в одном ряду могут быть столбцы разной ширины. Классическая Bootstrap-сетка состоит из 12 колонок. В большинстве случаев, не требуется использование всех, их можно объединять по мере надобности. Представьте, что вся область просмотра разделена на 12 равных частей – единиц ширины. В одной колонке может быть от 1 до 12 таких единиц. `См. подробное описание Bootstrap Grid system `_ `См. подробное описание Container на Form.io `_ Data Grid ~~~~~~~~~~ Компонент управления отображением данных, который извлекает информацию из коллекции объектов и визуализирует ее в сетке со строками и ячейками. Каждая строка соответствует отдельному объекту, а каждый столбец — свойству в этом объекте. .. image:: _static/Data_Grid_Component.png :width: 400 :align: center `См. подробное описание Data Grid на Form.io `_ Data Grid Assoc ~~~~~~~~~~~~~~~~ Компонент управления отображением данных. Data Map ~~~~~~~~~ Компонент позволяет пользователям создавать пары ключ/значение. `См. подробное описание Data Map на Form.io `_