Filter
Отображает конструктор фильтров
Используется для создания фильтров на основе множества правил. Допустимые значения поля dataType свойства Columns: 'string', 'number', 'date', 'boolean', 'dictionary'. Допустимые значения поля allowedOperators свойства Columns для типа string: 'Contains', 'NotContain', 'Equals', 'NotEqual', 'BeginWith', 'EndsOn', 'Filled', 'NotFilled', 'Matches'. Допустимые значения поля allowedOperators свойства Columns для типа number: 'Equals', 'NotEqual', 'LessThan', "MoreThan", 'LessThanOrEqual', 'GreaterThanOrEqual', 'Between', 'Filled', 'NotFilled'. Допустимые значения поля allowedOperators свойства Columns для типа date: 'Between', 'LessThan', 'MoreThan', 'Filled', 'NotFilled'. Допустимые значения поля allowedOperators свойства Columns для типов boolean и dictionary: 'Equals', 'NotEqual', 'Filled', 'NotFilled'.
Свойства
Badge
Количественная информация в компонентах Menu, Accordion, Link, Text.
В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)
Тип: any
CSS
Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}
Тип: array
Columns
Поля данных для фильтрации. В качестве значения мо жет использоваться массив объектов с полями: alias, title, allowedOperators, dataType, dateFormat. Допустимые значения dateFormat перечислены в библиотеке moment.js. Если dateFormat не указан, по умолчанию используется формат ISO 8601. Допустимые значения полей dataType и allowedOperators см. в описании компонента
Тип: array
CombineConfig
Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение
Тип: object
CustomFilters
Массив настраиваемых фильтров
Тип: array
EnabledFilter
Фильтр, используемый при отображении области с компонентом Filter на странице приложения;при отсутствии заданного значения открывается вкладка компонента Accordion с п редустановленными фильтрами
Тип: object
Fields
Поля данных для фильтрации. Устаревшее свойство, используется только для совместимости с версиями Платформы до 4.0
Тип: array
Hidden
Признак состояния компонента Скрыт
Тип: boolean
Hint
Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне
Тип: any
Id
Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID
Тип: string
MaxCountOfFilters
Максимальное количество правил фильтра в группе. Значение 0 используется для отключения этого ограничения.
Тип: number
MaxLevelOfGroup
Максимальный уровень вложенности правил фильтра
Тип: number
Значение по умолчанию: 3
Model
Псевдоним свойств EnabledFilter и OutputEnabledFilter
Тип: array
OnChangeCustomFilters
Обработчик события об изменении customFilters, возвращающий объект со списком всех настраиваемых фильтров и последним измененным: { filters: IFilterItem[], lastFilter: IFilterItem}
Тип: any
OnClick
Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.
В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:
OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnFilterSet
Обработчик события применения фильтров, возвращающий объект со списком всех фильтров
Тип: any
OnKeyDown
Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnKeyUp
Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseDown
Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseEnter
Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseLeave
Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseMove
Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseOut
Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseOver
Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnMouseUp
Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }
Тип: undefined
OnUnmount
Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:
OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }
Тип: undefined
OptionalOpen
Признак открытия фильтра
Тип: boolean
OutputCustomFilters
Привязка свойства customFilters отрисованного компонента к модели
Тип: any
OutputEnabledFilter
Привязка отрисованного включенного фильтра к модели (выходное значение)
Тип: any
OutputPresetFilters
Привязка свойства presetFilters отрисованного компонента к модели
Тип: any
PresetFilters
Предустановленные фильтры, которые не доступны пользователю для редактирования
Тип: array
ShowButton
Признак отображения кнопки открытия диалога настройки фильтра
Тип: boolean
Значение по умолчанию: True
Slot
Именованное пространство во фрагменте экранной формы.
Тип: string
Title
Заголовок диалога настройки фильтра
Тип: string
Значение по умолчанию: Filter title
Tooltip
Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне
Тип: any
TraceId
Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компоне нта
Тип: string
Visible
Признак инверсии состояния компонента Скрыт
Тип: boolean
Значение по умолчанию: True
Примеры
JSX:
<Group Mode={"Column"} >
<Group VerticalAlign="Center" Height="60px">
<Filter
MaxLevelOfGroup={7}
Columns={[
{alias: 'ProductName', title: 'Название продукта', allowedOperators : ['Contains'], dataType: 'string'},
{alias: 'ProductCompany', title: 'Компания', dataType: 'dictionary'},
{alias: 'Discounted', title: 'Со скидкой', dataType: 'boolean'},
{alias: 'UnitPrice', title: 'Цена', dataType: 'number'},
{alias: 'Date', title: 'Дата', dataType: 'date'},
]}
CustomFilters={(customFilters) => customFilters}
PresetFilters={[{
name: 'First system filter (example of system filter)',
id: '1',
enabled: false,
filterType: 'System',
filter: {
"logic": "And",
"name": "parent",
"filters": [
{
"logic": "And",
"fieldAlias": "Date",
"operator": "Equals",
"value": "2023-08-30T20:00:00.000Z",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"name": "Группа 1",
"filters": [
{
"logic": "And",
"fieldAlias": "ProductCompany",
"operator": "Equals",
"value": "FriendsCo",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"fieldAlias": "ProductCompany",
"operator": "Equals",
"value": "MyCompany",
"valid": true,
"valueEnd": ""
},
{
"logic": "And",
"name": "Группа 1.1",
"filters": [
{
"logic": "Or",
"fieldAlias": "UnitPrice",
"operator": "Equals",
"value": "5",
"valid": true,
"valueEnd": ""
},
{
"logic": "Or",
"fieldAlias": "UnitPrice",
"operator": "Equals",
"value": "10",
"valid": true,
"valueEnd": ""
}
],
"valid": true
},
{
"logic": "And",
"name": "Группа 1.2",
"filters": [
{
"logic": "Or",
"fieldAlias": "ProductName",
"operator": "Contains",
"value": "organic11",
"valid": true
},
{
"logic": "Or",
"fieldAlias": "ProductName",
"operator": "Contains",
"value": "cranberry22",
"valid": true
}
],
"valid": true
}
],
"valid": true
},
{
"logic": "And",
"fieldAlias": "Discounted",
"operator": "Equals",
"value": true,
"valueEnd": "",
"valid": true
}
]
}}]}
OutputCustomFilters-var="customFilters"
OnChangeCustomFilters={() => {
console.log(getEvent());
}}
Model-var="enabledFilter"
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="С предустановленными фильтрами" />
</Group>
<Group VerticalAlign="Center" Height="60px">
<Filter
Columns={[
{alias: 'ProductName', title: 'Название продукта', dataType: 'string'}
]}
/>
<Text CSS={['pl-8']} Mode="Regular_14" Value="Без предустановленных фильтров" />
</Group>
</Group>