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

Розробка та налаштування модулів 1С-Бітрікс

Головна пастка Бітрікса — init.php. Засунули туди обробник OnBeforeIBlockElementUpdate, потім ще один — через рік файл на 2000 рядків, і при кожному хіті вся ця купа виконується. Ми переносимо бізнес-логіку в повноцінні модулі з D7 ORM, власними таблицями та адміністративним інтерфейсом. Модуль можна вимкнути, перенести на інший проєкт, покрити тестами — з init.php нічого з цього не вийде. Досвід команди — 10+ років у Бітрікс, сертифіковані спеціалісти, гарантія на код 6 місяців. Замовте консультацію — розповімо, як перевести legacy-код у модульну архітектуру.

Як модульна архітектура підвищує продуктивність?

Чому init.php — найгірше місце для бізнес-логіки?

Init.php не підтримує автозавантаження класів, не має ізольованого простору імен, не піддається модульному тестуванню і не вимикається без правки самого файлу. Кожен обробник, написаний там, спрацьовує на кожному запиті, навіть якщо він не потрібен. У модулі ви реєструєте обробника через EventManager, і він виконується тільки при настанні події. Різниця в продуктивності — до 3 разів при 10+ обробниках.

Стандартні модулі: типові проблеми та рішення

Інформаційні блоки. Архітектура ІБ — перше, що ми рев'юїмо на будь-якому проєкті. Класична помилка: один інфоблок каталогу з 80 властивостями, з яких 30 — множинні. Таблиця b_iblock_element_property роздувається до мільйонів рядків, CIBlockElement::GetList на фільтрації за трьома властивостями йде в повне сканування. Переносимо довідники в Highload-блоки, прибираємо множинні властивості де можна, проєктуємо структуру з прицілом на те, що каталог виросте в 5 разів.

Інтернет-магазин (sale). Бізнес-правила кошика — окрема історія. Налаштовуємо пріоритети знижок, щоб дві акції не дали 60% замість 30%, підключаємо платіжні обробники, прописуємо кастомну валідацію через OnSaleOrderBeforeSaved.

Пошук. Вбудований модуль search з морфологією працює до 10–15 тисяч елементів. Далі — Elasticsearch. Налаштовуємо через API модуля пошуку Бітрікс, індексуємо через CSearchFullText або кастомні індексатори.

Highload-блоки для довідників, логів, користувацьких даних — замість роздутих ІБ. Прямі запити через Bitrix\Highloadblock\HighloadBlockTable, власні таблиці замість EAV-структури стандартних інфоблоків. Мільйон записів — без деградації.

Поштові події. Налаштування — не лише шаблони в b_event_message. Головне — SPF, DKIM, DMARC на DNS, інакше транзакційні листи летять у спам. Перевіряємо доставність, налаштовуємо bounce-обробку.

Проектування інфоблоків для продуктивності

Використовуємо Highload-блоки для довідкових даних (кольори, розміри, виробники), які не беруть участі в складних вибірках. Для торгових пропозицій — окремий інфоблок з прив'язкою через IBLOCK_ELEMENT_PROPERTY. Увімкнемо INDEX_PROPERTY для часто фільтрованих властивостей. Кешування теговане: при зміні елемента скидається лише пов'язаний кеш. Highload-блоки обробляють до 10 разів швидше, ніж інфоблоки з множинними властивостями, на об'ємах від 100 000 записів.

Розробка кастомних модулів

Кожен модуль — за структурою /local/modules/vendor.modulename/:

• install/index.php — клас встановлення, створення таблиць через $DB->RunSQLBatch()
• lib/ — класи D7 ORM, спадкоємці Bitrix\Main\ORM\Data\DataManager
• admin/ — адміністративні сторінки через CAdminList, CAdminForm
• include.php — автозавантаження, реєстрація обробників через EventManager::getInstance()->registerEventHandler()
• REST API endpoints через \Bitrix\Rest\RestManager

Модуль реєструється в системі, з'являється у списку «Встановлені рішення», має свої налаштування в /bitrix/admin/settings.php?mid=vendor.modulename. Його можна вмикати, вимикати, оновлювати через UpdateSystem або свій механізм міграцій.

Приклади реалізованих завдань:

• Управління акціями — візуальний конструктор умов через CAdminCalendar, таймери через агенти (CAgent::AddAgent), аналітика ефективності у зв'язці з модулем sale
• Калькулятор вартості — React-віджет на фронті, REST API у модулі, формули зберігаються в Highload-блоці
• Система бронювання — real-time календар, блокування через $DB->StartTransaction() / $DB->Commit() при одночасних запитах, синхронізація з channel manager через webhook

Компоненти та композитний кеш

Кастомізація компонентів — через result_modifier.php і component_epilog.php, не через правку template.php стандартного шаблону. Так ядро оновлюється безболісно.

Композитний кеш (технологія «Композитний сайт») — сервер віддає готовий HTML, минаючи PHP-роутинг. Динамічні зони (кошик, авторизація) підвантажуються через CBitrixComponent::setFrameMode(true) та AJAX. TTFB падає до 30–50 мс. Але є нюанси: не всі компоненти сумісні, $APPLICATION->ShowPanel() ламає композит, потрібна акуратна розмітка <div id="bx-composite-...">.

Маркетплейс: аудит перед встановленням

Перед встановленням модуля з маркетплейсу — обов'язковий аудит. Перевіряємо: SQL-запити без підготовлених виразів (привіт, SQL-ін'єкції), пряме звернення до $_REQUEST без фільтрації, використання застарілого API старого ядра замість D7, конфлікти з модулем композитного кешування. Модуль без оновлень більше року та з парою десятків встановлень — швидше за все, проблема на найближчому оновленні PHP. Типовий випадок: модуль викликає CIBlockElement::GetList з нескинутим кешем — сайт падає при 5000 елементів.

Міграція на D7

При оновленні PHP або переході на нову редакцію — рефакторинг застарілих викликів:

• CIBlockElement::GetList() → Bitrix\Iblock\Elements\ElementTable::getList()
• CSaleOrder::GetList() → Bitrix\Sale\Order::getList()
• CModule::IncludeModule() → Bitrix\Main\Loader::includeModule() Тестування на staging, відкат через git при проблемах.

Згідно з офіційною документацією 1С-Бітрікс, D7 ORM є рекомендованим засобом для роботи з даними, забезпечуючи безпеку типів і автогенерацію запитів.

Порівняння підходів: Init.php vs Модуль

Вартість та склад розробки модулів

Що входить у розробку модуля?

• Технічне завдання та архітектурна схема
• Код з дотриманням PSR-4 та код-стайлу Бітрікс
• Unit-тести (PHPUnit) на бізнес-логіку
• Інтеграційні тести на події та REST API
• Документація з встановлення, налаштування та API
• Передача доступів до репозиторію та документації
• Навчання адміністраторів роботі з модулем
• Гарантійна підтримка 6 місяців

Орієнтовні терміни та складність:

Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проєкту.

Тестування модулів

Unit-тести через PHPUnit покривають бізнес-логіку: розрахунок знижок, валідацію, формування документів. Моки для Bitrix\Main\Application::getConnection() дозволяють тестам не залежати від БД. Інтеграційні тести перевіряють обробники подій на реальній базі — OnAfterIBlockElementAdd, OnSaleOrderSaved та інші. REST API endpoints тестуємо через curl або PHPUnit HTTP-клієнт. Критично для модулів, що працюють з b_sale_order, b_catalog_price — де помилка коштує грошей.

Сумісність перевіряється на PHP 7.4, 8.0, 8.1, 8.2 та редакціях: Стандарт, Малий бізнес, Бізнес. Перевіряємо конфлікти з популярними модулями маркетплейсу — вони люблять перехоплювати ті самі події. Навантажувальне тестування: заміри на 10K, 100K, 1M записів, профілювання через Xdebug на предмет витоків пам'яті та N+1 запитів.

Приклади з практики

Модуль акцій для мережі електроніки. Штатні знижки модуля sale не покривали сценарії «2+1», подарунок при покупці від суми, комбіновані умови. Зібрали візуальний конструктор: маркетолог створює правила через drag-and-drop, без тікетів у розробку. Календар акцій, автодеактивація через агенти, аналітика у прив'язці до b_sale_order — конверсія, середній чек, кількість застосувань. Час запуску нової акції впав з двох днів до півгодини.

Калькулятор для будівельників. Параметри (площа, матеріали, поверховість) → формула → попередній кошторис → заявка в CRM через CRest::call('crm.lead.add'). Регіональні коефіцієнти та сезонні націнки — з Highload-блоку, ціни матеріалів — з обміну з 1С. Кількість цільових заявок зросла на третину: клієнти бачать розбивку за статтями до дзвінка менеджеру.

Бронювання для мережі готелів. Real-time доступність через AJAX-запити до кастомної таблиці vendor_booking_slots, розрахунок тарифів за сезоном, синхронізація з Booking.com через channel manager API. Блокування номера при одночасному бронюванні — через SELECT ... FOR UPDATE у транзакції. Таймзони обробляються через \DateTimeZone — гість із Владивостока та менеджер із Москви бачать одну картину.

Оцінимо проєкт за 1 день. Пишіть — розповімо, що входить у розробку під ключ. Зв'яжіться з нами для консультації за вашим проєктом. Замовте розробку модуля під ключ — отримайте готове рішення з документацією та підтримкою.