Настройка фильтрации, поиска и сортировки

Настройка фильтрации

Для настройки фильтрации необходимо в 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 мастера).