Розробка кастомних представлень списків Бітрікс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+ реалізованих представлень.