.. _form_examples: Примеры компонент ================= .. _sample_columns_component: Columns -------- Компонент **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 .. _sample_text_field_component: Text field ------------ **Text field** - текстовый компонент. Будем использовать, например, для полей «Код», «Имя», «Фамилия», «Отчество». На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(1)**. - **Имя свойства** - имя свойства в типе данных **(2)**. Обязательность поля выставляется отдельным чекбоксом. **(3)** .. image:: _static/form_examples/Text_field_1.png :width: 600 :align: center .. _sample_ecos_select_component: 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 .. _sample_date_time_component: 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 .. _sample_select_journal_component: 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 .. _sample_button_component: 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 .. _sample_panel_component: Panel ------- **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 .. _sample_select_orgstruct_component: Select Orgstruct Component ---------------------------- **Select Orgstruct Component** - компонент для выбора из оргструктуры. Будем использовать, например, для поля **"Инициатор"** («idocs:initiator»). На вкладке **«Базовые»** заполняется: - **Название поля** - имя компонента, как оно будет отражаться на форме **(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 .. _sample_async_data_component: Async Data Component ---------------------- **Async Data Component** - асинхронный компонент. Будем использовать, например, для поля **"Инициатор"**. .. 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»** заполняется: - **Имя свойства** - имя свойства компонента. .. 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 Теперь при выборе должности в компонент формы **«Грейд»** в зависимости от значения компонента **«Должность»**, будет автоматически выставлено значение. 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**, - скрыть и заблокировать на ввод, если необходимо не отображать на форме.