Entity List with Pagination

Required scopes: crm, user_brief.

This recipe assembles a typical "list page" — a card with a sortable table, pagination, and an empty state — using B24UI components and actions.v2.callList.make().

Components Used

B24Card — page container with header / body / footer.
B24Table — responsive data table.
B24Pagination — page navigation.
B24Empty — empty / error state.
B24Button — actions.
B24Skeleton — loading placeholder.

Sketch

import { initializeB24Frame, EnumCrmEntityTypeId, type B24Frame } from '@bitrix24/b24jssdk'

type Company = { id: number, title: string, createdTime: string }

let $b24: B24Frame
const pageSize = 50
let page = 1

async function fetchPage(currentPage: number): Promise<{ items: Company[], total: number }> {
  const response = await $b24.actions.v2.callList.make<Company>({
    method: 'crm.item.list',
    params: {
      entityTypeId: EnumCrmEntityTypeId.company,
      filter: { '>ID': 0 },
      select: ['id', 'title', 'createdTime']
    },
    idKey: 'id',
    requestId: `companies-page-${currentPage}`
  })

  if (!response.isSuccess) {
    throw new Error(response.getErrorMessages().join('; '))
  }

  const items = response.getData() ?? []
  const total = items.length

  const offset = (currentPage - 1) * pageSize
  return { items: items.slice(offset, offset + pageSize), total }
}

async function init() {
  $b24 = await initializeB24Frame()
  const { items, total } = await fetchPage(page)
  // render <B24Table :items="items" /> and <B24Pagination :total="total" :page-size="pageSize" />
}

init().catch(console.error)

callList paginates by sorting on idKey ascending. Don't pass a custom params.order — it can break pagination by creating gaps. Sort client-side after the data is fetched.

Full Source

The full Vue + B24UI implementation lives in bitrix24/b24sdk-examples under the entity-list demo.

Introduction

Recipes that pair the SDK with realistic scenarios — CRM analytics, mass messaging, AI assistants, OAuth installs, and more. Each recipe is a single, copy-paste-friendly file.

Installation Wizard

Multi-step install flow that creates user fields, registers placements, finalises the installation, and celebrates with confetti.