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

Боковая панель - открытие страницы, события, запрет закрытия

Открываем страницы в боковой панели вместо перехода: карточку заказа из списка, форму правки, отчёт. Разбираем вызов панели, её события и запрет случайного закрытия открытой формы.

Решение

Боковая панель показывает обычную страницу сайта поверх текущей страницы. Отдельного интерфейса для неё писать не нужно: панель открывает существующий адрес и показывает его содержимое.

Открываем страницу в панели:

BX.SidePanel.Instance.open('/personal/order/detail/15/', {
    width: 900,          // ширина панели в точках
    cacheable: false,    // не держать содержимое после закрытия
    // по умолчанию содержимое сохраняется до следующего открытия
});
// пустой адрес и повторное открытие того же адреса сверху игнорируются
// внутри панели открывается обычная страница сайта со своим шаблоном

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

Слушаем события панели:

BX.SidePanel.Instance.open('/personal/order/detail/15/', {
    events: {
        onLoad: (event) => { console.log(event.getSlider().getUrl()); },
        onCloseComplete: () => { reloadOrderList(); },   // список обновляют после полного закрытия панели
    },
});

События дают точки для своего кода: загрузка содержимого, закрытие, завершение закрытия. Обновление списка вешают именно на завершение закрытия, а не на его начало.

Запрещаем закрытие при несохранённых данных:

events: {
    onClose: (event) => {
        if (window.hasUnsavedChanges) { event.denyAction(); }   // закрытие отменяется
    },
    onCloseComplete: () => { window.hasUnsavedChanges = false; },
}

Событие начала закрытия панели умеет отменить это действие целиком. Это единственный способ не дать человеку потерять заполненную форму случайным щелчком мимо панели.

Готовим страницу к показу в панели:

// в шаблоне страницы, открываемой в панели
if ($request->get('IFRAME') === 'Y') {
    // прячем шапку и подвал: панель показывает только содержимое
}

Страница в панели выводится без привычной обвязки сайта. Признак в адресе даёт шаблону понять, что шапку и подвал рисовать не нужно.

Панель хранит содержимое между открытиями, если такое поведение не отключено явно параметром. Для формы правки такое поведение вредно: человек увидит прежние значения вместо свежих данных.

Ссылки в списке удобно превращать в открытие боковой панели полностью автоматически. Тогда обычная ссылка на карточку работает и как переход, и как открытие панели, а сотрудник сам выбирает привычный способ.

Адрес страницы при этом остаётся вполне рабочим и сам по себе тоже. Это важно и для поиска по сайту, и для ссылки, отправленной коллеге в переписке.

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

Панель открывается пустой.

Адрес отдаёт страницу целиком с шапкой и подвалом либо отвечает ошибкой сервера. Открываемый адрес сначала проверяют в обычном отдельном окне того же браузера.

В панели показываются старые данные.

Содержимое этой страницы взято из кэша самой боковой панели сайта. Для форм правки кэширование содержимого отключают прямо при открытии самой панели.

Список за панелью не обновился после сохранения.

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

Заполненная форма пропадает при случайном щелчке.

Не поставлен запрет закрытия панели при наличии несохранённых данных в форме. Событие начала закрытия панели умеет отменить закрытие.

В панели видна шапка сайта и меню.

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

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

Чем панель лучше всплывающего окна?

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

Можно ли открыть в панели своё содержимое без страницы?

Да, содержимое можно передать обработчиком при открытии. Но чаще проще открыть обычную страницу: её же можно показать и по прямому адресу.

Как закрыть панель из кода страницы внутри неё?

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

Сколько панелей можно открыть подряд?

Несколько: они выстраиваются одна поверх другой. Закрытие идёт с верхней, и это стоит учитывать при обновлении данных под ними.

Нужна ли панель на публичной части сайта?

Она уместна в личном кабинете и служебных интерфейсах. Для витрины привычнее обычные страницы и всплывающие окна.

Смежное

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