Template for component with selection condition settings

Example for component template with selection condition settings.

Please be advised, the template connects the library landing.uifilterconverter.

template.php

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

\Bitrix\Main\UI\Extension::load('landing.uifilterconverter');
   // filter
   $APPLICATION->includeComponent(
       'bitrix:main.ui.filter',
       '',
       $arResult['FILTER'], // all parameters for main.ui.filter must be prepared in the component
       $component,
       ['HIDE_ICONS' => true]
    );
    // show selected elements for the source
    $APPLICATION->IncludeComponent(
       'bitrix:main.ui.grid',
       '',
       $arResult['GRID'], // all parameters for main.ui.grid must be prepared in the component
       $component,
       ['HIDE_ICONS' => true]
    );

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

    $filterSettings = [
       'defaultFilter' => [], // default filter. Necessary, if administrator clicks Save, without configuring anything
    ];
    ?>
    <script type="text/javascript">
       BX.ready(function() {
          MySelector.create(
             '<?=\CUtil::jsEscape($arResult['FILTER']['FILTER_ID']); ?>', // 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();
             // when clicking at Apply in the filter, update the data
             BX.addCustomEvent('BX.Main.Filter:apply', BX.proxy(this.applyFilter, this));
            // Handler for the Save slider button
             BX.addCustomEvent(BX.UI.ButtonPanel, 'button-click', function(button) {
                var currentSlider;

                if (BX.type.isNotEmptyObject(button))
                {
                   if (button.TYPE === 'save') // if you clicked at Save inside the slider, you must pass the results
                   {
                      // the passed data itself
                      top.BX.SidePanel.Instance.postMessageTop(window, 'save', {
                         filter: this.filter
                      });
                      // closing the slider - it must be done independently
                      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();
          }
       };
    })();