.. _form_examples: Примеры компонент ================= .. contents:: :depth: 3 Columns -------- .. _sample_columns_component: Компонент **Columns** позволяет удобно расположить компоненты формы. .. image:: _static/form_examples/columns_1.png :width: 200 :align: center **Свойства столбца** - основной параметр настройки, позволяет определить как по колонкам будет разбиваться компонент. Компонент основан на использовании Bootstrap Grid. .. image:: _static/form_examples/columns_2.png :width: 600 :align: center На вкладке **«Вид»** в разделе **Свойства столбца** указать количество столбцов и их размер. .. image:: _static/form_examples/columns_3.png :width: 400 :align: center Далее нажать **"Сохранить"**. Результат: .. image:: _static/form_examples/columns_4.png :width: 600 :align: center Text field ------------ .. _sample_text_field_component: **Text field** - текстовый компонент. На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. Обязательность поля выставляется отдельным чекбоксом. **(3)** .. image:: _static/form_examples/Text_field_1.png :width: 600 :align: center ECOS Select Component ---------------------- .. _sample_ecos_select_component: **ECOS Select Component** - компонент формы для выбора значения из списка. На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. Обязательность поля выставляется отдельным чекбоксом. **(3)** .. image:: _static/form_examples/ECOS_Select_1.png :width: 600 :align: center На вкладке **«Данные»** в **"Типе источника данных"** выбрать **Values** **(1)**. **Data Source Values** заполняется значениями, которые должны быть для выбора в списке **(2)**: - **Название поле** - отображаемое имя, - **Значение** - значение, которое содержится. .. image:: _static/form_examples/ECOS_Select_2.png :width: 400 :align: center Date / Time Component ---------------------- .. _sample_date_time_component: **Date / Time Component** - компонент даты / времени. На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. Обязательность поля выставляется отдельным чекбоксом. **(3)** .. image:: _static/form_examples/Date_Time_1.png :width: 600 :align: center На вкладке **«Вид»** указать формат даты **(5)** и возможность ручного ввода **(4)**. .. image:: _static/form_examples/Date_Time_2.png :width: 400 :align: center Для изменения формата даты/времени перейдите во вкладку - **вкладка «Вид» - Формат**: .. image:: _static/form_examples/Date_Time_3.png :width: 600 :align: center Select Journal Component ------------------------- .. _sample_select_journal_component: **Select Journal Component** - компонент для выбора значения из журнала. На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. Обязательность поля выставляется отдельным чекбоксом. **(3)** .. image:: _static/form_examples/Select_Journal_1.png :width: 600 :align: center На вкладке **«Данные»** заполняется **ID журнала** - идентификатор журнала, который будет использовать в компоненте. (4) .. image:: _static/form_examples/Select_Journal_2.png :width: 400 :align: center Button Component --------------------- .. _sample_button_component: **Button Component** - компонент для добавления кнопок для выполнения различных действий в форме. На вкладке **«Базовые»** заполняются: - **Название поля** - наименование кнопки, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства кнопки **(2)**. - **Действия** - указать действие кнопки **(3)** .. image:: _static/form_examples/button.png :width: 600 :align: center Собранная в конструкторе форма с компонентами: .. image:: _static/form_examples/form_full.png :width: 600 :align: center Для отображения кнопки на всю ширину ячейки необходимо на вкладке **"Вид"** выставить чекбокс **"Блокировать"**: .. image:: _static/form_examples/button_1.png :width: 600 :align: center Panel ------- .. _sample_panel_component: **Panel** - компонент - заголовок, в который помещаются близкие по смыслу компоненты. .. image:: _static/form_examples/form_2.png :width: 200 :align: center Заполняется **«Имя свойства»** - имя компонента. .. image:: _static/form_examples/form_3.png :width: 600 :align: center И на вкладке **"Вид"** заполнить **"Название свойства"** **(2)**: .. image:: _static/form_examples/form_14.png :width: 600 :align: center Select Orgstruct Component ---------------------------- .. _sample_select_orgstruct_component: **Select Orgstruct Component** - компонент для выбора из оргструктуры. На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. .. image:: _static/form_examples/form_4.png :width: 600 :align: center На вкладке **«Кастомные»** - можно указать: - допустимый **«Разрешенный тип полномочий»** **(3)** - **Текущий пользователь по умолчанию** - настройка, позволяющая подставить в компонент пользователя, который открыл форму на создание **(4)**. .. image:: _static/form_examples/form_5.png :width: 400 :align: center Async Data Component ---------------------- .. _sample_async_data_component: **Async Data Component** - асинхронный компонент. .. image:: _static/form_examples/form_12_1.png :width: 600 :align: center Справочник **Грейд** (тип данных hr-grades-type) содержит в себе информацию о должности (offerposition), вилке оклада (gradesSalary) и премии (gradesPrize). При выборе **Должности** автоматически заполнятся соответствующие ей поля **Грейд** и **Зарплатная вилка и премия**: .. image:: _static/form_examples/form_6.png :width: 200 :align: center На вкладке **«Асинхронные данные»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Тип данных** - тип данных **(2)**. .. image:: _static/form_examples/form_7.png :width: 600 :align: center Пояснения к скрипту **(3)**: .. image:: _static/form_examples/form_8.png :width: 500 :align: center - **emodel/type@hr-grades-type** - тип, из которого необходимо получить данные. - **gradesSimpleRoleTypeAssoc** - сравниваемое свойство типа, из которого получаем данные. - **offerPosition** - свойство, которое используем для сравнения со свойством типа, из которого получаем данные. В **«Атрибуты»** указываются атрибуты, который необходимо получить **(4)**. На вкладке **«Расширенные настройки»** заполняется: - **Обновлять при** -параметр, в котором указывается элемент формы, которые следует отслеживать **(5)**. .. image:: _static/form_examples/form_9.png :width: 400 :align: center На вкладке **«API»** заполняется: - **Имя свойства** - имя свойства компонента **(6)**. .. image:: _static/form_examples/form_10.png :width: 400 :align: center Чтобы компонент формы реагировал на асинхронный компонент, необходимо сделать следующие настройки во вкладке **«Данные»** в компоненте **Грейд**: .. image:: _static/form_examples/form_11.png :width: 400 :align: center В **Обновлять при** указать компонент, при изменении которого будет реагировать компонент, для которого необходимо получить данные из асинхронного компонента. В **Вычисляемые значения**: .. image:: _static/form_examples/form_12.png :width: 400 :align: center Теперь при выборе **Должности** в компонент формы **«Грейд»** в зависимости от значения компонента **«Должность»**, будет автоматически выставлено значение. :ref:`Подробнее об Async Data` How to ------- Сделать компонент нередактируемым ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - **вкладка «Вид» - Скрыть поле** - делает компонент нередактируемым. .. image:: _static/form_examples/form_13.png :width: 600 :align: center Скрыть поле на форме, если оно пустое ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Полезно, например, на :ref:`канбан-доске`: .. image:: _static/form_examples/form_15.png :width: 600 :align: center Текст скрипта: .. code-block:: show = !_.isEmpty(value) Статус ~~~~~~~~~ На форме документа :ref:`статус` может быть отражен следующим образом: .. image:: _static/form_examples/form_status.png :width: 600 :align: center В компоненте :ref:`Text field `: - название поля может быть любым, - имя свойства - **_status**, - скрыть и заблокировать на ввод, если необходимо не отображать на форме. Показывать поле через "логику" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ На вкладке **«Отображение»** перейдите в **Расширенные условия отображения**: .. image:: _static/form_examples/form_mode_1.png :width: 600 :align: center .. code-block:: show = _.get(data, 'asyncDataField.boolAttribute', false); Вместо **asyncDataField** и **boolAttribute** ваши данные. Если нужно, то логику в скрипте можно расширить. Если необходима логика на несколько атрибутов, то можно использовать компонент **Панель**. И внутри нее уже разместить нужные атрибуты. Визуально панель можно настроить, чтобы её присустствие никак не отображалось. Показывать поле только в определенном режиме формы ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ На вкладке **«Отображение»** перейдите в **Расширенные условия отображения**: .. image:: _static/form_examples/form_mode.png :width: 600 :align: center .. code-block:: const {options} = instance || {}; const {formMode} = options || {}; var isCreateMode = formMode === 'CREATE'; show = !isCreateMode; где **formMode** может быть: - **CREATE** - форма создания; - **VIEW** - форма просмотра; - **EDIT** - форма редактирования