Colorize Bitrix24 CRM (Kanban + Lists)

Набор скриптов для окрашивания интерфейса CRM в коробочной версии Битрикс24:

• Канбан: сделки, лиды, смарт-процессы
• Списки (Grid): сделки, лиды, контакты, компании, смарт-процессы
• Поддержка нескольких языков/вариантов названий полей в канбане
• Устойчивость к динамической перерисовке (AJAX/SPA) и drag-and-drop

Проект рассчитан только на коробочную версию Битрикс24 и подключается без модификации ядра.

---

Скриншоты

Списки: компании

Списки: контакты

Канбан: сделки

Канбан: смарт-процессы

Списки: смарт-процессы

---

Как это работает

Окраска списков (Grid)

Скрипт grid-colorize.js:

• ищет значения в строках по td[data-column-id="..."] (ID полей),
• сопоставляет найденное значение с цветом из colorMap,
• окрашивает всю строку (ячейки + внутренние обёртки),
• автоматически реагирует на изменения DOM (фильтры, пагинация, подгрузка).

Окраска канбана

Скрипт kanban-colorize.js:

• в каждой карточке ищет поле по заголовку (title) в блоке “Поля карточки”,
• поддерживает несколько вариантов заголовка (fieldTitles) для разных языков,
• сопоставляет значение с цветом из valueMap,
• перекрашивает карточки при перерисовках и drag-and-drop.

---

Структура репозитория

Важно: пути в коде (/local/js/...) указываются относительно корня Битрикс24, а не корня репозитория.

Пример структуры в репозитории:

php_interface/init.php
local/js/mycrm/
├── kanban-colorize.js
└── grid-colorize.js
images/
├── Company list.png
├── Contacts List.png
├── Kanban Deals.png
├── SP kanban.png
└── SP list.png

---

Установка

1) Добавьте код в init.php

Откройте файл:

• /bitrix/php_interface/init.php (основной вариант), или
• /local/php_interface/init.php (если он реально подключается вашим проектом).

Далее добавьте туда код из файла этого репозитория:

• php_interface/init.php

Если у вас используется local/php_interface/init.php, убедитесь, что он подключается из /bitrix/php_interface/init.php через require, иначе код выполняться не будет.

---

2) Скопируйте JS в /local/js/

Скопируйте папку local/js/mycrm/ из репозитория в корень Битрикса, чтобы получилось:

/bitrix/
├── php_interface/
│ └── init.php
└── local/
└── js/
└── mycrm/
├── kanban-colorize.js
└── grid-colorize.js

---

Настройка под свой портал

Для адаптации достаточно изменить переменные в init.php.

1) $colorMap — значения → цвета

Словарь: значение (как отображается в интерфейсе) → цвет.

$colorMap = [
'критическое' => '#f6bebe',
'высокое' => '#fcffb3',
'повышенное' => '#a1bfff',
// Пример для другого языка
'极高' => '#f6bebe',
'高度关注' => '#fcffb3',
'已提升' => '#a1bfff',
];

2) $gridFieldIds — ID полей в списках (Grid)

Это data-column-id колонок, где лежит значение для окраски.

$gridFieldIds = [
'UF_CRM_XXXXXXX',
'UF_CRM_YYYYYYY',
];

3) $kanbanFieldTitles — заголовки поля в канбане (мультиязычность)

Это массив вариантов названия поля, которое отображается в карточке канбана.

$kanbanFieldTitles = [
'Степень внимания',
'Attention level',
'关注级别',
'关注级别 - Степень внимания',
];

Важно: Окраска карточки использует тот же $colorMap (на значение, а не на fieldTitle).

Совместимость: kanban-colorize.js поддерживает новый формат fieldTitles (массив) и старый fieldTitle (строка). Рекомендуется использовать только fieldTitles.

---

Поддерживаемые страницы

Логика определения страниц находится в init.php. Смарт-процессы поддерживаются через маршруты /page/*.

Списки (Grid)

• /crm/deal/list — сделки
• /crm/lead/list — лиды
• /crm/company/list — компании
• /crm/contact/list — контакты
• /shop/documents/contractors/list — контрагенты
• Смарт-процессы: /page/* (list / grid)

Канбан

• /crm/deal/kanban — сделки
• /crm/lead/kanban — лиды
• Смарт-процессы: /page/* (если в вашем портале канбан смарт-процессов доступен в этом разделе)

---

Отладка

Если раскраска не работает:

1) Включите debug-логи

В init.php поменяйте debug на true:

Для списков (Grid)

$config = [
'fieldIds' => $gridFieldIds,
'colorMap' => $colorMap,
'debug' => true, // включить логи
];

Для канбана

$config = [
'fieldTitles' => $kanbanFieldTitles,
'valueMap' => $colorMap,
'debug' => true, // включить логи
];

Откройте консоль браузера (F12) и проверьте, что:

• window.MyCrmColorizeConfig существует на страницах списков
• window.MyCrmKanbanColorizeConfig существует на страницах канбана
• JS-файлы не отдаются 404 (Network → JS)
• на странице канбана есть элементы .crm-kanban-item
• в карточке канбана поле действительно отображается (иначе в DOM его не будет)

2) Быстрые проверки в консоли

window.MyCrmKanbanColorizeConfig
document.querySelectorAll('.crm-kanban-item').length

---

Примечания

• Скрипты не требуют REST и не меняют ядро.
• Окраска строится строго на данных, которые уже отображаются в канбане/списке.
• Для канбана убедитесь, что нужное поле добавлено в отображение карточки (настройки канбана).