Slider Manager Class

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.

Slider settings are passed via bx24_-prefixed keys. In particular, bx24_title sets the slider title; when the portal opens the slider it also reflects that title to the browser tab (document.title). So, unlike parent.setTitle (which only updates the in-layout #pagetitle), this path does change the browser tab title:

await $b24.slider.openSliderAppPage({ bx24_title: 'My title' })

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.

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

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.

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).