Разработка кастомных представлений списков Битрикс24

Разработка кастомных представлений списков Битрикс24

Стандартные представления Битрикс24 — таблица и канбан — не всегда показывают данные в нужном разрешении. Например, у менеджера по продажам есть 5000 сделок, и ему нужно видеть их на карте для планирования встреч. Или проектному менеджеру требуется диаграмма Ганта для задач с зависимостями. Битрикс24 даёт механизм placement для встраивания собственных интерфейсов, но реализация требует понимания REST API, batch-запросов и клиентского кэширования. Мы разработаем кастомное представление, которое решит вашу задачу с учётом объёмов данных и бизнес-логики.

Почему стандартные представления не подходят?

Таблицы и канбаны не оптимизированы для географических данных, временных шкал или сложных зависимостей. Карта сделок ускоряет поиск клиентов рядом, календарь — drag-and-drop для дат, а Гант визуализирует критический путь проекта. В нашей практике проект для сети автодилеров: 3000 активных сделок на карте с группировкой по городам. Использовали Leaflet с MarkerCluster, batch-запросы через BX24.callBatch загружали данные за 4 секунды, геокодирование через Яндекс.Геокодер с кэшированием. Итог: менеджеры экономят 2 часа в день, операционные затраты снизились на 40%. Окупаемость такой реализации — менее полугода. Batch-запросы работают в 50 раз быстрее последовательных REST-запросов.

Как встроить кастомное представление через placement?

Placement — основной способ интеграции REST-приложений в интерфейс Битрикс24. Для списков CRM доступны точки: CRM_DEAL_LIST_TOOLBAR, CRM_ANALYTICS_TOOLBAR, а также отдельные разделы через LEFT_MENU. Приложение загружается в iframe, авторизуется через BX24.init() и получает контекст. Данные запрашиваются через REST: crm.deal.list, crm.item.list, tasks.task.list.

Три типовых кастомных представления

Карта. Сделки с адресами отображаются маркерами на Яндекс.Картах или Leaflet. Клик открывает карточку через BX24.openPath(). REST-запрос с полями ID, TITLE, UF_CRM_ADDRESS, STAGE_ID, OPPORTUNITY. Геокодирование — на бэкенде с кэшем.

Календарь. Элементы с датами (дедлайн, события) в месячном/недельном виде. Библиотека FullCalendar интегрируется за 1–2 дня. Drag-and-drop для переноса дат → вызов crm.deal.update.

Диаграмма Ганта. Задачи с зависимостями от DATE_START до DATE_END. DHTMLX Gantt (платная, полнофункциональная) или Frappe Gantt (open source, базовая). Данные из tasks.task.list или смарт-процесса.

Как решить проблему больших списков?

REST API лимитирует выдачи до 50 записей. Для сотен и тысяч элементов используем пагинацию через batch-запросы:

// Получаем total из первого запроса BX24.callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'} }, function(result) { var total = result.total(); var pages = Math.ceil(total / 50); // Формируем batch из параллельных запросов var batch = {}; for (var i = 0; i < pages; i++) { batch['page_' + i] = ['crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'}, start: i * 50 }]; } BX24.callBatch(batch, renderAll); }); 

До 50 команд в одном batch, при 5000+ элементах — последовательными пачками. На практике 2500 сделок загружаются за 3–5 секунд.

Фильтрация и синхронизация с основным фильтром

Два подхода:

• Свой фильтр. Настройка внутри приложения — проще, но пользователь видит два фильтра.
• Передача контекста. Через BX24.placement.info() получаете базовый контекст. Для полноценной синхронизации — кнопка "Показать на карте" в toolbar-placement считывает GET-параметры страницы (закодированный фильтр) и применяет их. Единый UX, но сложнее.

Кэширование на клиенте

Для часто используемых представлений (карта территорий, Гант проекта) применяем IndexedDB:

1. Первое открытие — полная загрузка данных через REST, сохранение в IndexedDB с меткой времени.
2. Повторное — рендеринг из кэша, фоновый запрос на обновление.
3. Инвалидация — по таймеру (каждые 5 минут) или через WebSocket (BX24 Push).

// Псевдокод: проверка кэша if (cacheValid() && !forced) { renderFromCache(); } else { fetchDataAndCache(); } 

Сравнение библиотек для Ганта

Что входит в работу

• Анализ бизнес-процессов и выбор оптимального представления.
• Разработка REST-приложения с placement.
• Интеграция библиотеки визуализации (Leaflet, FullCalendar, DHTMLX).
• Реализация batch-загрузки и кэширования.
• Тестирование на реальных объёмах.
• Документация и инструкция по эксплуатации.
• Гарантийная поддержка после сдачи.

Пошаговая реализация кастомной карты

1. Создайте REST-приложение с placement CRM_DEAL_LIST_TOOLBAR.
2. Настройте iframe и авторизацию через BX24.init().
3. Запросите данные через crm.deal.list с batch (код выше).
4. Отрендерите маркеры с кластеризацией.
5. Реализуйте кэширование в IndexedDB.
6. Добавьте синхронизацию с фильтром сделок.

Оценка трудозатрат

Основной риск — производительность при больших объёмах данных. Прототипируем на реальном объёме: если в CRM 20 000 сделок, представление должно работать с 20 000 сделками. Свяжитесь для оценки вашего проекта — мы подберём оптимальное решение и предложим сроки. Получите консультацию по вашему сценарию. Более 5 лет опыта, 50+ реализованных представлений.