Список сущностей с пагинацией

Нужные scope: crm, user_brief.

Этот рецепт собирает типичную «страницу списка» — карточку с сортируемой таблицей, пагинацией и пустым состоянием — используя компоненты B24UI и actions.v2.callList.make().

Используемые компоненты

B24Card — контейнер страницы с header / body / footer.
B24Table — адаптивная таблица данных.
B24Pagination — навигация по страницам.
B24Empty — пустое / ошибочное состояние.
B24Button — действия.
B24Skeleton — плейсхолдер загрузки.

Набросок

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)
  // рендер <B24Table :items="items" /> и <B24Pagination :total="total" :page-size="pageSize" />
}

init().catch(console.error)

callList пагинирует, сортируя по idKey по возрастанию. Не передавайте пользовательский params.order — он может сломать пагинацию, создав пропуски. Сортируйте на клиенте после загрузки данных.

Полный исходник

Полная реализация на Vue + B24UI лежит в bitrix24/b24sdk-examples в демо entity-list.

Введение

Рецепты, сочетающие SDK с реалистичными сценариями — аналитика CRM, массовые рассылки, AI-ассистенты, установка по OAuth и не только. Каждый рецепт — отдельный файл, удобный для копирования.

Мастер установки

Многошаговый процесс установки, который создаёт пользовательские поля, регистрирует placement-ы, финализирует установку и празднует конфетти.