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

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

Проблема стандартного подхода и маленьких иконок

Разберем ситуацию: часто разработчики пытаются использовать свойство колонки КартинкаСтрок. Однако это поле предназначено для вывода системных значков или наборов пиктограмм, где числовое значение в ячейке указывает на индекс картинки в коллекции. Это не подходит для фотографий номенклатуры, так как изображения там жестко ограничены размером и форматом. Проанализируем основные способы, которые позволяют вывести полноценное изображение.

Способ №1: Использование навигационных ссылок в запросе

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

Рассмотрим по шагам, как это реализовать в динамическом списке:

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

Пример запроса для динамического списка:

ВЫБРАТЬ
    СправочникНоменклатура.Ссылка КАК Ссылка,
    СправочникНоменклатура.Наименование КАК Наименование,
    СправочникНоменклатура.Код КАК Код,
    "e1cib/data/" + ВЫРАЗИТЬ(НоменклатураПрисоединенныеФайлы.Ссылка КАК СТРОКА(100)) КАК СсылкаНаКартинку
ИЗ
    Справочник.Номенклатура КАК СправочникНоменклатура
    ЛЕВОЕ СОЕДИНЕНИЕ Справочник.НоменклатураПрисоединенныеФайлы КАК НоменклатураПрисоединенныеФайлы
        ПО СправочникНоменклатура.ОсновнаяКартинка = НоменклатураПрисоединенныеФайлы.Ссылка

Важный момент: В запросе мы программно конструируем строку вида e1cib/data/ИмяСправочника.ИмяФайла. Это позволяет платформе понять, что в данной колонке находится ссылка на объект метаданных.

Способ №2: Настройка отображения в форме

После того как мы получили поле СсылкаНаКартинку в динамическом списке, его нужно правильно настроить на форме, иначе пользователь увидит просто текст ссылки.

1. Перетащим поле СсылкаНаКартинку в дерево элементов формы.
2. Установим вид элемента — Поле картинки.
3. Выясним причину, по которой картинка всё равно может отображаться мелко. По умолчанию высота строки динамического списка подстраивается под текст. Чтобы картинка была видна, необходимо принудительно увеличить высоту строк.
4. В свойствах таблицы (самого динамического списка на форме) найдем параметр ВысотаСтроки. Установим значение, например, 3 или 5. Это позволит ячейке растянуться.
5. У самого поля картинки установим свойство РазмерКартинки в значение Пропорционально. Это предотвратит искажение фотографий товара.

Способ №3: Оптимизация производительности (Превью)

Если в вашей базе хранятся фотографии в высоком разрешении (например, по 5-10 Мб), вывод их в динамический список "как есть" приведет к серьезным задержкам при прокрутке. Проанализируем, как этого избежать.

Рекомендуется при сохранении основной картинки номенклатуры программно создавать её уменьшенную копию (превью) размером 100x100 пикселей. В динамическом списке следует ссылаться именно на этот уменьшенный файл. Это сократит объем передаваемых данных в десятки раз.

Рассмотрим пример кода для получения навигационной ссылки на превью:

// В запросе ДС используем поле превью
"e1cib/data/Справочник.НоменклатураПрисоединенныеФайлы.ФайлПревью?ref=" + СсылкаНаФайл

Способ №4: Панель предварительного просмотра

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

1. Создадим на форме реквизит с типом Строка, назовем его URLТекущейКартинки.
2. Разместим на форме поле картинки, связанное с этим реквизитом.
3. Для таблицы динамического списка создадим обработчик события ПриАктивизацииСтроки.

Разберем пример кода для этого обработчика:

&НаКлиенте
Процедура СписокПриАктивизацииСтроки(Элемент)
    ТекущиеДанные = Элементы.Список.ТекущиеДанные;
    Если ТекущиеДанные <> Неопределено Тогда
        // Формируем ссылку на лету
        URLТекущейКартинки = ПолучитьНавигационнуюСсылку(ТекущиеДанные.ОсновнаяКартинка);
    КонецЕсли;
КонецПроцедуры

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

Сравнение методов: Динамический список vs Табличный документ

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

• Динамический список: Лучший выбор для стандартных реестров с фильтрами и поиском. Поддерживает пагинацию и быструю подгрузку данных, но ограничен в плане сложной верстки.
• Табличный документ: Позволяет создать интерфейс "как на сайте" с любым расположением элементов. Однако он требует ручного написания механизмов поиска, отборов и листания страниц, что значительно увеличивает трудозатраты.
• Поле HTML-документа: Самый гибкий вариант. С помощью CSS можно сделать скругление углов у фото, тени и анимацию. Но это требует знаний веб-технологий и может быть сложным в поддержке.

Подведение итогов

Для реализации качественного вывода изображений в 1С 8.3 наиболее оптимальным является использование навигационных ссылок в сочетании с фиксированной высотой строки динамического списка. Помните о важности оптимизации размеров самих файлов — использование превью-изображений сделает работу пользователя комфортной и быстрой даже при работе через медленный интернет-канал. Мы разобрали основные технические нюансы, которые помогут вам создать современный и удобный интерфейс для работы с товарным каталогом.