Как программно заполнить и раскрасить HTML-поле на обычной форме в 1С?

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

Понимаем принцип работы HTML-поля

Для начала важно уяснить, что HTML-поле в 1С — это не просто область для текста, а полноценный объект, интерпретирующий разметку. Это значит, что метод УстановитьТекст ожидает на вход не обычную строку, а готовую HTML-структуру. Мы не можем «раскрасить» уже отображенный текст — нам необходимо подготовить строку с применением CSS-стилей и передать её в поле один раз или обновлять при необходимости.

Подготавливаем структуру данных

Чтобы вывести таблицу с данными о наличии товаров на складе, где цвет цифр зависит от их значения, мы воспользуемся стандартными тегами разметки <table>, <tr> и <td>. Для управления цветом мы будем использовать атрибут style, который позволяет задавать свойства CSS непосредственно для элементов.

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

ТекстHTML = "
|<table>
|<tr><th>Номенклатура</th><th>Количество</th></tr>";

Для Каждого Строка Из ДанныеТоваров Цикл
    Цвет = ?(Строка.Количество > 0, "green", "red");
    ТекстHTML = ТекстHTML + "
    |<tr>
    |<td>" + Строка.Наименование + "</td>
    |<td style='color: " + Цвет + "'>" + Строка.Количество + "</td>
    |</tr>";
КонецЦикла;

ТекстHTML = ТекстHTML + "</table>";
ЭлементыФормы.ИмяВашегоПоляHTML.УстановитьТекст(ТекстHTML);

Рекомендации по качественной верстке

Работая с HTML в 1С, придерживайтесь следующих правил, чтобы избежать ошибок и упростить поддержку кода:

1. Использование CSS-классов: Если таблица большая, вместо вставки style в каждую ячейку, определите стили один раз в блоке <style> в начале строки. Это значительно оптимизирует размер строки и упростит изменение дизайна в будущем.
2. Экранирование спецсимволов: Если названия ваших товаров могут содержать символы <, > или &, обязательно пропускайте их через функцию СтрЗаменить, иначе HTML-разметка может быть повреждена.
3. Общая структура: Для более корректного отображения браузерным движком, при формировании сложных документов оборачивайте контент в стандартные теги <html>, <head> и <body>.
4. Производительность: Старайтесь не вызывать УстановитьТекст внутри цикла. Это вызывает перерисовку поля на каждой итерации, что может существенно замедлить работу формы. Сначала соберите весь текст в переменную, а затем установите его в поле один раз.

Как отлаживать результат

Если после формирования строки вы видите, что таблица отображается не так, как ожидалось, выполните простую проверку:

1. Выведите сформированную строку в окно сообщений или запишите в текстовый файл с расширением .html.
2. Откройте полученный файл в любом современном браузере.
3. Если браузер отображает таблицу корректно, значит, проблема в настройках или ограничениях движка самой формы 1С. Если же и в браузере верстка «едет», значит, вы допустили ошибку в синтаксисе HTML или CSS.

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