Битрикс24 это одна из самых популярных облачных платформ для управления проектами и взаимодействия внутри компании. В системе есть мощный таск-трекер и полезные встроенные инструменты, включая диаграмму Ганта. При этом платформа открыта для доработок и предоставляет доступ к REST API для интеграции сторонних приложений и расширения системы.
Такая возможность весьма кстати, ведь стандартная диаграмма Ганта в Битрикс имеет ограничения, из-за чего не всегда подходит для сложных проектов. Это затрудняет наглядное планирование сложных проектов и анализ загрузки команды. Сегодня мы рассмотрим слабые стороны стандартной диаграммы Ганта в Битрикс24 и поговорим о том, как все исправить с помощью интеграции Webix Gantt.
Диаграмма Ганта в Битрикс 24: возможности и ограничения
Источник: Диаграмма Ганта: как установить связь между задачами
В диаграмме Ганта в Битрикс можно отследить дату начала и конца каждой задачи, проверить дедлайны и получить краткую информацию о задаче (постановщик, исполнитель, статусы и т. п.). Из базовых функций доступны создание и редактирование задач и подзадач, перемещение блоков по сетке для переноса сроков и установка зависимостей между задачами. Можно менять масштаб диаграммы, группировать задачи по проектам или исполнителям и скрывать ненужное, задавать цветовую схему для задач, фильтровать отображаемые поля (исполнитель, приоритет и др.).
Эти функции диаграммы Ганта в Битриксе подходят для базового планирования, но при работе над сложными проектами можно обнаружить ряд ограничений:
- Ограниченное отображение ресурсов и исполнителей. Гант в Битриксе показывает задачи и их сроки, но не показывает, кто и насколько загружен. Задачи нескольких сотрудников выводятся неявно, а взаимосвязи с загрузкой команды не видны. Из-за этого трудно понять, кто из сотрудников перегружен, а где есть свободные ресурсы;
- Нехватка гибкости временного масштаба. Интерфейс Битрикс24 позволяет переключаться между типовыми масштабами (день, неделя, месяц), но в нём нет возможности гибко задавать произвольные интервалы или настраивать шаг шкалы. В крупных проектах иногда нужно детальнее видеть одни периоды и сжимать другие, чего не хватает в стандартной диаграмме Ганта в Битрикс24;
- Ограниченные визуальные настройки. Цвета задач задаются системой (например, по статусу) и вариантов кастомизации не так много. Нельзя быстро выделять на диаграмме задачи по своим критериям (важные задачи, разные виды ресурсов и т.д.). Визуальные метки ограничены, например, нет возможности отмечать вехи особыми иконками или цветами;
- Минимальная интерактивность и аналитика. Гант в Битриксе позволяет перетаскивать сроки задач и указывать зависимости, но в нем нет, например, автоматического пересчёта при изменении нескольких задач, встроенного расчёта критического пути или анализа перегрузок. При изменениях структуры проекта придётся много что редактировать вручную.
Как видим, стандартный Гантт в Битрикс24 не очень хорошо подходит для управления ресурсами в сложных проектах. Вам нужно отслеживать загрузку каждого участника команды, гибко задавать временные интервалы и приоритизировать задачи, а необходимого функционала под рукой нет. В таких случаях можно найти стороннее решение и интегрировать его в привычную среду Битрикс24. Одним из решений может стать Webix Gantt, готовый комплексный виджет их JS UI библиотеки Webix.
Альтернатива стандартной диаграмме Ганта в Битриксе — Webix Gantt
Если возможностей стандартной диаграммы Ганта в Битриксе не хватает, можно взять готовый компонент и кастомизировать его. На эту роль может подойти Webix Gantt. Это JavaScript‑виджет для создания интерактивных диаграмм Ганта с богатым функционалом.
Готовое комплексное решение
Webix Gantt разработан специально для управления проектами и ресурсами в любых масштабах. Виджет позволяет создавать любое количество задач, проектов и подзадач и отслеживать их прогресс в реальном времени. Его можно использовать как самостоятельное приложение или встроить в Битрикс24 без необходимости разрабатывать диаграмму с нуля.
Простая интеграция и настройка
Webix Gantt легко подключается к любому стеку разработки. Он поддерживает работу с бэкендом на PHP, Node.js, Golang или .NET и умеет работать со всеми популярными фронтенд-фреймворками (React, Angular, Vue и др.).
Гибкая кастомизация через API
Через API можно тонко настраивать виджет без правки исходных файлов. Любые элементы (шкалы времени, заголовки, цвета задач и др.) меняются через настройки и колбэки, не затрагивая библиотеку.
Например, можно автоматически раскрашивать задачи по статусам или типам, добавлять собственные иконки и подписи к вехам, изменять размеры и формат временной шкалы (менять шаги с «день-месяц» на «рабочая неделя» и др.). Благодаря открытому API можно легко добавить обработчики нажатий, контекстные меню или отображение подсказок.
Широкий набор возможностей
Webix Gantt поддерживает полноценное управление задачами, проектами и ресурсами. Ключевые функции включают:
- Задачи, проекты, вехи (milestones). Можно выделять крупные этапы проекта отдельными вехами, а задачи группировать по проектам;
- Критический путь и подзадачи. Виджет автоматически находит цепочку зависимых задач, которая не допускает задержек (критический путь). Подзадачи и иерархия задач отображаются с возможностью разворачивания/сворачивания;
- Управление ресурсами и их загрузкой. К каждой задаче можно назначать одного или нескольких исполнителей (ресурсов). Гант в Битриксе сможет отображать ресурсную панель: сколько задач и на какие даты приходится на каждого сотрудника. Есть специальный режим «диаграмма ресурсов», где показано распределение нагрузки по людям или группам;
- Сложные временные шкалы и масштабирование. Webix Gantt позволяет динамически переключать уровень детализации времени: дни, недели, месяцы, годы, либо настраиваемые интервалы. Есть приближение по оси времени для детального или «отвлеченного» обзора проекта;
- Исключение выходных и праздников. Можно автоматически исключить нерабочие дни (выходные, праздники) из расчёта сроков задач, чтобы план строился по рабочему времени;
- Цветовая индикация и метки. Задачи можно выделять цветом по статусу или любому другому признаку. Можно добавлять маркеры «Сейчас» или особые точки начала/конца проекта, чтобы видеть актуальный прогресс.
Реальный кейс интеграции Webix Gantt в Битрикс24
Источник: Расширенный Гант для управления проектами в Bitrix
Давайте посмотрим на практический пример внедрения Webix Gantt в интерфейс Битрикс24. Клиент из управляющей компании, занимающейся эксплуатацией и управлением коммерческими и жилыми объектами, обратился к нам с просьбой расширить функционал системы Bitrix24. Управляющая компания выполняет ряд взаимозависимых работ на различных объектах жилого комплекса, включая архитектурное проектирование, дизайн, шеф-контроль, согласования, ландшафтные и ремонтные работы.
Наша задача состояла в том, чтобы повысить наглядность планирования и лучше визуализировать загрузку сотрудников по задачам. Для этого было создано собственное приложение, которое запускается на сервере компании и взаимодействует с Битрикс24 через REST API. Для пользователей интегрированное приложение кажется частью самой системы.
Через API приложение получает из Битрикс24 список проектов, задач, их статусы, а также информацию об исполнителях. При изменении данных в диаграмме Ганта приложение отправляет запросы к API Битрикс24, обновляя статусы задач или создавая новые записи. При необходимости можно подгружать дополнительные внешние источники (например, свои базы данных) и синхронизировать их с задачами.
Как мы внедрили Webix Gantt в Битрикс24
1. Создание локального веб-приложения
Разработчики начали с создания базового локального приложения, которое состоит из:
- Клиентской части (Frontend): index.html, который содержит структуру страницы и контейнер для диаграммы Ганта и JavaScript код, который подключает Webix Gantt, инициализирует диаграмму и настраивает ее поведение (редактирование, перетаскивание, отображение ресурсов);
- Серверной части (Backend): server.js, реализованный на Node.js, который обрабатывает все запросы от клиентской части, взаимодействует с REST API Битрикс24 и возвращает данные обратно в диаграмму Ганта.
Узнать больше о работе с Webix Gantt вы можете на странице документации или из примеров кода JS Gantt.
2. Создание публичного URL для тестирования и интеграции
Нужно было предоставить Битрикс24 возможность доступа к локальному приложению через интернет. Для этого разработчики использовали ngrok, который создаёт публичный URL без необходимости деплоить приложение. Вот пример команды:
Где 3000 — это порт локального Node.js-сервера. Таким образом, ngrok предоставляет уникальный публичный URL, который перенаправляет все запросы на локальный сервер.
3. Подключение приложения к Битрикс24
Далее разработчики зарегистрировали приложение в Битрикс24, чтобы сделать его частью рабочей среды. Для этого нужно было:
- Открыть раздел “Разработчикам” -> “Другое” -> “Локальное приложение”;
- Добавить публичный URL, ранее полученный от ngrok;
- Настроить права доступа, необходимые для работы, например, доступ к задачам и пользователям;
- Добавить приложение в главное меню для легкого доступа.
После этого локальное приложение стало доступным через интерфейс Битрикс24.
4. Получение токена для взаимодействия с REST API Битрикс24
Необходимо было получить токен Битрикс24. Этот уникальный идентификатор нужен внешним приложениям вроде нашего для взаимодействия с Битрикс через REST API. Библиотека BX24 предоставляет удобный способ получения токена авторизованного пользователя на клиенте, например, вот так:
const auth = BX24.getAuth();
const accessToken = auth.access_token;
console.log('Access Token:', accessToken);
});
5. Пример взаимодействия с API Битрикс24: получение информации о пользователе
После описанных приготовлений клиентская часть могла передавать полученный токен на наш Node.js-сервер. Пример клиентского кода:
const auth = BX24.getAuth();
const accessToken = auth.access_token;
const user = await fetch('/api/user', {
headers: {
Authorization: 'Bearer ' + accessToken
}
}).then(res => res.json());
console.log('User info:', user);
});
Node.js-сервер, в свою очередь, мог использовать этот токен для выполнения вызовов к REST API Битрикс24. Пример серверного кода:
const accessToken = (req.headers.authorization || "").replace("Bearer ", "");
if (!accessToken) {
return res.status(401).json({ error: "No token" });
}
try {
const response = await axios.post(
`${DOMAIN}/rest/user.current.json`,
{},
{ params: { auth: accessToken } }
);
res.json(response.data.result);
} catch (err) {
console.error("Failed to fetch user info:", err.response?.data || err.message);
res.status(500).json({ error: "Failed to fetch user info" });
}
});
6. Двусторонняя синхронизация данных
Это был самый важный этап, который превратил статическую диаграмму в живой инструмент управления. В основе двусторонней синхронизации лежат две функции:
- Загрузка данных в Webix Gantt. При запуске приложение через сервер запрашивает из Битрикс24 список проектов, задач, исполнителей и статусов. Эти данные преобразуются в формат, понятный Webix Gantt, и загружаются в диаграмму;
- Сохранение изменений в Битрикс24. При любом действии пользователя в диаграмме Ганта (создание, редактирование, перемещение задачи, изменение зависимостей) клиентское приложение отправляет соответствующий запрос на наш сервер. Сервер использует токен доступа и вызывает нужный метод REST API Битрикс24 для синхронизации изменений.
Результаты интеграции
Диаграмма Ганта для нескольких человек в Битрикс. На одной странице проекта сразу видны задачи разных сотрудников. Менеджер может сравнить их загрузку, а при необходимости перераспределить задачи между людьми.
Цветные статусы и прогресс. Задачи чётко выделяются цветом по своему состоянию и проценту завершения, что обеспечивает быстрый визуальный анализ.
Отслеживание критических этапов. Отображение критического пути позволяет системе подсвечивать последовательность задач, влияющую на сроки проекта. Это помогает менеджеру быстро фокусироваться на узких местах.
Наглядная картина проекта. На единой интерактивной диаграмме видны все задачи, сроки, исполнителей и ресурсы проекта. Пользователь может прокручивать временную шкалу, быстро смотреть «срезы» по любому исполнителю или фильтровать задачи. Интерфейс остаётся отзывчивым и при изменениях сразу обновляются данные.
Заключение
Интеграция Webix Gantt в Битрикс24 позволяет превратить стандартный Гант в мощный и гибкий инструмент планирования. Любая команда может получить наглядный и настраиваемый инструмент контроля над проектами, в котором видны не только сроки задач, но и загрузка исполнителей, зависимые этапы, ключевые вехи и риски.
Попробуйте Webix Gantt для вашего Битрикс24 и посмотрите, как можно управлять проектами на новом уровне.
