Обзор ui.entity-selector

ui.entity-selector — JavaScript-расширение Bitrix Framework для интерфейсов выбора пользователей, подразделений и объектов модуля. Элементы CRM, объекты каталога и другие типы подключаются через провайдеры соответствующих модулей или через собственный провайдер данных.

Расширение экспортирует два основных виджета:

  • Dialog — всплывающее окно выбора объектов;
  • TagSelector — поле, которое показывает выбранные объекты тегами.

JavaScript-классы создают интерфейс в браузере и обрабатывают выбор пользователя. PHP-классы Bitrix\UI\EntitySelector загружают элементы, выполняют серверный поиск, возвращают заранее выбранные элементы и работают с недавними элементами.

Выбрать статью

Задача Статья
Открыть список рядом с кнопкой или полем, настроить параметры, методы и события окна выбора Dialog
Показать выбранные элементы тегами, настроить параметры, методы и события поля с тегами TagSelector
Загрузить элементы с сервера или зарегистрировать собственный тип объекта Провайдеры данных
Выбрать пользователей, отделы, проекты, чаты или чат-ботов Стандартные провайдеры
Настроить общие структуры отображения: текстовые узлы, аватары, бейджи, футеры и заголовки Общие параметры

Подключить расширение

Если вы подключаете компонент из PHP, загрузите расширение ui.entity-selector. Метод Extension::load() добавляет на страницу JavaScript и CSS расширения.

\Bitrix\Main\UI\Extension::load('ui.entity-selector');

В модульном JavaScript импортируйте нужные классы из ui.entity-selector.

import { Dialog, TagSelector } from 'ui.entity-selector';

Если расширение нужно подключить перед созданием диалога, используйте Runtime.loadExtension. Метод загружает расширение в браузере и возвращает экспорты после загрузки.

import { Runtime } from 'main.core';
        
        Runtime.loadExtension('ui.entity-selector').then((exports) => {
            const { Dialog } = exports;
            const button = document.getElementById('responsible-button');
        
            if (!button)
            {
                return;
            }
        
            const dialog = new Dialog({
                targetNode: button,
                items: [
                    {
                        id: 1,
                        entityId: 'user',
                        title: 'Иван Петров',
                    },
                ],
            });
        
            button.addEventListener('click', () => {
                dialog.show();
            });
        });

Минимальный локальный элемент содержит три поля:

Поле Тип Назначение
id number или string Идентификатор элемента внутри типа объекта
entityId string Идентификатор типа объекта, например user или собственный тип модуля
title string Текст элемента в диалоге или теге

Основные правила

  • targetNode должен быть существующим DOM-элементом. Проверяйте результат document.getElementById() перед созданием Dialog или TagSelector.
  • entities[].id задает тип объекта для серверной загрузки и поиска. Это значение должно совпадать с entityId, для которого зарегистрирован PHP-провайдер в настройках модуля.
  • items[].entityId у локального элемента должен содержать тот же идентификатор типа объекта, что и entities[].id, если локальные и серверные элементы относятся к одному типу.
  • dynamicLoad и dynamicSearch работают только для типа объекта, у которого зарегистрирован доступный PHP-провайдер.
  • context задавайте отдельно для разных форм и действий, чтобы недавние элементы не смешивались между сценариями.
Предыдущая
Всплывающие окна и меню main.popup
Следующая
Dialog