UMD

Guide for using UMD version Bitrix24 JS SDK in you applications.

Add to you project

Include the library

You can include the library directly via CDN. Add the following <script> tag to your HTML file:

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

If necessary, download the UMD version of the library from unpkg.com and add it to your project.

Then include it in your HTML file:

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

Import

After including, the library will be available through the global variable B24Js.

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

Init

To work with Bitrix24 from the application built into the Bitrix24 interface use the B24Frame object.

It is initialized on the client side using initializeB24Frame().

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

try {
  // Initialize B24Frame instance
  let b24 = await B24Js.initializeB24Frame();
  
} catch (error) {
  logger.error('Some problems', { error })
}

Examples

B24Frame client-side

Here's a simple example demonstrating how to get a list of companies.

The code is expected to run in the Bitrix24 user interface.

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>
  // Create logger
  const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

  /**
   * Load company list
   */
  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;
    }
  }

  /**
   * Main application function
   */
  async function main() {
    try {
      // Initialize B24Frame instance
      let b24 = await B24Js.initializeB24Frame();

      // Load companies
      const companies = await loadCompanies(b24);

      // Further data processing...
      logger.info('Loaded ' + companies.length + ' companies');
    } catch (error) {
      logger.error('Some problems', { error })
    }
  }

  /// Start application after DOM load
  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>
  // Create logger
  const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

  /**
   * Load company list
   */
  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;
    }
  }

  /**
   * Main application function
   */
  async function main() {
    try {
      // Initialize B24Frame instance
      let b24 = await B24Js.initializeB24Frame();

      // Load companies
      const companies = await loadCompanies(b24);

      // Further data processing...
      logger.info('Loaded ' + companies.length + ' companies');
    } catch (error) {
      logger.error('Some problems', { error })
    }
  }

  /// Start application after DOM load
  document.addEventListener('DOMContentLoaded', function() {
    main();
  });
</script>
</body>
</html>

Node.js

Guide for installing Bitrix24 JS SDK in Node.js applications.

v0 to v1

A comprehensive guide to migrate your application from Bitrix24 JS SDK v0 to Bitrix24 JS SDK v1.