UMD - Bitrix24 JS SDK

Установка в проект

Подключение библиотеки

Вы можете подключить библиотеку напрямую через CDN. Добавьте следующий тег <script> в HTML-файл:

<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>

При необходимости скачайте UMD-версию библиотеки с unpkg.com и добавьте её в проект.

Затем подключите её в HTML-файл:

<script src="/path/to/umd/index.min.js"></script>

Бандл UMDинлайнит свои зависимости (axios, luxon, qs-esm), чтобы работать из одного <script> без резолвинга модулей. Это значит, что npm audit в вашем проекте не видит эти встроенные копии — будущая уязвимость, скажем, в axios, подхватится только когда выйдет новый релиз SDK с обновлённым бандлом. Для аудита и дедупликации зависимостей предпочитайте точки входа ESM / CommonJS (import / require), которые держат зависимости внешними. Используйте UMD только для прямого браузерного <script> / CDN.

Импорт

После подключения библиотека будет доступна через глобальную переменную B24Js.

B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

Инициализация

Для работы с Bitrix24 из приложения, встроенного в интерфейс Bitrix24, используйте объект B24Frame.

Он инициализируется на стороне клиента через initializeB24Frame().

const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

try {
  // Инициализация экземпляра B24Frame
  let b24 = await B24Js.initializeB24Frame();
  
} catch (error) {
  logger.error('Some problems', { error })
}

Примеры

B24Frame client-side

Простой пример получения списка компаний.

Код предполагается запускать в интерфейсе Bitrix24.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bitrix24 JS SDK Demo</title>
</head>
<body>
<h1>Company Loader Example</h1>
<p>Check developer console for results</p>

<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>
<script>
  // Создание логгера
  const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

  /**
   * Загрузка списка компаний
   */
  async function loadCompanies(b24) {
    try {
      logger.debug('Loading companies...');

      const response = await b24.actions.v2.call.make({
        method: 'crm.item.list',
        params: {
          entityTypeId: B24Js.EnumCrmEntityTypeId.company,
          order: { id: 'desc' },
          select: ['id', 'title', 'createdTime']
        }
      });

      const data = response.getData().result;

      const companies = (data?.items || []).map((item) => {
        return {
          id: Number.parseInt(item.id),
          title: item.title,
          createdTime: B24Js.Text.toDateTime(item.createdTime) // @memo this is luxon/DateTime
        };
      });

      logger.debug('Companies loaded successfully', { companies });
      return companies;
    } catch (error) {
      logger.error('Request failed', { error });
      throw error;
    }
  }

  /**
   * Главная функция приложения
   */
  async function main() {
    try {
      // Инициализация экземпляра B24Frame
      let b24 = await B24Js.initializeB24Frame();

      // Загрузка компаний
      const companies = await loadCompanies(b24);

      // Дальнейшая обработка данных…
      logger.info('Loaded ' + companies.length + ' companies');
    } catch (error) {
      logger.error('Some problems', { error })
    }
  }

  /// Запуск приложения после загрузки DOM
  document.addEventListener('DOMContentLoaded', function() {
    main();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bitrix24 JS SDK Demo</title>
</head>
<body>
<h1>Company Loader Example</h1>
<p>Check developer console for results</p>

<script src="https://unpkg.com/@bitrix24/b24jssdk@latest/dist/umd/index.min.js"></script>
<script>
  // Создание логгера
  const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

  /**
   * Загрузка списка компаний
   */
  async function loadCompanies(b24) {
    try {
      logger.debug('Loading companies...');

      const response = await b24.actions.v3.call.make({
        method: 'crm.item.list',
        params: {
          entityTypeId: B24Js.EnumCrmEntityTypeId.company,
          order: { id: 'desc' },
          select: ['id', 'title', 'createdTime']
        }
      });

      const data = response.getData().result;

      const companies = (data?.items || []).map((item) => {
        return {
          id: Number.parseInt(item.id),
          title: item.title,
          createdTime: B24Js.Text.toDateTime(item.createdTime) // @memo this is luxon/DateTime
        };
      });

      logger.debug('Companies loaded successfully', { companies });
      return companies;
    } catch (error) {
      logger.error('Request failed', { error });
      throw error;
    }
  }

  /**
   * Главная функция приложения
   */
  async function main() {
    try {
      // Инициализация экземпляра B24Frame
      let b24 = await B24Js.initializeB24Frame();

      // Загрузка компаний
      const companies = await loadCompanies(b24);

      // Дальнейшая обработка данных…
      logger.info('Loaded ' + companies.length + ' companies');
    } catch (error) {
      logger.error('Some problems', { error })
    }
  }

  /// Запуск приложения после загрузки DOM
  document.addEventListener('DOMContentLoaded', function() {
    main();
  });
</script>
</body>
</html>

Node.js

Руководство по установке Bitrix24 JS SDK в приложениях Node.js.

v0 → v1

Подробное руководство по миграции приложения с Bitrix24 JS SDK v0 на Bitrix24 JS SDK v1.