Appearance

B24Frame Class ​

Designed for managing Bitrix24 applications. It inherits functionality from AbstractB24 and provides methods for working with authentication, messages, sliders, and more.

Implements the TypeB24 interface.

TIP

You can test working with B24Frame in this example.

Constructor ​

ts
constructor(queryParams: B24FrameQueryParams)

The B24FrameQueryParams type describes the parameters needed to initialize a Bitrix24 application frame.

FieldTypeDescription
DOMAINstringBitrix24 account domain name.
PROTOCOLbooleanConnection protocol.
LANGstringBitrix24 interface language.
APP_SIDstringApplication session identifier.

Getters ​

isInit ​

ts
get isInit(): boolean

Indicates whether the data is initialized. Similar to function

isFirstRun ​

ts
get isFirstRun(): boolean

Returns a flag indicating whether this is the first run of the application. Similar to function

isInstallMode ​

ts
get isInstallMode(): boolean

Returns a flag indicating whether the application is in installation mode. Similar to function

auth ​

ts
get auth(): AuthManager

Returns the authorization manager.

parent ​

ts
get parent(): ParentManager

Returns the parent window manager.

slider ​

ts
get slider(): SliderManager

Returns the slider manager.

placement ​

ts
get placement(): PlacementManager

Returns the placement manager.

options ​

ts
get options(): OptionsManager

Returns the options manager.

dialog ​

ts
get dialog(): DialogManager

Returns the dialog manager.

Methods ​

INFO

Implements the TypeB24 interface.

installFinish ​

ts
async installFinish(): Promise<any>

Signals the completion of the application installation. Similar to function

getAppSid ​

ts
getAppSid(): string

Returns the application identifier relative to the parent window.

getLang ​

ts
getLang(): B24LangList

Returns the localization of the Bitrix24 interface. Similar to function

Usage ​

This code creates an instance of B24Frame to interact with the Bitrix24 API and performs a batch request to retrieve a list of companies, sorting them by ID in descending order.

The retrieved data is transformed into an array of objects with fields id, title, and createdTime, after which the results are logged to the console, and in case of an error, an error message is displayed.

WARNING

The code must be run as a Bitrix24 application (in a frame).

ts
import {
	initializeB24Frame,
	LoggerBrowser,
	B24Frame,
	Result,
	EnumCrmEntityTypeId,
	Text,
	type ISODate
} from '@bitrix24/b24jssdk'
	
const $logger = LoggerBrowser.build('MyApp', import.meta.env?.DEV === true)
let $b24: B24Frame

initializeB24Frame()
.then((response: B24Frame) => {
	$b24 = response
	
	return $b24.callBatch({
		CompanyList: {
			method: 'crm.item.list',
			params: {
				entityTypeId: EnumCrmEntityTypeId.company,
				order: { id: 'desc' },
				select: [
					'id',
					'title',
					'createdTime'
				]
			}
		}
	}, true )
})
.then((response: Result) => {
	const data = response.getData()
	const dataList = (data.CompanyList.items || []).map((item: any) => {
		return {
			id: Number(item.id),
			title: item.title,
			createdTime: Text.toDateTime(item.createdTime as ISODate)
		}
	})
	
	$logger.info('response >> ', dataList)
	$logger.info('load >> stop ')
})
.catch((error) => {
	$logger.error(error)
})
html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bitrix24 Frame Demo</title>
</head>
<body>
<p>See the result in the developer console</p>
<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
	try
	{
		const $logger = B24Js.LoggerBrowser.build('MyApp', true);
		let $b24;
		
		$b24 = await B24Js.initializeB24Frame();
		
		const response = await $b24.callBatch({
			CompanyList: {
				method: 'crm.item.list',
				params: {
					entityTypeId: B24Js.EnumCrmEntityTypeId.company,
					order: { id: 'desc' },
					select: [
						'id',
						'title',
						'createdTime'
					]
				}
			}
		}, true );
		
		const data = response.getData();
		const dataList = (data.CompanyList.items || []).map((item) => {
			return {
				id: Number(item.id),
				title: item.title,
				createdTime: B24Js.Text.toDateTime(item.createdTime)
			}
		});
		
		$logger.info('response >> ', dataList);
		$logger.info('load >> stop ');
	}
	catch (error)
	{
		console.error(error);
	}
});
</script>
</body>
</html>
vue
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import {
	initializeB24Frame,
	LoggerBrowser,
	B24Frame,
	EnumCrmEntityTypeId,
	Text,
	type ISODate
} from '@bitrix24/b24jssdk'

const $logger = LoggerBrowser.build('MyApp', import.meta.env?.DEV === true)
let $b24: B24Frame

onMounted(async () => {
	try
	{
		$b24 = await initializeB24Frame()
		
		const response = await $b24.callBatch({
			CompanyList: {
				method: 'crm.item.list',
				params: {
					entityTypeId: EnumCrmEntityTypeId.company,
					order: { id: 'desc' },
					select: [
						'id',
						'title',
						'createdTime'
					]
				}
			}
		}, true)
		
		const data = response.getData()
		const dataList = (data.CompanyList.items || []).map((item: any) => {
			return {
				id: Number(item.id),
				title: item.title,
				createdTime: Text.toDateTime(item.createdTime as ISODate)
			}
		})
		
		$logger.info('response >> ', dataList)
		$logger.info('load >> stop ')
	}
	catch (error)
	{
		$logger.error(error)
	}
})

onUnmounted(() => {
	$b24?.destroy()
})
</script>

<template>
	<p>See the result in the developer console</p>
</template>

Released under the MIT License.

Copyright © 2024-present Bitrix24