Dialog в ui.entity-selector

Dialog создает всплывающее окно со списком элементов. Элементы можно передать сразу в items или загрузить с сервера через типы объектов из entities.

Диалог подходит для кнопок «Выбрать», полей поиска и действий в формах, где пользователь должен выбрать один или несколько объектов.

В диалоге можно включить поиск, создать элемент из поисковой строки, показать недавние элементы и добавить футер со ссылками или собственной разметкой.

В примерах ниже предполагается, что класс Dialog импортирован из ui.entity-selector, а targetNode — существующий DOM-элемент. Полный пример подключения расширения есть в обзоре раздела.

Создать диалог с локальными элементамиСоздать диалог с локальными элементами

Используйте локальные элементы, когда список небольшой и уже известен на странице.

import { Dialog } from 'ui.entity-selector';
        
        const button = document.getElementById('responsible-button');
        
        if (button)
        {
            const dialog = new Dialog({
                id: 'responsible-dialog',
                targetNode: button,
                context: 'MY_MODULE_RESPONSIBLE',
                multiple: false,
                enableSearch: true,
                dropdownMode: true,
                tabs: [
                    {
                        id: 'users',
                        title: 'Сотрудники',
                    },
                ],
                items: [
                    {
                        id: 1,
                        entityId: 'user',
                        title: 'Иван Петров',
                        subtitle: 'Руководитель проекта',
                        tabs: 'users',
                    },
                    {
                        id: 2,
                        entityId: 'user',
                        title: 'Мария Иванова',
                        subtitle: 'Аналитик',
                        tabs: 'users',
                    },
                ],
                events: {
                    'Item:onSelect': (event) => {
                        const { item } = event.getData();
        
                        console.log(item.getEntityId(), item.getId());
                    },
                },
            });
        
            button.addEventListener('click', () => {
                dialog.show();
            });
        }
        

После клика по кнопке откроется диалог с вкладкой «Сотрудники». При выборе элемента обработчик получит тип объекта через item.getEntityId() и идентификатор через item.getId().

Связанные методы: Dialog.show(), Dialog.getSelectedItems(), Item.getEntityId(), Item.getId().

Добавить элементыДобавить элементы

Каждый элемент идентифицируется парой entityId и id.

• entityId — строковый идентификатор типа объекта: например, user, department, project или собственный тип объекта модуля.
• id — числовой или строковый идентификатор элемента внутри этого типа.

Один диалог может показывать элементы разных типов объектов. Например, элемент с entityId: 'user' и id: 1 не конфликтует с элементом entityId: 'project' и id: 1.

const dialog = new Dialog({
            targetNode: button,
            tabs: [
                {
                    id: 'main',
                    title: 'Элементы',
                },
            ],
            items: [
                {
                    id: 1,
                    entityId: 'project',
                    title: 'Проект внедрения',
                    tabs: 'main',
                },
                {
                    id: 1,
                    entityId: 'user',
                    title: 'Иван Петров',
                    tabs: 'main',
                },
                {
                    id: 'USD',
                    entityId: 'currency',
                    title: 'Доллар США',
                    tabs: 'main',
                },
            ],
            showAvatars: false,
            dropdownMode: true,
        });
        
        dialog.show();
        

В примере локальные элементы разных типов объектов передаются в items.

Если элементы известны на странице, передайте их в items или добавьте после создания диалога методом addItem().

Если элементы нужно получать с сервера, настройте типы объектов в entities и используйте провайдер данных. Пример есть в разделе Загрузить элементы с сервера.

Связанные методы: Dialog.addItem(), Dialog.getItem(), Dialog.getItems(), Dialog.getEntityItems(), Item.getId(), Item.getEntityId(), Item.getEntityType().

Работать с DOM-узлами элементовРаботать с DOM-узлами элементов

Item хранит данные элемента, а ItemNode представляет его DOM-узел в конкретной вкладке или на конкретном уровне дерева.

Несколько DOM-узлов нужны, когда один и тот же элемент показывается на разных вкладках или в разных ветках древовидного списка.

Обычно к ItemNode обращаются для работы с деревом, фокусом, раскрытием дочерних элементов или собственным отображением узла.

Данные для отображения можно задать в параметрах элемента или в параметрах конкретного узла. Если параметры заданы только у элемента, все его DOM-узлы используют одно и то же название, подзаголовок, аватар и другие визуальные данные.

Связанные методы: Item.createNode(), Item.getNodes(), Item.removeNode(), ItemNode.getItem(), ItemNode.getTab(), ItemNode.getChildren(), ItemNode.loadChildren().

Использовать вкладкиИспользовать вкладки

Вкладки группируют элементы в диалоге. Элемент попадает на вкладку, если в его параметре tabs указан идентификатор вкладки.

const dialog = new Dialog({
            targetNode: button,
            dropdownMode: true,
            tabs: [
                {
                    id: 'cities',
                    title: 'Города',
                    itemOrder: {
                        title: 'asc',
                    },
                },
                {
                    id: 'countries',
                    title: 'Страны',
                },
            ],
            items: [
                {
                    id: 1,
                    entityId: 'city',
                    title: 'Москва',
                    tabs: 'cities',
                },
                {
                    id: 1,
                    entityId: 'country',
                    title: 'Россия',
                    tabs: 'countries',
                },
            ],
        });
        

Диалог открывается с активной вкладкой «Города». Так как multiple по умолчанию true, пользователь может отметить галочкой несколько элементов подряд.

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

Диалог создает две системные вкладки:

• recents — вкладка недавних элементов. Видима по умолчанию, но в режиме dropdownMode создается скрытой.
• search — вкладка результатов поиска. Скрыта, пока пользователь не ввел поисковую строку.

Если на вкладке нет элементов, диалог показывает заглушку. Настройте ее в параметрах вкладки: передайте текст или класс заглушки в stub, а дополнительные параметры — в stubOptions.

const dialog = new Dialog({
            targetNode: button,
            tabs: [
                {
                    id: 'projects',
                    title: 'Проекты',
                    stub: true,
                    stubOptions: {
                        title: 'Проекты не найдены',
                        subtitle: 'Измените поисковую строку или создайте новый проект',
                    },
                },
            ],
        });
        

Связанные методы: Dialog.addTab(), Dialog.getTab(), Dialog.getRecentTab(), Dialog.getSearchTab(), Dialog.selectTab(), Tab.getRootNode(), Tab.getItemMaxDepth(), Tab.setStub().

Настроить типы объектовНастроить типы объектов

Тип объекта соответствует настройке entities и классу Entity в API. Он объединяет элементы с общими параметрами загрузки, поиска и отображения.

В entities передайте id типа объекта и параметры, которые нужны для сценария. По id сервер находит зарегистрированный PHP-провайдер, если диалог загружает или ищет элементы на сервере.

const dialog = new Dialog({
            targetNode: button,
            entities: [
                {
                    id: 'project',
                    dynamicLoad: true,
                    dynamicSearch: true,
                    itemOptions: {
                        default: {
                            avatar: '/upload/project-default.svg',
                        },
                    },
                },
            ],
        });
        

В примере тип объекта project использует серверную загрузку и поиск, а параметр itemOptions.default.avatar задает аватар по умолчанию для элементов этого типа.

Связанные методы: Entity.getId(), Entity.getOptions(), Entity.hasDynamicLoad(), Entity.hasDynamicSearch().

Загрузить элементы с сервераЗагрузить элементы с сервера

Для динамической загрузки передайте тип объекта в entities. Сервер найдет PHP-провайдер по идентификатору типа объекта.

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            context: 'MY_MODULE_USERS',
            entities: [
                {
                    id: 'user',
                },
                {
                    id: 'department',
                },
            ],
        });
        

Динамическую загрузку настройте по типу объекта:

• для стандартного типа объекта используйте настройки из статьи Стандартные провайдеры;
• если нужно явно зафиксировать загрузку в конкретном диалоге, передайте dynamicLoad: true в entities;
• для типа объекта своего модуля зарегистрируйте провайдер данных и передайте dynamicLoad: true.

Выберите провайдер по типу объекта:

• для пользователей, отделов, проектов, чатов и чат-ботов используйте стандартные провайдеры;
• для собственного типа объекта зарегистрируйте провайдер данных.

Если элементы не загружаются, проверьте:

• entities[].id совпадает с entityId зарегистрированного провайдера;
• модуль, который регистрирует провайдер, установлен;
• метод isAvailable() провайдера возвращает true для текущего пользователя;
• для серверного поиска включен dynamicSearch;
• ошибки загрузки обрабатываются через onLoadError, Entity:onError или Entity:{entityId}:onError из раздела События Dialog.

Настроить историю недавних элементовНастроить историю недавних элементов

Недавние элементы — это история выбора пользователя для конкретного сценария. Диалог показывает такие элементы на системной вкладке recents.

context — строковый ключ сценария. Компонент использует его, чтобы разделять историю выбора для разных форм и действий.

Для каждой формы задавайте отдельное значение, например MY_MODULE_RESPONSIBLE и MY_MODULE_OBSERVERS. Если context не передан, выбранный элемент не попадет в историю этого сценария.

Недавние элементы делятся на два набора:

• локальный набор относится к текущему context; провайдер получает его через getRecentItems();
• глобальный набор объединяет другие контексты, в которых пользователь выбирал элементы тех же типов объектов; провайдер получает его через getGlobalRecentItems().

recentItemsLimit задает, сколько недавних элементов вернуть. Сервер не возвращает больше 50 элементов.

clearUnavailableItems используйте, если провайдер может вернуть элементы, которые текущий пользователь больше не должен видеть. При загрузке диалога такие элементы удаляются из недавних для текущего контекста.

const dialog = new Dialog({
            targetNode: button,
            context: 'MY_MODULE_RESPONSIBLE',
            recentItemsLimit: 20,
            clearUnavailableItems: true,
            entities: [
                {
                    id: 'user',
                    dynamicLoad: true,
                },
            ],
        });
        

В примере диалог хранит историю выбора для сценария MY_MODULE_RESPONSIBLE и запрашивает не больше 20 недавних элементов. Если провайдер пометит элемент как недоступный, диалог удалит его из недавних для этого контекста.

Связанные методы PHP-диалога и провайдера описаны в статье Провайдеры данных.

Настроить поискНастроить поиск

Параметр enableSearch: true включает строку поиска. По умолчанию клиентский поиск выполняется по заголовку и подзаголовку элемента.

Для серверного поиска укажите dynamicSearch: true в настройках типа объекта и реализуйте метод doSearch() в провайдере.

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            entities: [
                {
                    id: 'project',
                    dynamicLoad: true,
                    dynamicSearch: true,
                },
            ],
        });
        

Параметр dynamicSearch работает только вместе с доступным PHP-провайдером. Если провайдер не зарегистрирован или недоступен текущему пользователю, серверный поиск не вернет элементы.

Связанные методы: Dialog.search(), Dialog.clearSearch(), Dialog.focusSearch(), Entity.hasDynamicSearch(), Entity.getSearchFields(), Entity.getSearchCacheLimits(). Методы SearchQuery описаны в статье Провайдеры данных.

Настроить кеширование поискаНастроить кеширование поиска

Диалог кеширует поисковые запросы, если запрос можно кешировать и для него не нужен серверный поиск. При следующем уточнении уже загруженной строки диалог не отправляет повторный AJAX-запрос.

Провайдер может отключить кеширование конкретного серверного ответа методом $searchQuery->setCacheable(false). Используйте это, если результат поиска неполный и при уточнении строки нужно снова обратиться к серверу.

Параметр searchCacheLimits в настройках типа объекта задает регулярные выражения для поисковых строк, которые не нужно кешировать.

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            entities: [
                {
                    id: 'project',
                    dynamicSearch: true,
                    searchCacheLimits: [
                        '^\\d{1,3}$',
                    ],
                },
            ],
        });
        

use Bitrix\UI\EntitySelector\Dialog;
        use Bitrix\UI\EntitySelector\SearchQuery;
        
        public function doSearch(SearchQuery $searchQuery, Dialog $dialog): void
        {
            if (mb_strlen($searchQuery->getQuery()) < 3)
            {
                $searchQuery->setCacheable(false);
            }
        }
        

В JavaScript-примере диалог не кеширует короткие числовые запросы, которые совпадают с регулярным выражением.

В PHP-примере провайдер отключает кеширование ответа, если поисковая строка короче трех символов.

Связанные методы: Entity.getSearchCacheLimits(), Entity.setSearchCacheLimits(). Методы SearchQuery описаны в статье Провайдеры данных.

Создать элемент из поискаСоздать элемент из поиска

Чтобы разрешить создание элемента из поисковой строки, включите searchOptions.allowCreateItem. Само создание элемента реализует внешний код в обработчике события Search:onItemCreateAsync.

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            searchOptions: {
                allowCreateItem: true,
                footerOptions: {
                    label: 'Создать проект:',
                },
            },
            events: {
                'Search:onItemCreateAsync': (event) => {
                    return new Promise((resolve) => {
                        const { searchQuery } = event.getData();
                        const dialog = event.getTarget();
        
                        const item = dialog.addItem({
                            id: Date.now(),
                            entityId: 'project',
                            title: searchQuery.getQuery(),
                        });
        
                        if (item)
                        {
                            item.select();
                        }
        
                        resolve();
                    });
                },
            },
        });
        

В примере Date.now() создает временный локальный идентификатор. Если элемент должен сохраниться на сервере, сначала создайте запись во внешнем коде и передайте в id постоянный идентификатор этой записи.

Добавить футерДобавить футер

footer добавляет футер диалога. В него можно передать HTML-строку, DOM-узел, массив DOM-узлов или класс футера.

Строку с HTML передавайте только для доверенной статической разметки. Если футер содержит пользовательские данные или обработчики событий, создавайте DOM-узел через Tag.render или используйте класс футера.

Выберите способ по задаче:

• HTML-строка — для статической разметки;
• DOM-узел — для разметки с обработчиками событий;
• массив DOM-узлов — для нескольких независимых элементов;
• TabOptions.footer — для футера отдельной вкладки;
• DefaultFooter — для стандартного контейнера с собственным содержимым;
• BaseFooter — для полностью своей разметки футера.

HTML-строкаHTML-строка

Этот способ подходит, если футер содержит только статическую разметку.

const dialog = new Dialog({
            targetNode: button,
            footer: `
                <a href="/company/" class="ui-selector-footer-link ui-selector-footer-link-add">
                    Открыть список сотрудников
                </a>
            `,
        });
        

DOM-узелDOM-узел

DOM-узел используйте, если нужно добавить обработчик события или собрать футер через Tag.render.

import { Tag } from 'main.core';
        
        const dialog = new Dialog({
            targetNode: button,
            footer: Tag.render`
                <span class="ui-selector-footer-link" onclick="${() => openInviteSlider()}">
                    Пригласить сотрудника
                </span>
            `,
        });
        

Массив DOM-узловМассив DOM-узлов

Массив DOM-узлов используйте, если футер состоит из нескольких независимых элементов.

import { Tag } from 'main.core';
        
        const dialog = new Dialog({
            targetNode: button,
            footer: [
                Tag.render`
                    <span class="ui-selector-footer-link" onclick="${() => openInviteSlider()}">
                        Пригласить сотрудника
                    </span>
                `,
                Tag.render`
                    <span class="ui-selector-footer-conjunction">
                        или
                    </span>
                `,
                Tag.render`
                    <span class="ui-selector-footer-link" onclick="${() => openGuestInviteSlider()}">
                        пригласить гостя
                    </span>
                `,
            ],
        });
        

Футер вкладкиФутер вкладки

Футер можно задать для отдельной вкладки. Если у вкладки задан свой футер, диалог показывает его, когда вкладка активна.

const dialog = new Dialog({
            targetNode: button,
            tabs: [
                {
                    id: 'users',
                    title: 'Сотрудники',
                    footer: '<span class="ui-selector-footer-link">Выберите сотрудника</span>',
                },
            ],
        });
        

Класс на основе DefaultFooterКласс на основе DefaultFooter

Класс на основе DefaultFooter используйте, если нужно оставить стандартный контейнер футера и переопределить только содержимое.

import { Tag } from 'main.core';
        import { DefaultFooter } from 'ui.entity-selector';
        
        class InviteFooter extends DefaultFooter
        {
            getContent()
            {
                return this.cache.remember('content', () => {
                    const label = this.getOption('label', 'Пригласить');
        
                    return Tag.render`
                        <span class="ui-selector-footer-link" onclick="${() => openInviteSlider()}">
                            ${label}
                        </span>
                    `;
                });
            }
        }
        
        const dialog = new Dialog({
            targetNode: button,
            footer: InviteFooter,
            footerOptions: {
                label: 'Пригласить сотрудника',
            },
        });
        

Класс на основе BaseFooterКласс на основе BaseFooter

Класс на основе BaseFooter используйте, если футеру нужна полностью своя разметка.

import { Tag } from 'main.core';
        import { BaseFooter } from 'ui.entity-selector';
        
        class CustomFooter extends BaseFooter
        {
            render()
            {
                return this.cache.remember('content', () => {
                    const label = this.getOption('label', 'Действие');
        
                    return Tag.render`
                        <div class="my-module-selector-footer">
                            <button type="button" onclick="${() => runFooterAction()}">
                                ${label}
                            </button>
                        </div>
                    `;
                });
            }
        }
        
        const dialog = new Dialog({
            targetNode: button,
            footer: CustomFooter,
            footerOptions: {
                label: 'Создать элемент',
            },
        });
        

Футер появляется внизу диалога, под списком элементов.

Общий футер диалога можно скрыть для вкладки через showDefaultFooter: false.

Связанные методы: Dialog.getFooter(), Dialog.setFooter(), Dialog.getActiveFooter(), Tab.getFooter(), Tab.setFooter(), Tab.disableDefaultFooter(), BaseFooter.render() и DefaultFooter.getContent().

Конструктор DialogКонструктор Dialog

Конструктор создает экземпляр окна выбора на странице. После создания экземпляр можно открыть методом show(), связать с TagSelector, изменить методами класса или подписать на события.

new Dialog(dialogOptions) принимает объект настроек dialogOptions. В нем передайте DOM-узел привязки, локальные элементы или типы объектов для серверной загрузки.

Пример создания диалога с локальными элементами есть в разделе Создать диалог с локальными элементами.

Параметры конструктораПараметры конструктора

В конструктор Dialog передается объект DialogOptions. Внутри него используются вложенные структуры для поиска, элементов, типов объектов и вкладок.

DialogOptionsDialogOptions

DialogOptions описывает окно выбора, источники элементов, режим выбора и поведение всплывающего окна.

Источник данных

ItemId — пара [entityId, id]. В entityId передайте идентификатор типа объекта, в id — идентификатор элемента внутри этого типа.

Поведение выбора

Поиск и загрузка

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            searchTabOptions: {
                stubOptions: {
                    title: 'Ничего не найдено',
                    subtitle: 'Измените поисковую строку',
                },
            },
            recentTabOptions: {
                title: 'Последние выбранные',
                itemMaxDepth: 1,
            },
        });
        

Всплывающее окно

Заголовок, футер и вид

Недавние элементы

Связь с TagSelector и служебные параметры

SearchOptionsSearchOptions

SearchOptions описывает настройки поисковой строки диалога.

ItemOptionsItemOptions

ItemOptions описывает элемент диалога. Параметры id и entityId обязательны.

EntityOptionsEntityOptions

EntityOptions описывает тип объекта. Для стандартных типов используйте их id. Для типа объекта своего модуля зарегистрируйте PHP-провайдер.

filters принимает массив объектов вида { id, options }. В id передайте идентификатор зарегистрированного фильтра, в options — параметры, которые получит PHP-класс фильтра.

По умолчанию клиентский поиск использует поля title и subtitle. Параметр searchFields добавляет поля для индексации. Чтобы исключить системное поле из поиска, передайте поле с тем же name, system: true и searchable: false.

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            entities: [
                {
                    id: 'project',
                    searchFields: [
                        { name: 'code', type: 'string' },
                        { name: 'title', system: true, searchable: false },
                    ],
                },
            ],
        });
        

dynamicLoad и dynamicSearch работают только для типа объекта, у которого зарегистрирован доступный PHP-провайдер.

TabOptionsTabOptions

TabOptions описывает вкладку диалога.

itemOrder принимает объект, где ключ — поле элемента, а значение — направление сортировки asc или desc. Например: { title: 'asc' }.

JS-классы DialogJS-классы Dialog

DialogDialog

Статические методы

Управление окном

const dialog = Dialog.getById('project-dialog');
        
        if (dialog && dialog.isOpen())
        {
            dialog.hide();
        }
        

Загрузка данных

Элементы

const item = dialog.addItem({
            id: 7,
            entityId: 'project',
            title: 'Поддержка сайта',
        });
        
        item.select();
        console.log(dialog.getSelectedItems());
        

Поиск

Вкладки

Типы объектов

Заголовок и футер

Недавние и заранее выбранные элементы

Связь с TagSelector

Внешний вид и поведение

Служебные данные

ItemItem

new Item(itemOptions) создает элемент. Параметры id и entityId обязательны, иначе конструктор выбрасывает исключение.

ItemNodeItemNode

ItemNode представляет DOM-узел элемента в конкретной вкладке или ветке дерева. Диалог создает узлы автоматически.

TabTab

new Tab(dialog, tabOptions) создает вкладку. Параметр id обязателен.

EntityEntity

new Entity(entityOptions) создает тип объекта. Параметр id обязателен.

ItemBadgeItemBadge

new ItemBadge(badgeOptions) создает бейдж элемента.

TextNodeTextNode

new TextNode(options) создает текстовый узел. Класс используют Item, ItemNode и ItemBadge для полей title, subtitle, caption и похожих параметров.

BaseStubBaseStub

new BaseStub(tab, options) создает базовую заглушку вкладки. Метод render() нужно переопределить в наследнике.

DefaultStubDefaultStub

DefaultStub наследует BaseStub и строит стандартную заглушку вкладки. Используйте его, если нужно изменить текст, иконку или стрелку стандартной заглушки через stubOptions.

const dialog = new Dialog({
            targetNode: button,
            tabs: [
                {
                    id: 'projects',
                    title: 'Проекты',
                    stub: true,
                    stubOptions: {
                        title: 'Проекты не найдены',
                        subtitle: 'Создайте проект или измените фильтр',
                        arrow: true,
                    },
                    footer: '<span class="ui-selector-footer-link ui-selector-footer-link-add">Создать проект</span>',
                },
            ],
        });
        

BaseHeaderBaseHeader

new BaseHeader(context, options) создает базовый заголовок. В context передайте Dialog или Tab. Метод render() нужно переопределить в наследнике.

DefaultHeaderDefaultHeader

DefaultHeader наследует BaseHeader и реализует стандартный контейнер заголовка.

import { DefaultHeader } from 'ui.entity-selector';
        
        class ProjectHeader extends DefaultHeader
        {
            getContent()
            {
                return this.getOption('title', 'Выберите проект');
            }
        }
        
        const dialog = new Dialog({
            targetNode: button,
            header: ProjectHeader,
            headerOptions: {
                title: 'Проекты',
            },
        });
        

BaseFooterBaseFooter

new BaseFooter(context, options) создает базовый футер. В context передайте Dialog или Tab.

DefaultFooterDefaultFooter

DefaultFooter наследует BaseFooter и реализует стандартный контейнер футера.

События DialogСобытия Dialog

Передайте обработчики в параметр events. События приходят через объект BaseEvent, данные доступны через event.getData().

События с префиксом onBefore... можно отменять через event.preventDefault(). Обработчик Search:onItemCreateAsync должен вернуть Promise, если создание элемента выполняется асинхронно.

const dialog = new Dialog({
            targetNode: button,
            events: {
                'Item:onBeforeDeselect': (event) => {
                    const { item } = event.getData();
        
                    if (!item.isDeselectable())
                    {
                        event.preventDefault();
                    }
                },
                'Item:onSelect': (event) => {
                    const { item } = event.getData();
        
                    console.log(item.getEntityId(), item.getId());
                },
            },
        });
        

const dialog = new Dialog({
            targetNode: button,
            enableSearch: true,
            searchOptions: {
                allowCreateItem: true,
                footerOptions: {
                    label: 'Создать проект:',
                },
            },
            events: {
                'Search:onItemCreateAsync': (event) => {
                    return new Promise((resolve) => {
                        const { searchQuery } = event.getData();
                        const dialog = event.getTarget();
        
                        const item = dialog.addItem({
                            id: Date.now(),
                            entityId: 'project',
                            title: searchQuery.getQuery(),
                            tabs: 'projects',
                        });
        
                        if (item)
                        {
                            item.select();
                        }
        
                        dialog.selectTab('projects');
                        resolve();
                    });
                },
            },
        });