Перенос доработок коробочной версии Битрикс24 в мобильное приложение

• Проблема: две системы для одной работы
• Разрыв между десктопом и мобильным приложением Битрикс24
• Почему нельзя просто взять и переписать стандартный календарь
• Что и как доработали в мобильном приложении Битрикс24
  • Группировка запланированных концертов по площадкам
  • Отображение отделов и ответственных в карточке концерта
  • Расширенная детальная страница события
• Рабочий процесс в мобильном приложении: до и после

Возможности коробочной версии Битрикс24 на десктопе почти безграничны — ее функционал можно доработать под любые задачи и процессы. Но большинство доработок недоступны в мобильном приложении Битрикс24 — сотрудники, работающие в «полях», не могут полноценно пользоваться кастомными функциями. Специалисты вынуждены пересылать рабочую информацию в мессенджер, распечатывать или копировать в другой софт. Система становится разорванной, а инвестиции в ее внедрение не окупаются полностью.

С такой ситуацией столкнулся наш заказчик. Мы перенесли в мобильное приложение Битрикс24 доработки десктопной версии портала (которые, кстати, сами делали ранее) и помогли завести все процессы в контур корпоративного портала.

Проблема: две системы для одной работы

Клиент — современный концертный комплекс в Москве с выдающимися техническими и акустическими характеристиками. Плотность выступлений высокая, проходят они на трех площадках. К каждому событию сотрудники подготавливают помещения: настраивают звуковое и световое оборудование, выносят инструменты, оборудуют гримерку, кулисы и т.д.

Для управления концертной деятельностью в учреждении использовали специализированное ПО, но со временем его возможностей стало не хватать. Альтернативой стал Битрикс24 — ИНТЕРВОЛГА внедрила корпоративный портал и доработала под потребности заказчика. Подробнее об этом можно прочитать здесь.

Одна из добавленных функций — автоматическое создание и распределение задач по подготовке залов на основе загруженного райдера. Процесс устроен так, что задачи связаны с конкретными мероприятиями в календаре компании. В десктопной версии Битрикс24 их удобно просматривать: по клику на событие открывается страница с задачами каждого ответственного.

Таким образом, находясь у компьютера, сотрудник может перейти к списку своих поручений прямо из календаря. Однако большую часть рабочего времени специалисты проводят не за офисными столами, а на площадках.

В мобильном приложении Битрикс24 возможности стандартного календаря ограничены. Сотрудникам пришлось бы постоянно переключаться между ним и разделом «Задачи», вручную сопоставлять мероприятия и задания. Это неудобно, долго и могло закончиться путаницей при подготовке и сорванным концертом. Поэтому информацию о событиях и задачах дублировали в специализированное приложение, при этом рабочую коммуникацию уже вели в мобильном Битрикс24. Из-за этого специалистам приходилось часто «перепрыгивать» между приложениями.

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

Мобильный Битрикс24 должен был стать единой рабочей средой для «полевых» сотрудников. В приложении они могли бы видеть расписание мероприятий и связанные с ними задания, общаться с коллегами и читать корпоративные новости.

Отдельное пожелание — сделать новый интерфейс максимально похожим на «Темзу». В календаре должны быть детальные карточки концертов с задачами и ответственными, сетка мероприятий с разделением по залам.

В десктопной версии корпоративного портала, а значит, и на сервере Битрикс24 уже была вся необходимая информация — сущности и связи между ними. Оставалось вывести ее в мобильном приложении. Стандартный календарь не позволял это сделать:

• на превью карточки концерта может отображаться только его название и время;

• события идут сплошным списком с сортировкой по времени — нельзя разделить их по площадкам;

• нет возможности просмотреть в календаре план на неделю и месяц;

• в карточку концерта нельзя «подтянуть» данные об отделах и заданиях для каждого сотрудника в том же виде, что и на десктопе.

Ограниченные возможности стандартного календаря Битрикс24 фактически делали бесполезной автоматизацию создания и распределения задач, разработанную для десктопа. Поэтому мобильное приложение нуждалось в серьезной технической доработке.

Почему нельзя просто взять и переписать стандартный календарь

Одна из ключевых особенностей архитектуры мобильного приложения Битрикс24 — сильная связанность компонентов и модулей друг с другом. У них нет изолированной логики работы, и они могут корректно функционировать только в среде портала. Шаблоны и логика отображения контента вшиты в общий код: каждый компонент ожидает от бэкенда определённую структуру HTML и наличие специфических CSS-классов.

Поэтому доработать штатный компонент календаря из мобильного приложения Битрикс24 оказалось невозможным. Вместо этого мы решили добавить кастомный модуль, который не заменит стандартный, а будет работать параллельно с ним. Основой для него стал дефолтный шаблон календаря десктопного приложения Битрикс24.

Он тоже с особенностями. Компонент написан с использованием собственной библиотеки скриптов BX. Она обеспечивает совместимость с бэкендом, но слабо оптимизирована под мобильные устройства. Код десктопного календаря, как любого другого компонента, не предполагает, что его логику будут изменять.

Были и другие ограничения, мешающие быстро превратить шаблон в модуль для мобильного приложения:

• некорректное выделение логических частей кода в отдельные файлы;

• устаревший смешанный синтаксис (JavaScript + BX);

• сложная логика обработки данных с бэкенда;

• при загрузке страницы с календарем «подтягиваются» данные обо всех событиях за месяц — когда их много, это замедляет работу приложения.

Но всё, что нас не убивает, делает только сильнее — мы справились со всеми сложностями.

Что и как доработали в мобильном приложении Битрикс24

Мы проанализировали интерфейс приложения, от которого заказчик планировал отказаться в пользу Битрикс24, и разработали макеты нового мобильного календаря. На их основе составили список функций и шаблонов верстки, которые нужно добавить к базе. С помощью самописных модулей, которые «наслаиваются» на основную логику, реализовали дополнительные возможности кастомного календаря.

Группировка запланированных концертов по площадкам

После перехода в новый раздел приложения открывается мини-календарь, под которым отображается список концертов на текущую дату. Даты при необходимости можно скрыть, оставив только перечень мероприятий. Они отсортированы по времени и сгруппированы по площадкам, на которых проводятся. Для наглядности карточки событий промаркированы: легко запомнить, какому из трех залов соответствует конкретный цвет.

Между мини-календарем и списком концертов находятся вкладки «Неделя» и «Месяц». При выборе любой из них загружается полноценная сетка мероприятий на период. Каждому столбцу соответствует концертная площадка, а даты находятся слева. Таблицу можно свайпить, чтобы посмотреть все события.

Сотрудники концертного зала привыкли работать в таком интерфейсе, поэтому замена одного приложения на другое прошла почти бесшовно.

Отображение отделов и ответственных в карточке концерта

При выводе списка концертов на конкретную дату в карточке отображается не только название и время, но ещё ответственные за подготовку отделы и сотрудники. Интерфейс получился компактным, но информативным. Пролистывая перечень мероприятий на день, специалист сразу видит, где он задействован — это помогает лучше планировать работу и выполнять задачи в срок.

Расширенная детальная страница события

Самая важная доработка — детальная страница события. Мы добавили на неё блок «Ответственные по мероприятию». Он содержит список отделов и цехов, рядом с ними указаны конкретные специалисты. Информация о задачах каждого по умолчанию скрыта: чтобы просмотреть поручения, нужно тапнуть название отдела или аватар сотрудника.

Во-первых, такой подход позволил сделать интерфейс максимально компактным — пользователю не нужно скроллить полотна текста, чтобы добраться до своей фотографии. Во-вторых, это ускоряет работу приложения: информация не просто «спрятана» — она загружается с сервера только по тапу. Если бы при открытии страница загружалась полностью, пользователю приходилось бы дольше ждать.

Аналогичный метод применяется к загрузке данных на детальной странице концерта. Сервер отвечает на запрос по тапу на конкретную карточку, а не отдает данные по всем мероприятиям за месяц — а их может быть около 100. Чтобы реализовать динамическую подгрузку контента, мы использовали шаблон «Мастер-деталь».

Рабочий процесс в мобильном приложении: до и после

Теперь «полевые» сотрудники концертного зала полностью работают только в мобильном приложении Битрикс24: проверяют график мероприятий, принимают задачи, общаются с коллегами и узнают новости учреждения.

Как выглядит процесс работы технического специалиста в доработанном приложении:

Итог: вся работа — внутри одного раздела, без сопоставления концертов, площадок и задач. Если сотрудник и переключается между разделами, то для переписки в мессенджере или чтения живой ленты.

Теперь все процессы по управлению концертной деятельностью собраны в одной системе. Автоматизация, разработанная для десктопной версии Битрикс24, заработала и в «поле». Заказчик отказался от параллельного использования стороннего ПО — необходимость дважды вносить данные о мероприятиях и задачах отпала. Это позволило сотрудникам сосредоточиться на работе в одном приложении, исключить путаницу между системами и сократить расходы на поддержку и лицензирование дополнительного софта.

Если функционал коробочной версии вашего Битрикс24 доработан, но «полевые» сотрудники не могут им пользоваться — мы знаем, как перенести логику и интерфейс доработок в мобильное приложение. Заполните форму внизу — мы проведем аудит вашего Битрикс24 и составим детальный план по переносу функциональности в минимальные сроки.