Шаблон компонента настройки условий отбора

Пример шаблона компонента настройки условий выбора.

Обратите внимание, в шаблоне подключается библиотека landing.uifilterconverter.

template.php

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

\Bitrix\Main\UI\Extension::load('landing.uifilterconverter');
	// фильтр
	$APPLICATION->includeComponent(
		'bitrix:main.ui.filter',
		'',
		$arResult['FILTER'], // все параметры для main.ui.filter должны быть подготовлены в компоненте
		$component,
		['HIDE_ICONS' => true]
	);
	// показ отобранных элементов источника
	$APPLICATION->IncludeComponent(
		'bitrix:main.ui.grid',
		'',
		$arResult['GRID'], // все параметры для main.ui.grid должны быть подготовлены в компоненте
		$component,
		['HIDE_ICONS' => true]
	);

	$APPLICATION->IncludeComponent(
		'bitrix:ui.button.panel',
		'',
		[
			'BUTTONS' => [
			['TYPE' => 'save'],
			['TYPE' => 'cancel']
			],
			'ALIGN' => 'center'
		],
		$component,
		['HIDE_ICONS' => true]
		);

		$filterSettings = [
			'defaultFilter' => [], // фильтр по умолчанию. необходим, если администратор нажмет Сохранить, ничего не настраивая
		];
		?>
	<script type="text/javascript">
		BX.ready(function() {
		MySelector.create(
			'<?=\CUtil::jsEscape($arResult['FILTER']['FILTER_ID']); ?>', // ИД_фильтра
		<?=\CUtil::PhpToJSObject($filterSettings, false, true, false); ?>
		);
	});
	</script>

script.js

(function(){
	var BX = window.BX;
	if (MySelector)
	{
		return;
	}
	MySelector = function() {
		this.id = '';
		this.filter = [];
	};
	MySelector.create = function(id, settings)
	{
		var self = new MySelector();
		self.initialize(id, settings);
		return self;
	};
	MySelector.prototype = {
		initialize: function (id, settings)
			{
				this.id = id;
				this.settings = {
					defaultFilter: []
				};
				this.converterSettings = {};
				if (BX.type.isPlainObject(settings))
				{
					if (BX.type.isArray(settings.defaultFilter))
					this.settings.defaultFilter = settings.defaultFilter;
				}
				this.converter = new BX.Landing.UiFilterConverter({
					filterId: this.id
				});
				this.loadFilter();
				// при нажатии на Применить в фильтре обновляем данные
				BX.addCustomEvent('BX.Main.Filter:apply', BX.proxy(this.applyFilter, this));
				// Обработчик кнопки слайдера Сохранить
				BX.addCustomEvent(BX.UI.ButtonPanel, 'button-click', function(button) {
					var currentSlider;
					if (BX.type.isNotEmptyObject(button))
					{
						if (button.TYPE === 'save') // если нажали на Сохранить в слайдере, надо передать результаты
						{
							// собственно, передача
							top.BX.SidePanel.Instance.postMessageTop(window, 'save', {
								filter: this.filter
							});
							// закрытие слайдера - его необходимо делать самостоятельно
							currentSlider = top.BX.SidePanel.Instance.getSliderByWindow(window);
							if(currentSlider)
							{
								currentSlider.close(true);
								top.BX.SidePanel.Instance.destroy(currentSlider.getUrl());
							}
							currentSlider = null;
						}
					}
				}.bind(this));
			},
		loadFilter: function()
		{
			this.filter = this.converter.getFilter();
			if (this.filter.length === 0)
				this.filter = this.settings.defaultFilter;
		},
		applyFilter: function(eventFilterId, values, ob, filterPromise, filterParams)
		{
			if (eventFilterId !== this.id)
			{
				return;
			}
			this.loadFilter();
		}
	};
})();