Entity selector dialog

Start

JavaScript extensionui.entity-selector provides 2 widgets:

• Entity selector dialog;


• TagSelector widget.

These widgets can be used both jointly and separately;

• Standard (dropdown) dialog window without search;


• Dialog window with search (with TagSelector);


• TagSelector widget with dialog window.

Code

The following "lazy" loading is recommended when handling handling widgets ui.entity-selector.

Dynamic (lazy) loading in JavaScript

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

Import in ES6

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

Use in ES5

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

Connecting at PHP page

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

Examples

Selecting "To" in Feed

const tagSelector = new TagSelector({
    dialogOptions: {
        context: 'MY_MODULE_CONTEXT',
        entities: [
            {
                id: 'user', // users
            },
            {
                id: 'project', // groups and projects
            },
            {
                id: 'department', // company structure
                options: {
                    selectMode: 'usersAndDepartments' // user and department selection
                }
            },
            {
                id: 'meta-user',
                options: {
                    'all-users': true // All employees
                }
            },
        ],
    }
});

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

User selector dialog window

const button = document.getElementById('responsible-button');
const dialog = new Dialog({
    targetNode: button,
    enableSearch: true,
    context: 'MY_MODULE_CONTEXT',
    entities: [
        {
            id: 'user', // users
        },
        {
            id: 'department', // company structure: selector for only users
        },
    ],
});
    
button.addEventListener('click', function() {
    dialog.show();
});

Selection of social network groups

const tagSelector = new TagSelector({
    dialogOptions: {
        context: 'MY_MODULE_CONTEXT',
        entities: [
            {
                id: 'project', // workgroups and projects
            },
        ],
    }
});

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

Extranet groups selector dialog, with "Tasks" enabled

const button = document.getElementById('select-project');
const dialog = new Dialog({
    targetNode: button,
    enableSearch: true,
    context: 'MY_MODULE_CONTEXT',
    entities: [
        {
            id: 'project',
            options: {
                extranet: true, // extranet only
                features: {
                    tasks: ['view'] // workgroup access permissions
                }
            }
        },
    ],
});

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

Department selection

const tagSelector = new TagSelector({
    dialogOptions: {
        context: 'MY_MODULE_CONTEXT',
        entities: [
            {
                id: 'department',
                options: {
                    selectMode: 'departmentsOnly', // select departments only
                }
            },
        ],
    }
});

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