Подключение нового фильтра bitrix:main.ui.filter для пользовательских форм.
Данный фильтр работает в связке с гридом bitrix:main.ui.filter. У меня стояла задача прикрепить для своих пользовательских форм, где нет необходимости в использовании грида.
Рассмотрим кратко, как можно использовать данный компонент.
Вначале создадим массив с полями. Детально о вариантах полей Вы можете узнать в исходнике компонента.
где укажем id поля, названием, и тип.
Если мы ищем текстовое значение то укажем тик string, если хотим вывести Дату/Период фильтрации.
Для даты доступно множество вариантов фильтрации:
В фильтре мы можем исключить ненужные варианты фильтрации по дате.
Далее в нужном месте мы просто вызываем компонент с нужными параметрами.
Форму подключили, однако просто данные фильтра мы не получим, помог такой вот костыль.
В шаблоне компонента редактируем файл script.js.
Нам нужны событие обновления и инициализации фильтра.
При изменении фильтра срабатывает метод applyFilter: function(clear, applyPreset)
где перед return вызываем метод this.getFilterFieldsValues() , который возвращает массив с полями фильтра.
Также вызываем этот метод для получения полей при инициализации фильтра, в методе init.
Для примера можем вывести список полей в консоль
результат вывода в моем варианте выглядит так:
Разумеется, вместо вывода в консоль, можно использовать ajax запрос для обновления пользовательских форм.
PS.
Данное применение фильтра выглядит как костыль, надеюсь услышать Ваши предложения.
Данный фильтр работает в связке с гридом bitrix:main.ui.filter. У меня стояла задача прикрепить для своих пользовательских форм, где нет необходимости в использовании грида.
Рассмотрим кратко, как можно использовать данный компонент.
Вначале создадим массив с полями. Детально о вариантах полей Вы можете узнать в исходнике компонента.
$arFilter["id"] = "DIVISION"; $arFilter["name"] = Loc::getMessage("TPO_FILTER_DIVISION"); $arFilter["default"] = true; $arFilter["type"] = "string"; $this->arResult["FILTER"][] = $arFilter; $arFilter["id"] = "DATE_FROM"; $arFilter["name"] = Loc::getMessage("TPO_FILTER_DATE"); $arFilter["default"] = false; $arFilter["type"] = "date"; $arFilter["exclude"] = array(); //Исключаемые типы фильтров $arFilter["exclude"][] = "CURRENT_QUARTER"; $arFilter["exclude"][] = "LAST_7_DAYS"; $arFilter["exclude"][] = "LAST_30_DAYS"; $arFilter["exclude"][] = "LAST_60_DAYS"; $arFilter["exclude"][] = "LAST_90_DAYS"; $arFilter["exclude"][] = "PREV_DAYS"; $arFilter["exclude"][] = "NEXT_DAYS"; $arFilter["exclude"][] = "QUARTER"; $arFilter["exclude"][] = "YEAR"; $arFilter["exclude"][] = "NEXT_WEEK"; $arFilter["exclude"][] = "NEXT_MONTH"; $this->arResult["FILTER"][] = $arFilter; |
где укажем id поля, названием, и тип.
Если мы ищем текстовое значение то укажем тик string, если хотим вывести Дату/Период фильтрации.
Для даты доступно множество вариантов фильтрации:
"Любая дата" :"NONE", "Вчера":"YESTERDAY" "Сегодня" :"CURRENT_DAY", "Завтра":"TOMORROW", "Текущая неделя" :"CURRENT_WEEK", "Текущий месяц":"CURRENT_MONTH", "Текущий квартал" :"CURRENT_QUARTER", "Месяц" :"MONTH", "Точная дата":"EXACT", "Прошлая неделя":"LAST_WEEK", "Прошлый месяц":"LAST_MONTH", "Диапазон":"RANGE", "Последние 7 дней" :"LAST_7_DAYS", "Последние 30 дней" :"LAST_30_DAYS", "Последние 60 дней" :"LAST_60_DAYS", "Последние 90 дней" :"LAST_90_DAYS", "Последние N дней" :"PREV_DAYS", "Следующие N дней" :"NEXT_DAYS", "Квартал" :"QUARTER", "Год" :"YEAR", "Следующая неделя" :"NEXT_WEEK", "Следующий месяц" :"NEXT_MONTH" |
В фильтре мы можем исключить ненужные варианты фильтрации по дате.
$arFilter["exclude"][] = "CURRENT_QUARTER"; $arFilter["exclude"][] = "LAST_7_DAYS"; $arFilter["exclude"][] = "LAST_30_DAYS"; |
Далее в нужном месте мы просто вызываем компонент с нужными параметрами.
<? $APPLICATION->IncludeComponent( 'bitrix:main.ui.filter', '', array( 'GRID_ID' => "tpo-event-grid", 'FILTER_ID' => "tpo-event-filter", 'FILTER' => $arResult['FILTER'], 'VALUE_REQUIRED_MODE' => true, 'ENABLE_LIVE_SEARCH' => true, 'ENABLE_LABEL' => true ), $component ); ?> |
Форму подключили, однако просто данные фильтра мы не получим, помог такой вот костыль.
В шаблоне компонента редактируем файл script.js.
Нам нужны событие обновления и инициализации фильтра.
При изменении фильтра срабатывает метод applyFilter: function(clear, applyPreset)
где перед return вызываем метод this.getFilterFieldsValues() , который возвращает массив с полями фильтра.
Также вызываем этот метод для получения полей при инициализации фильтра, в методе init.
Для примера можем вывести список полей в консоль
init: function() { BX.bind(document, 'mousedown', BX.delegate(this._onDocumentClick, this)); BX.bind(document, 'keydown', BX.delegate(this._onDocumentKeydown, this)); BX.bind(window, 'load', BX.delegate(this.onWindowLoad, this)); BX.addCustomEvent('Grid::ready', BX.delegate(this._onGridReady, this)); this.getSearch().updatePreset(this.getParam('CURRENT_PRESET')); this.clearGet(); console.log(this.getFilterFieldsValues()); }, applyFilter: function(clear, applyPreset) { var presetId = this.getPresetId(clear, applyPreset); var filterId = this.getParam('FILTER_ID'); var promise = new BX.Promise(null, this); var Preset = this.getPreset(); var Search = this.getSearch(); var applyParams = {autoResolve: !this.grid}; var self = this; this.showGridAnimation(); BX.onCustomEvent(window, 'BX.Main.Filter:beforeApply', [filterId, {}, this, promise]); this.updatePreset(presetId, null, clear, null).then(function() { Search.updatePreset(Preset.getPreset(presetId)); }).then(function() { var params = {apply_filter: 'Y', clear_nav: 'Y'}; var fulfill = BX.delegate(promise.fulfill, promise); var reject = BX.delegate(promise.reject, promise); self.grid && self.grid.reloadTable('POST', params, fulfill, reject); BX.onCustomEvent(window, 'BX.Main.Filter:apply', [filterId, {}, self, promise, applyParams]); applyParams.autoResolve && promise.fulfill(); }); console.log(this.getFilterFieldsValues()); return promise; }, |
результат вывода в моем варианте выглядит так:
Разумеется, вместо вывода в консоль, можно использовать ajax запрос для обновления пользовательских форм.
PS.
Данное применение фильтра выглядит как костыль, надеюсь услышать Ваши предложения.