Диалог выбора сущностей

Начало работы

JavaScript-расширение ui.entity-selector предоставляет 2 виджета:

Диалог выбора сущностей :

Виджет TagSelector :

Эти виджеты могут использоваться как по отдельности, так и совместно:

Простой диалог (dropdown) без поиска:

Диалог с поиском (с TagSelector):

Виджет TagSelector c диалогом:

Подключение в коде

При работе с виджетами рекомендуется "ленивая" загрузка ui.entity-selector.

Динамическая (ленивая) загрузка в JavaScript

Runtime.loadExtension('ui.entity-selector').then(exports => {
	const { Dialog, TagSelector } = exports;
});

Импорт в ES6

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

Использование в ES5

var selector = new BX.UI.EntitySelector.TagSelector(options);
var dialog = new BX.UI.EntitySelector.Dialog(options);

Подключение на PHP-странице

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

Примеры использования

Выбор "Кому" в Живой Ленте

const tagSelector = new TagSelector({
	dialogOptions: {
		context: 'MY_MODULE_CONTEXT',
		entities: [
 			{
				id: 'user', // пользователи
 			},
 			{
				id: 'project', // группы и проекты
 			},
 			{
				id: 'department', // структура компании
				options: {
					selectMode: 'usersAndDepartments' // выбор пользователей и отделов
				}
 			},
 			{
				id: 'meta-user',
				options: {
					'all-users': true // Все сотрудники
				}
 			},
		],
	}
});

tagSelector.renderTo(document.getElementById('container'));

Диалог выбор пользователя

const button = document.getElementById('responsible-button');
const dialog = new Dialog({
	targetNode: button,
	enableSearch: true,
	context: 'MY_MODULE_CONTEXT',
	entities: [
		{
			id: 'user', // пользователи
		},
		{
			id: 'department', // структура компании: выбор только пользователей
		},
	],
});
    
button.addEventListener('click', function() {
	dialog.show();
});

Выбор группы соц. сети

const tagSelector = new TagSelector({
	dialogOptions: {
		context: 'MY_MODULE_CONTEXT',
		entities: [
			{
				id: 'project', // группы и проекты
			},
		],
	}
});

tagSelector.renderTo(document.getElementById('container'));

Диалог выбора экстранет-групп, где есть сервис "Задачи"

const button = document.getElementById('select-project');
const dialog = new Dialog({
	targetNode: button,
	enableSearch: true,
	context: 'MY_MODULE_CONTEXT',
	entities: [
		{
			id: 'project',
			options: {
				extranet: true, // только экстранет
				features: {
					tasks: ['view'] // права доступа к группе
				 }
			}
		},
	],
});

button.addEventListener('click', function() {
	dialog.show();
});

Выбор отделов

const tagSelector = new TagSelector({
	dialogOptions: {
		context: 'MY_MODULE_CONTEXT',
		entities: [
			{
				id: 'department',
				options: {
					selectMode: 'departmentsOnly', // только выбор отделов
				}
			},
		],
	 }
});

tagSelector.renderTo(document.getElementById('container'));

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

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

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

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

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Кирилл Бажинов 05.09.2024 10:15:04

Сообщение не промодерировано, возможны ошибки и неточности.

Добавить в список стандартные сущности CRM:

Код

entities: [
   {
      id: 'deal', // Сделки
      dynamicLoad: true,
      dynamicSearch: true,
   },
   {
      id: 'lead', // Лиды
      dynamicLoad: true,
      dynamicSearch: true,
   },
   {
      id: 'company', // Компании
      dynamicLoad: true,
      dynamicSearch: true,
   },
   {
      id: 'contact', // Контакты
      dynamicLoad: true,
      dynamicSearch: true,
   },
],

Sergei Terekhin 09.08.2024 12:30:10

Сообщение не промодерировано, возможны ошибки и неточности.

Все возможные entities из модуля CRM.

Код

[
                    'entityId' => 'company',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\CompanyProvider'
                    ],
                ],
                [
                    'entityId' => 'contact',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\ContactProvider'
                    ],
                ],
                [
                    'entityId' => 'deal',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\DealProvider'
                    ],
                ],
                [
                    'entityId' => 'lead',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\LeadProvider'
                    ],
                ],
                [
                    'entityId' => 'quote',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\QuoteProvider'
                    ],
                ],
                [
                    'entityId' => 'order',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\OrderProvider'
                    ],
                ],
                [
                    'entityId' => 'dynamic',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\DynamicProvider'
                    ],
                ],
                [
                    'entityId' => 'dynamic_multiple',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => 'Bitrix\Crm\Integration\UI\EntitySelector\DynamicMultipleProvider',
                    ],
                ],
                [
                    'entityId' => 'smart_invoice',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\SmartInvoice'
                    ],
                ],
                [
                    'entityId' => 'smart_document',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => '\\Bitrix\\Crm\\Integration\\UI\\EntitySelector\\SmartDocument'
                    ],
                ],
                [
                    'entityId' => 'country',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => 'Bitrix\Crm\Integration\UI\EntitySelector\CountryProvider',
                    ],
                ],
                [
                    'entityId' => 'timeline_ping',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => 'Bitrix\Crm\Integration\UI\EntitySelector\TimelinePingProvider',
                    ],
                ],
                [
                    'entityId' => 'placeholder',
                    'provider' => [
                        'moduleId' => 'crm',
                        'className' => 'Bitrix\Crm\Integration\UI\EntitySelector\PlaceholderProvider',
                    ],
                ],

Располагается в папке модуля crm в файле .settings.php

Чтобы узнать принимающие options, то следует смотреть провайдеры из "className"

13 Александр Груздев 05.07.2023 12:33:13 Сообщение не промодерировано, возможны ошибки и неточности.
Не нашел списка возможных entities для настройки диалога. В ядре встретил id: iblock-element iblock-element-xml project product landing project-tag sprint-selector epic-selector scrum-user task-tag editor-right-item brand country template-tag для всех нужен разный набор options Но нет ничего про crm и ее сущьности, из за чего в шаблоне пришлось подключать компонент bitrix:main.user.selector Хорошо бы документацию по всем возможным entities для диалога )

Наверх