Настройка фильтрации, поиска и сортировки
Настройка фильтрации
Для настройки фильтрации необходимо в contentConfig
настроить поле filterConfig, в которое можно передать набор полей, описанных в таблице ниже.
Название | Тип | Описание |
---|---|---|
filterTemplateName | string | Путь до модуля/шаблона, который отображает окно с фильтрами. Требуется указывать платформенный компонент фильтров Controls-widgets/filter:View. В исключительных случаях допускается, но не рекомендуется располагать свой компонент. |
filterTemplateOptions | object | Опции, которые будут переданы в компонент, указанный в filterTemplateName. Для корректной работы фильтров нужно указать опцию storeId. |
filterPosition | 'left' | 'right' | 'right-top' | Настройка расположения кнопки фильтров на странице. По умолчанию кнопка фильтра находится в правой части шапки страницы. При отсутствии на странице вкладок кнопка фильтров будет отображаться на месте вкладок. |
Пример:
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"filterTemplateName": "Demo/page:filterTemplate",
"filterTemplateOptions": {"alignment": "left"},
"filterPosition": "left"
}
}
</contentConfig>
</item>
</page>
Подробнее про примеры работы с фильтрацией читайте в статье.
Связь фильтра и списка
Связь фильтра и списка осуществляется с помощью уникальных строковых идентификаторов, которые задаются в опции storeId. Значения опции для контролов, которые необходимо связать, должны совпадать.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"filterTemplateName": "Controls-widgets/filter:View"
"filterTemplateOptions": {"storeId": "mylist"}
"filterPosition": "left"
}
}
</contentConfig>
</item>
</page>
<Controls.list:View
storeId="mylist"/>
Подробнее о связи фильтра со списком читайте в статье.
[Deprecated] Связь фильтра и списка при помощи контроллера
Данный способ является устаревшим. Рекомендуется связывать фильтр со списком при помощи опции storeId.
Связь фильтра со списком может осуществляться через специальный контроллер - экземпляр класса Controls/filter:ControllerClass, который создается на уровне страницы и будет доступен в поле filterController в результатах предзагрузки данных.
Такой способ подходит только для контролов, принадлежащих библиотекам Controls-widgets/filter и Controls-widgets/filterPanel.
В опцию filterTemplateName передайте путь до шаблона, который отображает окно с фильтрами. При необходимости кастомизации фильтра можно использовать свой шаблон, содержащий внутри себя Controls-widgets/filter.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"filterTemplateName": "Controls-widgets/filter:View",
"filterTemplateOptions": {"alignment": "left"},
"filterPosition": "left"
}
}
</contentConfig>
</item>
</page>
В Controls/browser:Browser, который располагается в пределах рабочей области, передайте опции filterController и sourceController, которые доступны в результатах предзагрузки данных.
<Controls.browser:Browser
useStore="{{true}}"
source="{{_viewSource}}"
filterController="{{_options.prefetchResult[0].filterController}}"
sourceController="{{_options.prefetchResult[0].sourceController}}" />
Подробнее про связь фильтрации со списком читайте здесь.
[Deprecated] Связь фильтра и списка при помощи Store
Данный способ является устаревшим. Рекомендуется связывать фильтр со списком при помощи опции storeId.
Связь фильтра со списком может осуществляться через Store - синглтон, в который можно поместить данные, необходимые для использования контролов, не имеющих общего родителя. Подробнее читайте в статье "Работа со Store".
Если в поле filterTemplateName передано имя контрола фильтрации, опцию useStore задавать не нужно.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"filterTemplateName": "Controls/filter:View",
"filterPosition": "left"
}
}
</contentConfig>
</item>
</page>
Если в поле filterTemplateName передан путь до шаблона, который отображает окно с фильтрами, для работы фильтрации установите опцию useStore со значением true в конфигурации контрола Controls/filter:View.
...
<contentConfig>
{
"filterConfig": {
"filterTemplateName": "Demo/page:filterTemplate",
...
}
}
</contentConfig>
<!-- Demo/page:filterTemplate -->
<Controls.filter:View
source="{{_options.viewSource}}"
useStore="{{true}}"
... />
Если в пределах рабочей области располагается Controls/browser:Browser или Layout/browsers:Browser, дополнительно установите значение для опции filterButtonSource, которая доступна в результатах предзагрузки в поле prefetchResult. Подробнее читайте в статье "Настройка предзагрузки данных".
<Controls.browser:Browser
useStore="{{true}}"
source="{{_viewSource}}"
filterButtonSource="{{_options.prefetchResult[0].filterButtonSource}}" />
Настройка поиска
Для настройки поиска необходимо в contentConfig
настроить поле filterConfig, в которое можно передать набор полей, описанных в таблице ниже.
Название | Тип | Описание |
---|---|---|
searchTemplateName | string | Путь до модуля/шаблона, который отображает строку поиска. |
searchTemplateOptions | object | Опции, которые будут переданы в модуль строки поиска. См. searchTemplateName. |
searchPosition | 'left' | 'right' | Настройка расположения строки поиска на странице. По умолчанию строка поиска находится в правой части шапки страницы. При задании значения `left` строка поиска будет выровнена по левому краю контентной области. |
searchWidth | number | string | Ширина строки поиска. Можно указать либо значение в пикселях, либо 'max' - в этом случае на строке поиска будет установлен width: 100%. |
autofocusSearch | boolean | Если указать 'true', то при построении страницы или SPA-переходе фокус будет установлен в поле поиска. Значение по умолчанию false. |
minSearchLength | number | Минимальная длина значения для начала поиска. Опция будет задана на Controls/search:InputContainer. |
Связь строки поиска со списком
Связь строки поиска и списка осуществляется с помощью уникальных строковых идентификаторов, которые задаются в опции storeId. Значения опции для контролов, которые необходимо связать, должны совпадать.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"searchTemplateName": "Controls/search:Input"
"searchTemplateOptions": {"storeId": "mylist"}
"autofocusSearch": true,
"searchWidth": 300
}
}
</contentConfig>
</item>
</page>
<Controls.search:Input
storeId="mylist"/>
Подробнее о связи строки поиска со списком читайте в статье.
[Deprecated] Связь строки поиска со списком при помощи Store
Данный способ является устаревшим. Рекомендуется связывать строку поиска со списком при помощи опции storeId.
В шаблон страницы уже встроен базовый контейнер для строки поиска - Controls/search:InputContainer. Связь между поиском и списком выполняется через Store.
Если в поле searchTemplateName передано имя контрола поиска, опцию useStore задавать не нужно.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"searchTemplateName": "Controls.search:Input",
"autofocusSearch": true,
"searchWidth": 300
}
}
</contentConfig>
</item>
</page>
Если в поле searchTemplateName передан путь до шаблона, то для работы поиска установите опцию useStore со значением true в конфигурации контрола Controls/search:Input.
<page>
<item id="demo-page" title="Демо страница">
<contentConfig>
{
"filterConfig": {
"searchTemplateName": "Demo/page:searchTemplate",
"autofocusSearch": true,
"searchWidth": 300
}
}
</contentConfig>
</item>
</page>
<!-- Demo/page:searchTemplate -->
<Controls.search:Input
value="{{ _options.value }}"
placeholder="{[Найти...]}"
useStore="{{true}}"/>
Подробнее про связь строки поиска со списком читайте здесь.
Для синхронизации значения поиска между страницами необходимо для них настроить предзагрузку данных. В настройках предзагрузки данных необходимо указать поля searchScope и searchParamName.
Также, обратите внимание на примеры работы с поиском.
Для корректного выравнивания поиска при использовании прикладного Controls/masterDetail:Base и searchPosition со значением left
установите поле masterOptions
внутри workspaceConfig. В masterOptions
укажите опции minWidth (минимальная ширина мастера), maxWidth (максимальная ширина мастера) и masterWidthProperty (уникальный идентификатор, который указан в опции propStorageId мастера).
