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

← На главную

Разработчики, работающие с управляемым интерфейсом 1С, часто сталкиваются с жесткими рамками платформы в вопросах дизайна — для обхода этих ограничений есть конструктор кастомных интерфейсов и адаптивных рабочих столов в 1С. Одной из популярных задач является установка произвольного фонового изображения на форму или отдельную группу элементов, чтобы сделать интерфейс более современным или брендированным, используя праздничное оформление 1С. Однако, в отличие от «обычных» форм (v8.2), в управляемых формах прямое свойство РисунокФона или Картинка у объекта Форма отсутствует. Это связано с концепцией автоматического построения интерфейса, где платформа самостоятельно рассчитывает положение элементов.

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

Метод 1. Использование элемента формы «Декорация — Картинка» и программное изменение форм

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

Разберем реализацию по шагам:

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

Важный момент: Элементы в управляемой форме располагаются последовательно (вертикально или горизонтально). Чтобы картинка находилась сбоку от данных, используйте группу с видом Группа колонок.

Метод 2. Имитация фона через Табличный документ

Как отмечалось в обсуждении, ТабличныйДокумент — это один из немногих объектов в 1С, который штатно поддерживает установку фонового рисунка. Мы можем разместить его на форме и использовать как интерактивную подложку.

Рассмотрим алгоритм действий:

Добавим на форму реквизит с типом ТабличныйДокумент и вынесем его на форму.
В свойствах элемента формы отключим лишние визуальные элементы: ОтображатьСетку, ОтображатьЗаголовки, ОтображатьВыделение.
Программно установим фоновую картинку. Рассмотрим пример кода, который можно разместить в процедуре ПриСозданииНаСервере:


// Пример установки фона для табличного документа
Рисунок = ЭтаФорма.Элементы.ПолеТабличногоДокумента.РисунокФона;
Рисунок = БиблиотекаКартинок.ЛоготипКомпании; // Или загруженная картинка
ЭтаФорма.Элементы.ПолеТабличногоДокумента.ВыводитьРисунокФона = Истина;

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

Метод 3. Использование Поля HTML-документа (Advanced)

Если требуется полноценный современный дизайн с градиентами или сложными подложками, проанализируем вариант с использованием Поля HTML-документа. Это самый гибкий метод, так как он позволяет использовать всю мощь CSS.

Выясним, как это реализовать:

Создадим реквизит формы с типом Строка (неограниченной длины).
Вынесем его на форму и установим вид Поле HTML-документа.
В коде сформируем HTML-структуру, где фоновое изображение задается через стили.

Посмотрим на пример формирования текста HTML:


ТекстHTML = 
"<html>
|<head>
|<style>
|   body {
|       background-image: url('data:image/png;base64, " + ДвоичныеДанныеВBase64 + "');
|       background-size: cover;
|       margin: 0;
|       padding: 0;
|   }
|   .content { color: white; font-family: Arial; padding: 20px; }
|</style>
|</head>
|<body>
|   <div class='content'>Добро пожаловать в систему!</div>
|</body>
|</html>";

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

Метод 4. Группировка и оформление (штатные возможности 8.3.15+)

В современных версиях платформы 1С 8.3 (начиная с 8.3.15) появились расширенные возможности управления группами. Хотя поставить картинку всё еще нельзя, мы можем управлять цветами фона групп, что часто решает задачу визуального разделения данных.

Проанализируем свойства группы:

Вид: установите Группа страниц или Обычная группа.
Отображение: выберите Выделение или Карточка.
ЦветФона: позволяет задать акцентный цвет для всего блока.

Использование вида Карточка позволяет создавать интерфейсы, похожие на мобильные приложения или современные веб-порталы, где элементы сгруппированы в блоки с легкой тенью или рамкой. Это наиболее «правильный» с точки зрения методологии 1С путь, так как он не ломает автоматическое масштабирование формы.

Будущее интерфейсов: 1С:Элемент

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

Резюме: Если вам нужно просто украсить форму — используйте Декорацию-картинку. Если нужен сложный графический интерфейс — используйте ТабличныйДокумент. Для максимальной свободы верстки выбирайте Поле HTML-документа, но будьте готовы к трудозатратам на поддержку кода.