Документация для разработчиков
Темная тема

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

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

Обратите внимание, в шаблоне подключается библиотека 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();
          }
       };
    })();


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2021, «1С-Битрикс», 2021
Наверх