Иконка на кнопке управляемой формы 1С: от общей картинки до загрузки из файла

Чтобы установить картинку на кнопку в 1С, мало заполнить свойство Картинка. Частая ошибка: картинку выбрали, а на форме по-прежнему один текст. Причина почти всегда в свойстве Отображение: у обычной кнопки на форме значение «Авто» показывает надпись. Поставьте Картинка или Картинка и текст — иконка появится.

Ниже инструкция для управляемых форм платформы 8.3 (интерфейс «Такси»). Механизм общий для платформы, от конфигурации он не зависит: так же работает в БП 3.0, ЗУП 3.1, УТ 11 и в собственных разработках. Примеры кода на встроенном языке проверены по логике клиент-сервер.

Подготовка изображения: общая картинка в конфигураторе

Картинку, которая нужна постоянно, держат в конфигурации, а не в файле на диске. Тогда она попадает в поставку, работает в веб-клиенте и не теряется при переносе базы.

Порядок такой:

1. Откройте конфигуратор, дерево конфигурации.
2. Раскройте ветку Общие → Общие картинки.
3. Через контекстное меню добавьте новый объект. Задайте имя латиницей или кириллицей без пробелов, например ЗагрузкаИзФайла.
4. В окне картинки загрузите файл с диска.
5. Сохраните конфигурацию и обновите конфигурацию базы данных (F7).

Какой файл готовить:

• 📐 Размер. Для кнопок командной панели берут 16×16 пикселей, для крупных кнопок на форме — 24×24 или 32×32. Платформа не перерисует большую картинку красиво: иконка 128×128 на маленькой кнопке выглядит мутно.
• 🎨 Формат. PNG с прозрачным фоном — самый надёжный вариант. BMP без прозрачности даст белый квадрат вокруг значка в тёмной теме и на цветных группах.
• 🔍 Масштаб экрана. Если пользователи работают с масштабом 150–200%, в общую картинку можно загрузить несколько вариантов под разную плотность экрана. Варианты упаковывают в ZIP-архив с файлом-описанием manifest.xml и загружают как одну картинку. Платформа сама выберет нужный размер.
• 🏷 Имя. Имя общей картинки потом пишут в коде: БиблиотекаКартинок.ЗагрузкаИзФайла. Короткое внятное имя сэкономит время.

Прежде чем рисовать своё, посмотрите стандартную библиотеку. В платформе уже есть десятки значков: печать, обновление, поиск, запись, удаление и другие. Они подстраиваются под тему оформления «Такси» и выглядят единообразно с типовыми формами.

Картинка на кнопке через палитру свойств формы

Самый простой способ — задать картинку в редакторе формы. Код не нужен.

1. Откройте форму в конфигураторе, выделите кнопку в дереве элементов.
2. Откройте палитру свойств (Alt+Enter).
3. Найдите свойство Картинка и нажмите кнопку выбора.
4. В окне выбора возьмите стандартную картинку из библиотеки платформы или общую картинку конфигурации.
5. В свойстве Отображение выберите, что показывать.

Значения свойства Отображение:

Если выбрано «Только картинка», заполните свойство Подсказка. Без него пользователь видит безымянный значок и гадает, что он делает.

Положение значка относительно надписи (слева, справа, сверху) задаётся в палитре свойств кнопки рядом со свойством Картинка. Вертикальное расположение «картинка сверху, текст снизу» хорошо смотрится на крупных плиточных кнопках стартовых форм.

Кнопка, привязанная к команде

У большинства кнопок есть свойство ИмяКоманды. Команда формы тоже имеет свойства Картинка и Отображение. Работает правило:

• 🔗 если картинка задана у команды, а у кнопки пусто — кнопка берёт картинку команды;
• ✏️ если картинка задана у самой кнопки — она перекрывает команду.

Задавайте картинку у команды, когда одна команда выведена в несколько мест: в командную панель, в контекстное меню таблицы и на форму. Значок поменяете один раз — он обновится везде.

Картинка на подменю и кнопке-гиперссылке

Значок можно поставить не только на обычную кнопку.

• 📂 Группа «Подменю» в командной панели тоже имеет свойство Картинка. Так делают выпадающие кнопки «Печать ▾» или «Заполнить ▾»: значок на самом подменю, внутри — команды с собственными картинками или без них.
• 🔗 Вид кнопки «Гиперссылка». Свойство Вид у кнопки определяет, как она выглядит: обычная кнопка, кнопка командной панели или гиперссылка. У гиперссылки картинка выводится рядом с подчёркнутым текстом, без рамки. Такой вариант хорош для второстепенных действий вроде «Открыть инструкцию».
• 🧾 Контекстное меню таблицы. Команды, у которых задана картинка, показывают её и в контекстном меню, и в командной панели одновременно. Отдельно настраивать меню не нужно.

Для командной панели держите единый стиль: все значки одного размера и одной толщины линий. Смесь стандартных значков «Такси» с яркими цветными иконками из интернета сразу бросается в глаза и мешает пользователю быстро находить нужную команду.

Порядок проверки после настройки простой: запустите базу в режиме «1С:Предприятие», откройте форму под обычным пользователем и уменьшите окно. При нехватке места платформа может убрать часть кнопок в меню «Ещё» — посмотрите, остаются ли видны главные команды со значками.

Установка картинки на кнопку программно

Код нужен, когда значок меняется по ходу работы: режим «свернуть/развернуть», индикатор состояния, кнопки, созданные динамически.

Картинка из библиотеки

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

	Элементы.КнопкаПечать.Картинка = БиблиотекаКартинок.Печать;
	Элементы.КнопкаПечать.Отображение = ОтображениеКнопки.КартинкаИТекст;

	// Своя общая картинка из конфигурации или расширения
	Элементы.КнопкаЗагрузить.Картинка = БиблиотекаКартинок.ЗагрузкаИзФайла;

КонецПроцедуры

БиблиотекаКартинок доступна и на клиенте, поэтому менять значок можно прямо в клиентском обработчике, без серверного вызова.

Переключение значка по состоянию

Пример кнопки, которая показывает или скрывает дополнительную группу. Реквизит формы ПоказыватьДетали (тип Булево) хранит состояние.

&НаКлиенте
Процедура ПереключитьДетали(Команда)

	ПоказыватьДетали = Не ПоказыватьДетали;
	Элементы.ГруппаДетали.Видимость = ПоказыватьДетали;

	Если ПоказыватьДетали Тогда
		Элементы.ПереключитьДетали.Картинка = БиблиотекаКартинок.СвернутьДетали;
		Элементы.ПереключитьДетали.Заголовок = "Скрыть детали";
	Иначе
		Элементы.ПереключитьДетали.Картинка = БиблиотекаКартинок.РазвернутьДетали;
		Элементы.ПереключитьДетали.Заголовок = "Показать детали";
	КонецЕсли;

КонецПроцедуры

Здесь СвернутьДетали и РазвернутьДетали — ваши общие картинки. Подставьте свои имена.

Динамически созданная кнопка

Когда кнопки строятся в коде (например, по списку видов операций), создайте команду, затем кнопку и привяжите их друг к другу:

&НаСервере
Процедура ДобавитьКнопкуЗагрузки()

	Команда = Команды.Добавить("ЗагрузитьДанные");
	Команда.Действие = "ЗагрузитьДанныеОбработка";
	Команда.Заголовок = "Загрузить";
	Команда.Картинка = БиблиотекаКартинок.ЗагрузкаИзФайла;
	Команда.Отображение = ОтображениеКнопки.КартинкаИТекст;

	Кнопка = Элементы.Добавить("КнопкаЗагрузитьДанные", Тип("КнопкаФормы"), Элементы.ГруппаКнопки);
	Кнопка.Вид = ВидКнопкиФормы.ОбычнаяКнопка;
	Кнопка.ИмяКоманды = "ЗагрузитьДанные";

КонецПроцедуры

&НаКлиенте
Процедура ЗагрузитьДанныеОбработка(Команда)
	// действие кнопки
КонецПроцедуры

Процедура-обработчик с именем из Команда.Действие должна существовать в модуле формы. Иначе при нажатии будет ошибка.

Изображение в двоичном макете

Отдельного вида макета «Картинка» в 1С нет. Но в общий макет или макет обработки можно положить файл с видом Двоичные данные. Это удобно в трёх случаях:

• 📦 внешняя обработка или отчёт, где нельзя добавить общую картинку в конфигурацию;
• 🧩 набор значков, который хочется держать рядом с кодом обработки;
• 🔄 картинку надо менять без правки формы — достаточно заменить файл в макете.

Как сделать:

1. В макетах обработки (или в ветке Общие → Макеты) добавьте макет, тип — Двоичные данные.
2. Загрузите в него PNG-файл.
3. В модуле формы получите макет и соберите из него картинку.

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

	// Для внешней обработки: макет объекта
	ОбработкаОбъект = РеквизитФормыВЗначение("Объект");
	ДанныеЗначка = ОбработкаОбъект.ПолучитьМакет("ЗначокЗагрузки");

	// Для общего макета конфигурации:
	// ДанныеЗначка = ПолучитьОбщийМакет("ЗначокЗагрузки");

	Элементы.КнопкаЗагрузить.Картинка = Новый Картинка(ДанныеЗначка);
	Элементы.КнопкаЗагрузить.Отображение = ОтображениеКнопки.КартинкаИТекст;

КонецПроцедуры

Макет с типом «Двоичные данные» возвращает значение типа ДвоичныеДанные, а у объекта Картинка есть конструктор из двоичных данных. Этого хватает, чтобы поставить значок на кнопку внешней обработки, ничего не меняя в конфигурации.

Значок из внешнего файла или из базы

Иногда картинку выбирает сам пользователь: логотип организации на кнопке стартовой формы, фото товара на кнопке быстрого выбора в кассовом интерфейсе.

Загрузка файла с компьютера пользователя

Файл передаётся на сервер через временное хранилище, а там превращается в картинку:

&НаКлиенте
Процедура ВыбратьЗначок(Команда)

	Оповещение = Новый ОписаниеОповещения("ВыбратьЗначокЗавершение", ЭтотОбъект);
	НачатьПомещениеФайла(Оповещение, , , Истина, УникальныйИдентификатор);

КонецПроцедуры

&НаКлиенте
Процедура ВыбратьЗначокЗавершение(Результат, Адрес, ВыбранноеИмяФайла, ДополнительныеПараметры) Экспорт

	Если Не Результат Тогда
		Возврат; // пользователь отменил выбор
	КонецЕсли;
	УстановитьЗначокНаСервере(Адрес);

КонецПроцедуры

&НаСервере
Процедура УстановитьЗначокНаСервере(Адрес)

	ДанныеФайла = ПолучитьИзВременногоХранилища(Адрес);
	Элементы.КнопкаЛоготип.Картинка = Новый Картинка(ДанныеФайла);
	Элементы.КнопкаЛоготип.Отображение = ОтображениеКнопки.Картинка;

КонецПроцедуры

Такая картинка живёт, пока открыта форма. Чтобы она появлялась при каждом открытии, сохраните двоичные данные в базе.

Хранение картинки в базе

Подойдёт константа, реквизит справочника или регистр сведений с типом ХранилищеЗначения:

&НаСервере
Процедура СохранитьЗначок(ДанныеФайла)
	Константы.ЛоготипДляКнопки.Установить(Новый ХранилищеЗначения(ДанныеФайла));
КонецПроцедуры

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

	Данные = Константы.ЛоготипДляКнопки.Получить().Получить();
	Если ТипЗнч(Данные) = Тип("ДвоичныеДанные") Тогда
		Элементы.КнопкаЛоготип.Картинка = Новый Картинка(Данные);
	КонецЕсли;

КонецПроцедуры

Проверка типа нужна: пока константу никто не заполнил, хранилище вернёт Неопределено, и конструктор картинки упадёт с ошибкой.

Альтернатива: картинка, по которой можно щёлкнуть

Бывает, что нужна не кнопка со значком, а сама картинка, которая реагирует на щелчок: крупный логотип, плитка на стартовой странице. Для этого есть элемент декорация-картинка:

1. В редакторе формы добавьте декорацию вида «Картинка».
2. В свойстве Картинка выберите изображение.
3. Включите свойство Гиперссылка — курсор над картинкой станет «рукой».
4. На вкладке событий создайте обработчик Нажатие.

Почему картинка не появляется на кнопке

Ещё одна ловушка — изменение свойств в обработчике ПриОткрытии у кнопки, которую скрывает функциональная опция или право доступа. Код отрабатывает без ошибок, но пользователь кнопку не видит вовсе. Проверьте видимость под нужным пользователем, а не под администратором.

Частые вопросы