Slider Manager Class

Provides methods for working with sliders in the Bitrix24 application. It allows opening and closing sliders, as well as managing their content.

SliderManager

StatusClose

We are still updating this page. Some data may be missing here — we will complete it shortly.

Methods

openSliderAppPage

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

The openSliderAppPage method allows you to open the current app in a new slider, passing arbitrary parameters.

How it works:

Data Passing: You call the method and pass an object with parameters (e.g., place, action, or id).
Processing in the Application: On the application side, it's most convenient to intercept these parameters through middleware. This allows you to decide which route to display to the user before the page is rendered.
Seamless Navigation: The user sees a new slider with the desired content, while the redirection logic is hidden within the application.

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>

Closes the slider with the application.

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>

Opens the specified path inside the portal in a slider.

Handles errors related to mobile device usage and can open the URL in a new tab if the slider is not supported.

Returns StatusClose

Parameter	Type	Description
`url`	`URL`	URL to be opened.
`width`	`number`	Slider width, a number in the range from `1640` to `900`.

This example demonstrates calling the Bitrix24 slider and handling its closing result.

Key points:

Completion handling: After closing the slider, the SDK returns a status. This allows subsequent operations to be initiated, such as reinitializing application data.

In some cases, Bitrix24 opens the interface not in the slider, but in a new browser tab.

Limitation: It is virtually impossible to detect the closing of an individual tab using standard JS tools.
Solution: The isOpenAtNewWindow parameter in the jsSdk response allows you to determine whether a tab was opened instead of the slider and correctly configure the application's logic.

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

Returns a URL relative to the domain name and path.

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

getTargetOrigin

getTargetOrigin(): string

Returns the Bitrix24 address (e.g., https://your_domain.bitrix24.com).

Placement

Used for managing the placement of widgets in the Bitrix24 application.