Перейти к содержимому
BXWiki

Окна и уведомления ядра UI - подтверждение, всплывающее окно, сообщение

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

Решение

Подключаем нужные расширения:

use Bitrix\Main\UI\Extension;


Extension::load(['ui.dialogs.messagebox', 'ui.notification', 'ui.buttons']);
// каждое расширение подключают явно: одно не тянет за собой остальные
// без подключения объекты просто не существуют, и код падает на первой строке
// список расширений держат минимальным: каждое тянет свои файлы на страницу

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

Спрашиваем подтверждение перед опасным действием:

BX.UI.Dialogs.MessageBox.confirm(
    'Удалить заказ без возможности восстановления?',
    (messageBox) => { deleteOrder(); messageBox.close(); },
    'Удалить'
);
// готовое окно выглядит так же, как штатные, и работает на клавиатуре

Подтверждение опасного действия - готовое окно, а не своя разметка. Сотрудник узнаёт его по виду и не путает с обычным сообщением, а поведение с клавиатуры достаётся бесплатно.

Показываем короткое сообщение:

BX.UI.Notification.Center.notify({
    content: 'Заказ сохранён',
    autoHideDelay: 3000,
});
// уведомление не перекрывает страницу и не требует закрытия руками

Короткое уведомление не требует своего окна. Результат сохранения, отправки или пересчёта показывают именно так: сотрудник видит ответ и продолжает работу, а не закрывает очередное окно.

Открываем окно со своим содержимым:

const popup = new BX.PopupWindow('vendor-preview', null, {
    content: '<div class="preview">...</div>',
    closeIcon: true,
    buttons: [new BX.UI.Button({ text: 'Закрыть', onclick: () => popup.close() })],
});
popup.show();
// кнопки, вкладки и слайдер берут из той же библиотеки готовыми

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

Ядро UI приносит с собой свои собственные стили и заметный лишний вес. На витрине с плотной вёрсткой это заметно, и решают это либо принятием чужого вида окон, либо своим лёгким окном на пару десятков строк.

Уведомления не заменяют собой журнала событий на сервере самого проекта. Сообщение исчезает через три секунды, а вопрос «что именно сломалось вчера в шесть вечера» остаётся, и ответ на него живёт в журнале, а не в уведомлении.

Одинаковые окна стоит завести одной функцией в своём расширении. Иначе текст подтверждения удаления расходится по десяти файлам и в половине из них устаревает.

Типичные проблемы

Окно не открывается, в консоли ошибка.

Расширение с окнами не подключено на этой конкретной странице вашего сайта. Подключение ставят до вывода разметки, а не в обработчик клика.

Окно открывается под шапкой сайта.

Своя вёрстка задаёт слой выше, чем окно платформы. Слои приводят к общему порядку прямо в стилях шаблона всего сайта.

Вёрстка сайта поехала после подключения.

Стили ядра UI пришли вместе с расширением и задели общие правила. На витрине это решают своим лёгким окном.

Уведомления накапливаются стопкой.

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

Подтверждение проскакивает без вопроса.

Действие выполняется до ответа пользователя, а не в обработчике согласия. Всё опасное вызывают внутри обработчика.

Частые вопросы

Можно ли использовать ядро UI на витрине?

Можно, но оно тянет свои стили и вес. Для одного окна дешевле написать своё.

Чем окно отличается от сообщения?

Окно ждёт ответа и перекрывает страницу, сообщение просто показывается. Опасные действия закрывают именно окном.

Как загрузить содержимое окна запросом?

Открыть окно с заглушкой и подменить содержимое после ответа. Ждать ответ до открытия не нужно.

Где хранить свои окна проекта?

В своём расширении с зависимостями от нужных расширений платформы. Тогда подключение везде одинаковое.

Смежное

Первоисточник