Примеры компонент
Columns
Компонент Columns позволяет удобно расположить компоненты формы.
Свойства столбца - основной параметр настройки, позволяет определить как по колонкам будет разбиваться компонент. Компонент основан на использовании Bootstrap Grid.
На вкладке «Вид» в разделе Свойства столбца указать количество столбцов и их размер.
Далее нажать «Сохранить». Результат:
Text field
Text field - текстовый компонент.
На вкладке «Базовые» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Имя свойства - имя свойства в типе данных (2).
Обязательность поля выставляется отдельным чекбоксом. (3)
ECOS Select Component
ECOS Select Component - компонент формы для выбора значения из списка.
На вкладке «Базовые» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Имя свойства - имя свойства в типе данных (2).
Обязательность поля выставляется отдельным чекбоксом. (3)
На вкладке «Данные» в «Типе источника данных» выбрать Values (1).
Data Source Values заполняется значениями, которые должны быть для выбора в списке (2):
Название поле - отображаемое имя,
Значение - значение, которое содержится.
Date / Time Component
Date / Time Component - компонент даты / времени.
На вкладке «Базовые» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Имя свойства - имя свойства в типе данных (2).
Обязательность поля выставляется отдельным чекбоксом. (3)
На вкладке «Вид» указать формат даты (5) и возможность ручного ввода (4).
Для изменения формата даты/времени перейдите во вкладку - вкладка «Вид» - Формат:
Select Journal Component
Select Journal Component - компонент для выбора значения из журнала.
На вкладке «Базовые» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Имя свойства - имя свойства в типе данных (2).
Обязательность поля выставляется отдельным чекбоксом. (3)
На вкладке «Данные» заполняется ID журнала - идентификатор журнала, который будет использовать в компоненте. (4)
Button Component
На вкладке «Базовые» заполняются:
Название поля - наименование кнопки, как оно будет отражаться на форме (1).
Имя свойства - имя свойства кнопки (2).
Действия - указать действие кнопки (3)
Собранная в конструкторе форма с компонентами:
Для отображения кнопки на всю ширину ячейки необходимо на вкладке «Вид» выставить чекбокс «Блокировать»:
Panel
Panel - компонент - заголовок, в который помещаются близкие по смыслу компоненты.
Заполняется «Имя свойства» - имя компонента.
И на вкладке «Вид» заполнить «Название свойства» (2):
Select Orgstruct Component
Select Orgstruct Component - компонент для выбора из оргструктуры.
На вкладке «Базовые» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Имя свойства - имя свойства в типе данных (2).
На вкладке «Кастомные» - можно указать:
допустимый «Разрешенный тип полномочий» (3)
Текущий пользователь по умолчанию - настройка, позволяющая подставить в компонент пользователя, который открыл форму на создание (4).
Async Data Component
Async Data Component - асинхронный компонент.
Справочник Грейд (тип данных hr-grades-type) содержит в себе информацию о должности (offerposition), вилке оклада (gradesSalary) и премии (gradesPrize).
При выборе Должности автоматически заполнятся соответствующие ей поля Грейд и Зарплатная вилка и премия:
На вкладке «Асинхронные данные» заполняется:
Название поля - имя компонента, как оно будет отражаться на форме (1).
Тип данных - тип данных (2).
Пояснения к скрипту (3):
emodel/type@hr-grades-type - тип, из которого необходимо получить данные.
gradesSimpleRoleTypeAssoc - сравниваемое свойство типа, из которого получаем данные.
offerPosition - свойство, которое используем для сравнения со свойством типа, из которого получаем данные.
В «Атрибуты» указываются атрибуты, который необходимо получить (4).
На вкладке «Расширенные настройки» заполняется:
Обновлять при -параметр, в котором указывается элемент формы, которые следует отслеживать (5).
На вкладке «API» заполняется:
Имя свойства - имя свойства компонента (6).
Чтобы компонент формы реагировал на асинхронный компонент, необходимо сделать следующие настройки во вкладке «Данные» в компоненте Грейд:
В Обновлять при указать компонент, при изменении которого будет реагировать компонент, для которого необходимо получить данные из асинхронного компонента.
В Вычисляемые значения:
Теперь при выборе Должности в компонент формы «Грейд» в зависимости от значения компонента «Должность», будет автоматически выставлено значение.
How to
Сделать компонент нередактируемым
вкладка «Вид» - Скрыть поле - делает компонент нередактируемым.
Скрыть поле на форме, если оно пустое
Полезно, например, на канбан-доске:
Текст скрипта:
show = !_.isEmpty(value)
Статус
На форме документа статус может быть отражен следующим образом:
В компоненте Text field:
название поля может быть любым,
имя свойства - _status,
скрыть и заблокировать на ввод, если необходимо не отображать на форме.
Показывать поле через «логику»
На вкладке «Отображение» перейдите в Расширенные условия отображения:
show = _.get(data, 'asyncDataField.boolAttribute', false);
Вместо asyncDataField и boolAttribute ваши данные. Если нужно, то логику в скрипте можно расширить.
Если необходима логика на несколько атрибутов, то можно использовать компонент Панель. И внутри нее уже разместить нужные атрибуты. Визуально панель можно настроить, чтобы её присустствие никак не отображалось.
Показывать поле только в определенном режиме формы
На вкладке «Отображение» перейдите в Расширенные условия отображения:
const {options} = instance || {};
const {formMode} = options || {};
var isCreateMode = formMode === 'CREATE';
show = !isCreateMode;
где formMode может быть:
CREATE - форма создания;
VIEW - форма просмотра;
EDIT - форма редактирования