Цифры они и в Африке цифры. Но заказчик нынче стал привередлив, требует красоты в выводе данных.
Много раз мне намекали, что лучше выгрузить данные в какой-нибудь повер би ай и смотреть там. Потому что руководство молодежь и отдают приоритет форме, а не содержанию.
Долго думал о том, как сделать все в среде 1С, но визуал поднять на порядок.
А теперь смешное. Инструмент, который снимает почти все эти ограничения, лежит в платформе годами и называется «Поле HTML». Обычный реквизит формы типа Строка, которому на форме назначен вид «Поле HTML». Кладешь в него строку с версткой, и встроенный движок отображения рисует ее как маленький браузер: таблицы с нормальными отступами, градиенты, скругления и т.д. все то, чего так не хватает в отчетах.
## Почему этим почти никто не пользовался
Причина ровно одна: руками верстать HTML внутри 1С трудоемко. Ты склеиваешь строку из десятков кусков, экранируешь кавычки, ловишь незакрытый div, а потом меняешь один отступ и пересобираешь все заново. На третьем отчете желание красоты пропадает, и ты возвращаешься к родной СКД. Я сам так делал: пара смелых экспериментов с HTML, а дальше «да ну его, СКД быстрее».
Поменялось это с приходом нейросетей. Верстка - ровно та задача, которую ИИ делает отлично и мгновенно. Ты говоришь «заверстай карточку клиента: слева ФИО и телефон, справа сумма долга крупно и красным, снизу список последних отгрузок таблицей», кидаешь пример данных - и получаешь готовый кусок HTML с CSS.
Вставляешь в функцию, подставляешь свои поля через параметры, и все. То, на что раньше уходил вечер, теперь занимает пять минут.
И тут появляется прием, который делает всю схему удобной в поддержке. Верстку надо вынести в отдельную функцию, которая принимает данные и возвращает готовую строку HTML. Не мешать сборку разметки с бизнес-логикой, а держать ее сбоку. Тогда любую правку оформления можно снова поручить нейросети: «вот функция СобратьКарточку, вот как выглядит результат, сделай сумму больше и добавь бейдж статуса». Логика запроса при этом не трогается вообще. Получается разделение, знакомое любому веб-разработчику: данные отдельно, представление отдельно.
## Схема простая
Запрос отдает результат. Дальше не выводим его в табличный документ, а превращаем в HTML и кладем в поле на форме. Один запрос - сколько угодно вариантов отображения, и все они живут в отдельных функциях верстки. Захотел добавить график или сводку сверху - дописал еще одну функцию, запрос не изменился.
## Живой пример: длинные операции с прогрессом
Самое эффективное применение я нашел на одном проекте, когда у заказчика ежеминутно менялись требования к форме вывода данных. Изменились требования- скормил новую вводную ИИ, через секунды получил обновленную функцию с "версткой". Мне кажется, с учетом вайб-кодинга, скоро на форме будет только одно поле html и пару кнопок, вроде запустить и остановить.
Также подход пригодился в обработках, которые крутятся длительное время. У меня был проект, где шла тяжелая выгрузка с синхронизацией, и людям хотелось видеть не крутящийся индикатор «идет обработка», а что именно происходит: сколько сделано, что сейчас в работе, где споткнулось. Понятно, что это можно и штатно сделать, но через "HTML" визуально приятнее. Прогресс-бар сайто-подобный, строки добавляются на глазах, проблемные подсвечиваются.
Чтобы показать саму механику без привязки к конкретной задаче, я собрал маленькую обработку. Там все упрощено, для стенда она выводит десять тысяч строк, порциями, с живым прогрессом и кнопкой «Стоп». Никакой магии и никаких внешних библиотек, только поле HTML и обработчик ожидания.
Ключевая мысль тут вот в чем: длинный цикл нельзя гонять на сервере в лоб, иначе клиент замрет и ничего не покажет до самого конца. Правильно отдавать данные порциями, а рисовать по таймеру на клиенте. Клиент раз в секунду просит у сервера следующую пачку строк, подрисовывает их в HTML и двигает прогресс. Заодно появляется честная кнопка «Стоп», которая реально останавливает процесс, а не делает вид.
## Одна вещь, про которую забывают
Раз мы кладем в HTML данные из базы, их надо экранировать. Наименование контрагента с амперсандом или угловой скобкой сломает вам верстку, а то и покажет не то, что вы ждали. Поэтому все значения перед вставкой прогоняем через простую замену спецсимволов.
## Где не надо
Чтобы не выглядело как «серебряная пуля». Если нужен обычный табличный отчет, который печатают и выгружают в Excel, делайте все штатно. Поле HTML не про печать и не про выгрузку, оно про экран и про красоту на нем. Интерактива в нем меньше, чем в настоящем браузере: клики по элементам ловятся ограниченно. И меру надо знать, а то недолго превратить учетную систему в пестрый лендинг, где важные цифры тонут в градиентах.
Но для дашбордов, карточек, мониторов и красивого показа хода длинных операций это отличный и давно доступный инструмент. Просто раньше он упирался в трудоемкость верстки, а теперь этот барьер убрали. Попробуйте на одном отчете, который вас особенно бесит своей серостью. Обратно на голую таблицу уже не захочется.
## Где пригодилось
Еще пару моментов, что в итоге у меня получилось сделать через этот механизм:
- делать расшифровки данных (помучился, но нашел способ)
- выводить таблички, с закреплением колонок и строк, с красивым выделением строки;
- красиво делать разные канбан карточки и им подобное;
- сворачиваемые блоки данных, разные визуальные красивые элементы. Почти как на сайте, но с поправкой на возможности 1С
## Сложности, с которыми можно столкнуться
- ИИ генерирует как для полноценного браузера. Всегда подправляйте, что будет отображаться в1С
- не с первого раза получается довести таблицы до ума- закрепление областей, адаптивность, расшифровки данных;
- у ИИ свое чувство прекрасного. Не всегда размеры шрифтов, цветов подходят с первого раза, если не было начальных установок.
В комментариях интересно почитать, кто и как выкручивался с оформлением в 1С до этого. И если применяете поле HTML в бою - расскажите на чем, любопытно собрать живые сценарии.
Проверено на следующих конфигурациях и релизах:
- Управление торговлей, редакция 11, релизы 11.5.27.79
Вступайте в нашу телеграмм-группу Инфостарт