Интеграция HTML-контента в интерфейс решений на платформе 1С:Предприятие 8 — это мощный инструмент, который позволяет разработчикам создавать динамические дашборды, интерактивные карты, кастомные отчеты и красивые элементы визуализации, которые стандартными средствами платформы реализовать затруднительно или невозможно. Тем не менее, у начинающих разработчиков часто возникает путаница при переносе логики работы с HTML из обычных форм в управляемые. Выясним причину этих сложностей, разберем по шагам правильные механизмы работы и рассмотрим практические примеры кода.
В обычных формах (до версии платформы 8.2 и в режиме толстого клиента) работа с элементами интерфейса строилась напрямую. Разработчик мог обратиться к элементу формы и программно передать в него текст страницы методом типа ЭлементыФормы.ПолеHTML.УстановитьТекст(КодHTML). Попытка применить этот подход в управляемом приложении (особенно в тонком клиенте) гарантированно приведет к ошибке компиляции.
Управляемые формы работают по принципу связывания данных (Data Binding). Мы не управляем элементами формы напрямую для изменения их содержимого. Вместо этого мы создаем реквизит формы, связываем его с элементом управления на форме, а затем программно изменяем значение самого реквизита. Платформа самостоятельно отслеживает изменения данных и мгновенно перерисовывает интерфейс для пользователя.
Вторая частая ошибка — попытка получить макет непосредственно на клиенте. Клиентское приложение (тонкий клиент) не имеет прямого доступа к метаданным конфигурации и базе данных. Все макеты хранятся на сервере, поэтому их получение и чтение текста должны происходить исключительно в серверном контексте.
Для начала нам необходимо сохранить HTML-код внутри нашей конфигурации. Для этого мы будем использовать механизм макетов. Проанализируем, как это сделать:
Полезный совет: Иногда при сохранении сложного HTML-кода со скриптами встроенный редактор макетов 1С может автоматически корректировать или «очищать» теги, что может нарушить работоспособность JS-скриптов. Чтобы этого избежать, вы можете создать макет с типом Текстовый документ, скопировать туда ваш HTML-код «как есть» и сохранять его без изменений платформы. Метод получения текста для обоих типов макетов будет абсолютно одинаковым.
Теперь подготовим форму для отображения нашего документа. Разберем этот процесс по шагам:
АдресИлиТекстHTML. Зададим тип данных — Строка (длина неограниченна).После выполнения этих действий элемент интерфейса готов принимать данные. Если мы запишем в реквизит АдресИлиТекстHTML валидный HTML-код, платформа автоматически отрендерит его на форме.
Напишем программный код, который будет получать текст макета на сервере и передавать его на клиент для отображения на форме при нажатии кнопки.
Рассмотрим пример правильной реализации кода на управляемой форме:
&НаКлиенте
Процедура КомандаЗагрузитьМакет(Команда)
// Вызываем серверную функцию для получения текста макета
ТекстМакетHTML = ПолучитьТекстМакетаНаСервере();
// Присваиваем результат строковому реквизиту формы.
// Платформа автоматически отобразит HTML-код на форме.
АдресИлиТекстHTML = ТекстМакетHTML;
КонецПроцедуры
&НаСервереБезКонтекста
Функция ПолучитьТекстМакетаНаСервере()
// Получаем макет из общих макетов конфигурации по его имени
Макет = ПолучитьОбщийМакет("МойИнтерактивныйМакет");
// Извлекаем текстовое содержимое макета и возвращаем его на клиент
Возврат Макет.ПолучитьТекст();
КонецФункции
В данном примере мы использовали директиву &НаСервереБезКонтекста. Это наиболее производительный вариант, поскольку при вызове функции на сервер не передается весь контекст формы, что экономит трафик и ускоряет работу интерфейса.
Простая визуализация статического HTML — это лишь малая часть возможностей. Рассмотрим подробнее, как организовать полноценный двусторонний обмен данными между платформой 1С и веб-страницей.
Направление 1: Из 1С в JavaScript (Управление DOM-моделью)
Когда страница уже загружена на форму, мы можем напрямую обращаться к ее объектной модели (DOM) с клиента. Для этого используется свойство элемента формы Документ. Мы можем изменять значения полей ввода на странице, вызывать JS-функции или менять стили элементов:
&НаКлиенте
Процедура ИзменитьЗначениеНаВебСтранице()
// Получаем доступ к DOM-модели документа
ДокументHTML = Элементы.АдресИлиТекстHTML.Документ;
Если ДокументHTML <> Неопределено Тогда
// Находим элемент на веб-странице по его ID и меняем его значение
ДокументHTML.getElementById("username").value = "Иван Иванов";
КонецЕсли;
КонецПроцедуры
Направление 2: Из JavaScript в 1С (Обработка кликов и событий)
Чтобы среагировать на действия пользователя внутри HTML-документа (например, клик по кнопке или ссылке), мы используем событие элемента формы ПриНажатии. Настроим перехват кликов:
ПриНажатии.Посмотрим на пример обработки события нажатия в модуле управляемой формы:
&НаКлиенте
Процедура АдресИлиТекстHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Отменяем стандартный переход браузера по ссылке
СтандартнаяОбработка = Ложь;
// Анализируем, по какому элементу кликнул пользователь
ИдентификаторЭлемента = ДанныеСобытия.Element.id;
Если ИдентификаторЭлемента = "btnRunReport" Тогда
ВыполнитьФормированиеОтчетаВ1С();
ИначеЕсли ИдентификаторЭлемента = "btnCloseForm" Тогда
Закрыть();
КонецЕсли;
КонецПроцедуры
Если перед вами стоит задача не просто отобразить готовый сверстанный макет, а дать пользователю возможность форматировать текст, вставлять картинки и редактировать содержимое (например, при подготовке шаблонов писем для рассылки), стандартное поле HTML может оказаться слишком сложным в реализации. Для этих целей в 1С предусмотрен встроенный объект ФорматированныйДокумент.
Рассмотрим пример загрузки HTML-кода в поле форматированного документа на сервере:
&НаСервере
Процедура ЗагрузитьВФорматированныйДокумент(ТекстHTML)
// РеквизитФормыДокумент имеет тип "ФорматированныйДокумент"
// Создаем структуру для хранения картинок, если они есть в HTML
Вложения = Новый Структура;
// Загружаем HTML-код в документ
РеквизитФормыДокумент.УстановитьHTML(ТекстHTML, Вложения);
КонецПроцедуры
Преимущество этого метода в том, что на форме отобразится готовый визуальный редактор с возможностью изменять шрифты, цвета, выравнивание текста без необходимости писать собственный код на JavaScript.
Важно помнить, как именно 1С отображает HTML-код на компьютерах пользователей, чтобы избежать проблем с версткой:
Документ, так как оно вернет объект типа ВнешнийОбъект, а некоторые специфические свойства DOM-модели могут иметь ограничения безопасности.Используя предложенные подходы разделения контекста на клиент и сервер, а также механизм связывания данных управляемых форм, вы сможете без труда внедрять любые HTML-решения в свои конфигурации 1С.