Как вставить картинку и текст в одно поле в обычных формах 1С?

← На главную

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

Метод 1: Использование спецсимволов Unicode

Самый простой и «легкий» способ добавить индикатор динамики прямо в текст — это использование символов Unicode. Этот метод не требует работы с графическими файлами и не нагружает систему. Мы можем использовать встроенную функцию Символ(), чтобы вставить стрелку непосредственно в строку заголовка надписи.

Проанализируем пример кода, где мы сравниваем текущий курс с предыдущим и выводим соответствующий символ:


РазницаКурса = ТекущийКурс - ВчерашнийКурс;
Стрелка = "";

Если РазницаКурса > 0 Тогда
    Стрелка = Символ(9650); // Черный треугольник вверх
ИначеЕсли РазницаКурса < 0 Тогда
    Стрелка = Символ(9660); // Черный треугольник вниз
КонецЕсли;

ЭлементыФормы.НадписьКурс.Заголовок = "USD: " + ТекущийКурс + " руб. " + Стрелка + " " + Формат(РазницаКурса, "ЧЦ=5; ЧДЦ=4; ЧН=0; ЧВН=");

Использование таких символов, как Символ(8593) (стрелка вверх) или Символ(8595) (стрелка вниз), позволяет сохранить текстовый формат поля, при этом оно остается полностью интерактивным (например, если установлена галочка Гиперссылка).

Метод 2: Использование Поля HTML документа

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

Разберем по шагам, как вывести текст с картинкой через Base64:

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

Посмотрим на программную реализацию этого подхода:


// Получаем картинки из библиотеки
КартинкаВверх = БиблиотекаКартинок.ДинамикаПозитивная;
КартинкаВниз = БиблиотекаКартинок.ДинамикаНегативная;

// Преобразуем картинку в строку Base64 для вставки в HTML
ДанныеКартинки = Base64Строка(КартинкаВверх.ПолучитьДвоичныеДанные());

// Формируем текст с использованием HTML-тегов
ТекстHTML = "<html><body style='margin:0; padding:0; background-color:transparent; font-family:Tahoma; font-size:8pt;'>";
ТекстHTML = ТекстHTML + "Курс доллара: 75.50 руб. <img src='data:image/png;base64," + ДанныеКартинки + "' />";
ТекстHTML = ТекстHTML + "</body></html>";

// Выводим результат в поле на форме
ЭлементыФормы.ПолеHTMLКурса.УстановитьТекст(ТекстHTML);

Важный нюанс: Чтобы избавиться от белого фона и полос прокрутки в ПолеHTMLДокумента, обязательно используйте CSS-стили overflow: hidden и background-color: transparent в теге body. Это позволит элементу органично вписаться в дизайн формы.

Метод 3: Свойство «Отображение» элемента Надпись

Выясним причину, по которой многие программисты забывают про стандартные свойства платформы. У элемента Надпись есть свойства Картинка и Отображение. Мы можем программно менять картинку в зависимости от условий.

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


Если КурсРастет Тогда
    ЭлементыФормы.НадписьИндикатор.Картинка = БиблиотекаКартинок.СтрелкаВверх;
Иначе
    ЭлементыФормы.НадписьИндикатор.Картинка = БиблиотекаКартинок.СтрелкаВниз;
КонецЕсли;

// Устанавливаем режим, чтобы видеть и текст, и картинку
ЭлементыФормы.НадписьИндикатор.Отображение = ОтображениеКнопки.КартинкаИТекст;
ЭлементыФормы.НадписьИндикатор.ПоложениеТекстаОтносительноКартинки = ПоложениеТекстаОтносительноКартинки.Право;

Метод 4: Использование шрифтов-иконок (Wingdings)

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

Например, символ "p" в шрифте Wingdings отображается как стрелка вверх, а "q" — как стрелка вниз. Плюс этого метода в том, что мы можем легко менять цвет иконки через свойство ЦветТекста, делая стрелку роста зеленой, а падения — красной, что невозможно сделать с обычной картинкой без подготовки разных файлов.


Если Разница > 0 Тогда
    ЭлементыФормы.НадписьСтрелка.Заголовок = "p"; // Стрелка вверх в Wingdings
    ЭлементыФормы.НадписьСтрелка.ЦветТекста = ЦветаСтиля.ЦветПоложительногоПрогноза;
Иначе
    ЭлементыФормы.НадписьСтрелка.Заголовок = "q"; // Стрелка вниз в Wingdings
    ЭлементыФормы.НадписьСтрелка.ЦветТекста = ЦветаСтиля.ЦветОтрицательногоПрогноза;
КонецЕсли;

Типичные ошибки при реализации

Проанализируем ситуацию, с которой столкнулся автор темы. Попытка выполнить сложение строки и объекта картинки: "Текст" + БиблиотекаКартинок.Имя всегда приводит к ошибке «Преобразование значения к типу Число не может быть выполнено». Это происходит потому, что система 1С пытается привести операнды к одному типу, но у объекта Картинка нет неявного преобразования в Строку.

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

Подведем итог: Для простых индикаторов используйте Символ() или шрифты-иконки. Для сложных интерфейсов с полноценной графикой и гиперссылками внутри текста выбирайте ПолеHTMLДокумента.