Слайдер Битрикс (SidePanel): Открытие компонентов и страниц в боковой панели

Боковая панель (слайдер) — это стандарт де-факто в интерфейсах Битрикс24.

Она позволяет открывать формы редактирования, детальные карточки и отчеты «поверх» текущей страницы, не теряя контекст.

1. Открытие ссылки в слайдере

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

<? \Bitrix\Main\UI\Extension::load("sidepanel"); ?>

<!-- Просто ссылка -->
<a href="/mypage.php" onclick="BX.SidePanel.Instance.open(this.href); return false;">
    Открыть в слайдере
</a>

2. Настройка параметров слайдера

Метод open принимает объект настроек.

BX.SidePanel.Instance.open("/mypage.php", {
    width: 600, // Ширина слайдера
    cacheable: false, // Не кэшировать содержимое (перезагружать при каждом открытии)
    allowChangeHistory: false, // Не менять URL в браузере
    label: {
        text: "Моя страница",
        color: "#FFFFFF",
        bgColor: "#000000",
        opacity: 0.8
    }
});

3. Работа внутри слайдера (PHP)

Страница, открытая в слайдере, — это обычная страница, но она загружается в IFRAME. Битрикс автоматически определяет это и подключает специальный облегченный шаблон (без шапки и подвала сайта).

Если вы хотите закрыть слайдер изнутри (например, после сохранения формы):

// JS код внутри слайдера (например, в success-обработчике ajax)
var slider = top.BX.SidePanel.Instance.getSliderByWindow(window);
if(slider) {
    slider.close();
}

4. Обновление родительского списка при закрытии

Классический сценарий: открыли редактирование элемента в гриде -> сохранили -> слайдер закрылся -> грид должен обновиться.

На родительской странице:

BX.addCustomEvent("SidePanel.Slider:onMessage", function(event) {
    if (event.getEventId() === "MY_MODULE_UPDATE_GRID") {
        var grid = BX.Main.gridManager.getById("my_grid_id");
        if (grid) {
            grid.instance.reload(); // Перезагрузка грида
        }
    }
});

На странице в слайдере (после сохранения):

top.BX.SidePanel.Instance.postMessage(window, "MY_MODULE_UPDATE_GRID", {});
top.BX.SidePanel.Instance.close();

Вывод:
Использование BX.SidePanel значительно улучшает UX, избавляя пользователя от лишних переходов и перезагрузок страниц.

Это особенно актуально для административных разделов и личных кабинетов.

BX.SidePanel, слайдер битрикс, боковая панель, открывать в слайдере, IFRAME, sidepanel.js, slider.