Как реализовать полноценную форму на HTML в 1С:Предприятие 8.3

← На главную

Стандартный функционал управляемых форм 1С иногда накладывает ограничения на визуализацию и интерактивность интерфейса. В таких случаях разработчики обращаются к использованию Поля HTML документа. Это позволяет внедрять в систему современные веб-технологии: от всплывающих окон (popups) до сложных интерактивных диаграмм (поможет конструктор настраиваемых панелей виджетов и дашбордов в 1С) и полноценных SPA-приложений на базе Vue.js или React. В данной статье мы разберем, как спроектировать такую форму, организовать обмен данными и использовать возможности современных движков внутри 1С.

Основные принципы создания HTML-интерфейса в 1С

Для начала проанализируем базовую архитектуру. В 1С HTML-контент отображается с помощью элемента формы «Поле HTML документа». Рассмотрим пошагово, как инициализировать такую форму:

Создадим реквизит формы с типом Строка (неограниченной длины). Назовем его, например, ТекстHTML.
Вынесем этот реквизит на форму. В свойствах элемента формы укажем «Вид» — Поле HTML документа.
Для отображения страницы достаточно присвоить этому реквизиту строку с HTML-кодом.

Рассмотрим пример простейшей инициализации в коде 1С:


&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
    ТекстHTML = 
    "<html>
    |<body style='background-color: #f0f0f0;'>
    |   <h1>Привет из HTML!</h1>
    |   <button onclick='sendTo1C()'>Нажми меня</button>
    |</body>
    |</html>";
КонецПроцедуры

Важно помнить, что в современных версиях платформы (начиная с 8.3.14) 1С использует движок на базе Chromium. Это открывает доступ к CSS Grid, Flexbox и современным стандартам JavaScript (ES6+), что позволяет более гибко настраивать стили интерфейса и значительно упрощает верстку по сравнению со старым движком Internet Explorer.

Взаимодействие из 1С в HTML (JavaScript)

Часто возникает задача передать данные из базы 1С в открытую HTML-страницу или вызвать JS-функцию. Для этого мы проанализируем объектную модель документа (DOM), доступ к которой осуществляется через свойство элемента формы Документ.

Разберем пример вызова функции JavaScript из кода 1С. Допустим, в HTML-коде определена функция updateData(newText). Мы можем вызвать её следующим образом:


&НаКлиенте
Процедура ВызватьJSФункцию()
    // Получаем COM-объект окна браузера
    ОкноБраузера = ЭтаФорма.Элементы.ТекстHTML.Документ.defaultView;
    // Вызываем функцию с передачей параметра
    ОкноБраузера.updateData("Новое значение из 1С");
КонецПроцедуры

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

Взаимодействие из HTML в 1С: классический и современный методы

Обратная связь — от HTML-страницы к 1С — реализуется чуть сложнее. Рассмотрим два основных подхода.

Метод 1: Использование события «ПриНажатии» и скрытых элементов

Этот метод считается классическим. Суть заключается в том, что любое нажатие в поле HTML вызывает событие 1С ПриНажатии, в которое передается объект элемента, по которому кликнули.

В HTML создаем невидимый элемент <div id='comm-link' style='display:none'></div>.
В JavaScript, когда нужно вызвать 1С, записываем команду в innerHTML этого блока и программно вызываем событие click().
В 1С обрабатываем событие ПриНажатии.

Пример реализации в 1С:


&НаКлиенте
Процедура ТекстHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    // ДанныеСобытия.Element содержит COM-объект элемента, по которому нажали
    Если ДанныеСобытия.Element.id = "comm-link" Тогда
        СтандартнаяОбработка = Ложь; // Прерываем стандартное действие
        Команда = ДанныеСобытия.Element.innerHTML;
        ВыполнитьКомандуИзHTML(Команда);
    КонецЕсли;
КонецПроцедуры

Метод 2: Навигационные ссылки (v8callback)

Более современный и изящный способ — использование изменения window.location.href с произвольной схемой. Вы можете использовать строку вида v8callback://myCommandName?param=123. В 1С это можно перехватить в обработчике события ПриНажатии или через анализ навигации. Платформа Chromium отлично отрабатывает такие переходы без перезагрузки страницы, если правильно настроить заголовки.

Использование внешних библиотек и фреймворков

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

Хранение кода: Скрипты (Vue.js, React, Chart.js) и стили (Bootstrap, Tailwind) лучше всего хранить в конфигурации как Макеты с типом «Текстовый документ» или «Двоичные данные».
Сборка страницы: При запуске формы программно собирайте итоговый HTML, подставляя текст скриптов из макетов в теги <script>. Похожим образом реализуется выгрузка данных в автономное дерево HTML.
Интерактивность: Для построения дашбордов используйте библиотеку ECharts. Она позволяет отрисовывать графики, которые по качеству и возможностям анимации в разы превосходят стандартные диаграммы 1С — для этого подойдёт оперативный дашборд показателей в 1С через HTML-интерфейс.

Пример подгрузки скрипта из макета:


&НаСервере
Функция СформироватьHTML()
    ТекстШаблона = Обработки.МояОбработка.ПолучитьМакет("ШаблонHTML").ПолучитьТекст();
    ТекстБиблиотеки = Обработки.МояОбработка.ПолучитьМакет("VueJS").ПолучитьТекст();
    
    // Вставляем библиотеку прямо в тело шаблона
    Результат = СтрЗаменить(ТекстШаблона, "[VUE_LIBRARY]", ТекстБиблиотеки);
    Возврат Результат;
КонецФункции

Отладка и инструменты разработчика

Одной из самых больших проблем раньше была невозможность отладить JS-код внутри 1С. В современных версиях на движке Chromium мы можем использовать полноценный DevTools. Чтобы вызвать инспектор кода, в большинстве случаев достаточно нажать правую кнопку мыши в поле HTML и выбрать «Просмотреть код» (если это не запрещено в РасширениеДляПоляHTMLДокумента) или использовать программные ключи запуска платформы для включения удаленной отладки.

Проанализируем объект РасширениеДляПоляHTMLДокумента и специальный редактор скриптов. Он позволяет управлять контекстным меню, запрещать выделение текста или использование определенных клавиш, что делает HTML-поле визуально неотличимым от нативного интерфейса 1С.

Практическое применение: пример «1С:Документооборот»

Если вы хотите увидеть примеры сложной реализации HTML-форм «вживую», обратите внимание на типовую конфигурацию 1С:Документооборот 8. В ней многие элементы (например, карточки задач, визуализация связей документов) реализованы именно на HTML. Это сделано для того, чтобы интерфейс выглядел одинаково как в тонком клиенте, так и в веб-клиенте, избавляя разработчиков от необходимости писать громоздкие обработчики ожидания и сложные динамические списки.

Подведем итог: использование HTML в 1С — это мощный инструмент, который при правильном подходе (использование Chromium, макетов для ресурсов и грамотного обмена данными) позволяет обходить любые ограничения платформы в плане визуализации. Рассмотрим это как возможность создавать интерфейсы будущего внутри проверенной бизнес-логики 1С.