Класс SliderManager

Предоставляет методы для работы со слайдерами в приложении Bitrix24. Позволяет открывать и закрывать слайдеры, а также управлять их содержимым.
Мы всё ещё дорабатываем эту страницу. Некоторых данных здесь может не хватать — скоро дополним.

Методы

openSliderAppPage

async openSliderAppPage(params: any = {}}: Promise<any>

Метод openSliderAppPage позволяет открыть текущее приложение в новом слайдере, передав произвольные параметры.

Как это работает:

  • Передача данных: вы вызываете метод и передаёте объект с параметрами (например, place, action или id).
  • Обработка в приложении: на стороне приложения удобнее всего перехватывать эти параметры через middleware. Это позволяет решить, какой маршрут показать пользователю до отрисовки страницы.
  • Бесшовная навигация: пользователь видит новый слайдер с нужным содержимым, а логика перенаправления скрыта внутри приложения.
frame-slider-app-page-open.ts
import type { B24Frame } from '@bitrix24/b24jssdk'
import { LoggerFactory } from '@bitrix24/b24jssdk'


const devMode = typeof import.meta !== 'undefined' && (import.meta?.dev || globalThis._importMeta_.env?.DEV)
const $logger = LoggerFactory.createForBrowser('Example:B24FrameSliderOpenPath', devMode)
const $b24 = useB24().get() as B24Frame

async function openAppPage() {
  const response = await $b24.slider.openSliderAppPage(
    {
      // The 'place' parameter will be available in placement
      // It should be processed in middleware to redirect to the desired route.
      place: 'app.place',
      bx24_width: 650,
      bx24_title: 'Page title in the browser'
    }
  )

  $logger.debug('response', { response })
}

await openAppPage()

closeSliderAppPage

async closeSliderAppPage(): Promise<void>

Закрывает слайдер с приложением.

frame-slider-app-page-close.ts
import type { B24Frame } from '@bitrix24/b24jssdk'

const $b24 = useB24().get() as B24Frame

async function closePage() {
  return $b24.slider.closeSliderAppPage()
}

closePage()

openPath

async openPath(url: URL, width: number = 1640): Promise<StatusClose>

Открывает указанный путь внутри портала в слайдере.

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

Возвращает StatusClose

ПараметрТипОписание
urlURLОткрываемый URL.
widthnumberШирина слайдера, число в диапазоне от 1640 до 900.

Этот пример демонстрирует вызов слайдера Bitrix24 и обработку результата его закрытия.

Ключевые моменты:

  • Обработка завершения: после закрытия слайдера SDK возвращает статус. Это позволяет запускать последующие операции, например повторную инициализацию данных приложения.
В некоторых случаях Bitrix24 открывает интерфейс не в слайдере, а в новой вкладке браузера.
  • Ограничение: обнаружить закрытие отдельной вкладки стандартными средствами JS практически невозможно.
  • Решение: параметр isOpenAtNewWindow в ответе jsSdk позволяет определить, была ли открыта вкладка вместо слайдера, и правильно настроить логику приложения.
frame-slider-open-path.ts
import type { B24Frame } from '@bitrix24/b24jssdk'
import { LoggerFactory } from '@bitrix24/b24jssdk'


const devMode = typeof import.meta !== 'undefined' && (import.meta?.dev || globalThis._importMeta_.env?.DEV)
const $logger = LoggerFactory.createForBrowser('Example:B24FrameSliderOpenPath', devMode)
const $b24 = useB24().get() as B24Frame

async function makeOpenSliderEditCurrency(currencyCode: string) {
  // Open the slider with the specified width
  const url = $b24.slider.getUrl(`/crm/configs/currency/edit/${currencyCode}/`)
  const response = await $b24.slider.openPath(
    $b24.slider.getUrl(`/crm/configs/currency/edit/${currencyCode}/`),
    950
  )

  $logger.debug('response', { url, response })

  // Check that it was a slider (not a new tab) and it was closed
  if (!response.isOpenAtNewWindow && response.isClose) {
    $logger.notice(`The slider is closed. Reinitializing the application...`)
    // Data update logic
  }
}

await makeOpenSliderEditCurrency('USD')

getUrl

getUrl(path: string = '/'): URL

Возвращает URL относительно доменного имени и пути.

$b24 = await initializeB24Frame()
// ...
const url = $b24.slider.getUrl('/settings/configs/userfield_list.php')

getTargetOrigin

getTargetOrigin(): string

Возвращает адрес Bitrix24 (например, https://your_domain.bitrix24.com).