Подключение нового фильтра bitrix:main.ui.filter для пользовательских форм.
Данный фильтр работает в связке с гридом 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.
Данное применение фильтра выглядит как костыль, надеюсь услышать Ваши предложения.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
