Как добавить подсветку синтаксиса в дизайнер бизнес-процессов Битрикс24, если редактор не помогает разобраться в формулах

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

Если формулы простые и короткие, это не создает серьезных проблем. Но в компаниях, где бизнес-процессы содержат сложные условия, вложенные выражения и множество переменных, это становится ощутимым ограничением.

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

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

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

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

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

Для решения этой проблемы мы разработали набор инструментов для работы с Битрикс24. Первый инструмент в нем – браузерное расширение, которое добавляет подсветку синтаксиса прямо в интерфейс дизайнера бизнес-процессов, без изменения самой платформы и без нагрузки на систему.

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

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

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

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

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

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

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

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

Для коробочных порталов с нестандартными доменами предусмотрено добавление адреса портала вручную через меню расширения. Облачные порталы на домене Битрикс24.ру подключаются автоматически.

На текущий момент расширение устанавливается в локальном режиме через режим разработчика в браузере. В ближайшее время оно будет опубликовано в официальных сторах Google Chrome и совместимых браузеров.

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

Чем сложнее бизнес-процессы в компании и чем больше в них вложенных условий и переменных – тем ощутимее эффект от подсветки.

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

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

📖 Подробнее о решении

Будем на связи!

🎬 Смотреть: YouTube, VK Видео, RuTube

📡 Не пропустите:
Канал “Интегратор с сапогами”Пишем о реальной жизни IT-интегратора: факапы, клиенты, CRM, продажи, автоматизация, ИИ, странные задачи и решения, проверенные нервами, деньгами и практикой.
Канал ★ 5 УГЛОВ о Битрикс24Пишем исключительно о Битрикс24 – про внедрение, развитие и поддержку Битрикс24 (практические решения, сложные кейсы, модули и системный подход)
👉 Все наши каналы и блоги