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

← На главную

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

Способ 1. Использование коллекции картинок в динамическом списке

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

Выясним, как платформа определяет, какую именно иконку из этой «ленты» нужно показать в конкретной строке таблицы. Платформа 1С делает это автоматически на основе пропорций файла: она делит общую ширину картинки на её высоту. Например, если вы подготовили файл размером 14х56 пикселей, система поймет, что перед ней коллекция из 4 картинок (56 / 14 = 4), где каждая иконка имеет размер 14х14 пикселей.

Индексация элементов внутри коллекции всегда начинается с 0 и идет строго слева направо:

Первая иконка (крайняя левая) получает индекс 0;
Вторая иконка получает индекс 1;
Третья иконка получает индекс 2;
Четвертая иконка получает индекс 3.

Проанализируем ситуацию, когда нам необходимо связать эти индексы с данными информационной базы и вывести их на форму. Разберем этот процесс по шагам.

Шаг 1. Создание общей картинки в конфигураторе

В дереве метаданных конфигурации перейдем в ветку «Общие» — «Общие картинки» и добавим новый объект.
Загрузим туда подготовленный файл-склейку (рекомендуемый размер для строк таблиц — 16х16 пикселей на каждую иконку, например, файл 16х64 пикселей для 4 иконок).
В свойствах созданной общей картинки обязательно установим флаг «Коллекция картинок».

Шаг 2. Настройка запроса динамического списка

В источнике данных нашей таблицы (произвольном запросе динамического списка) необходимо вычислить индекс картинки для каждой строки. Напишем пример такого запроса:


ВЫБОР
    КОГДА Статус = ЗНАЧЕНИЕ(Перечисление.СтатусыЗаказов.Новый) ТОГДА 0
    КОГДА Статус = ЗНАЧЕНИЕ(Перечисление.СтатусыЗаказов.ВРаботе) ТОГДА 1
    КОГДА Статус = ЗНАЧЕНИЕ(Перечисление.СтатусыЗаказов.Выполнен) ТОГДА 2
    ИНАЧЕ 3
КОНЕЦ КАК ИндексКартинки

Полезный лайфхак для типа Булево: Если состояние реквизита описывается типом Булево (например, флаг Проведен или ПомеченНаУдаление), то писать конструкцию ВЫБОР КОГДА... необязательно. Платформа автоматически интерпретирует значение Истина как индекс 0, а значение Ложь — как индекс 1.

Шаг 3. Включение свойства «Использовать всегда»

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

Шаг 4. Связывание свойств таблицы формы

Теперь укажем таблице формы, откуда брать картинки. В свойствах элемента формы типа «Таблица» (который отображает наш список) настроим два ключевых параметра:

В свойстве «КартинкаСтрок» выберем созданную на Шаге 1 общую картинку-коллекцию.
В свойстве «ПутьКДаннымКартинкиСтроки» укажем путь к нашему полю с индексом из динамического списка (например, Список.ИндексКартинки).

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

Способ 2. Вывод картинки в произвольную колонку таблицы

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

Добавим в таблицу формы новое поле и установим для него вид «Поле картинки».
В свойстве «ПутьКДанным» этого поля укажем колонку с числовым индексом из нашего динамического списка (Список.ИндексКартинки).
В свойстве «КартинкаЗначений» этого же поля выберем нашу общую картинку-коллекцию.

Для того чтобы интерфейс выглядел эстетично, мы можем объединить текстовое представление статуса и его иконку в одну ячейку. Для этого создадим Группу колонок с типом группировки «В ячейке» и перетащим внутрь этой группы созданное поле картинки и текстовое поле со статусом.

Способ 3. Использование механизма условного оформления

Начиная с современных версий платформы 1С:Предприятие 8.3, разработчикам доступен более простой, гибкий и изящный способ вывода картинок — через Условное оформление. Этот метод избавляет от необходимости объединять файлы в графических редакторах и высчитывать индексы элементов.

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

Разберем пример программной настройки условного оформления в процедуре ПриСозданииНаСервере формы списка:


&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
    
    // Создаем элемент условного оформления для статуса "Выполнен"
    ЭлементОформления = УсловноеОформление.Элементы.Добавить();
    
    // Указываем, какую картинку выводить
    ЭлементОформления.Оформление.УстановитьЗначениеПараметра("Картинка", БиблиотекаКартинок.Выполнено);
    
    // Задаем условие: Статус равен Значение(Перечисление.СтатусыЗаказов.Выполнен)
    ЭлементОтбора = ЭлементОформления.Отбор.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ЭлементОтбора.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("Список.Статус");
    ЭлементОтбора.ВидСравнения = ВидСравненияКомпоновкиДанных.Равно;
    ЭлементОтбора.ПравоеЗначение = Перечисления.СтатусыЗаказов.Выполнен;
    
    // Указываем, в каком поле (колонке) отображать картинку
    ОформляемоеПоле = ЭлементОформления.Поля.Элементы.Добавить();
    ОформляемоеПоле.Поле = Новый ПолеКомпоновкиДанных("СтатусКартинка");
    
КонецПроцедуры

Преимущества использования условного оформления:

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

Способ 4. Динамический вывод картинок через Временное хранилище

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

Для решения этой задачи используется вывод картинок через адрес во временном хранилище. Посмотрим, как устроен этот механизм:

В запросе динамического списка мы выбираем ссылку на объект (например, на справочник Номенклатура или присоединенные файлы).
В таблице формы создается колонка с видом «Поле картинки». В качестве пути к данным указывается строковый реквизит, который будет содержать навигационную ссылку вида e1cib/data/Справочник.Номенклатура.ФайлКартинки... или адрес во временном хранилище.
При получении данных на сервере или при формировании списка динамически формируются адреса картинок во временном хранилище, которые платформа считывает и отображает на клиенте.

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

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