Как реализовать отображение логотипа организации в форме списка 1С

← На главную

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

Способ 1. Использование запроса динамического списка (Оптимальный для десктопа)

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

Проанализируем этот подход. В настройках динамического списка на вкладке "Запрос" мы можем прописать соединение:


ВЫБРАТЬ
    СпрКонтрагенты.Ссылка КАК Ссылка,
    СпрКонтрагенты.Наименование КАК Наименование,
    СпрЛоготипы.ФайлХранилище КАК ЛоготипТипКартинка
ИЗ
    Справочник.Контрагенты КАК СпрКонтрагенты
    ЛЕВОЕ СОЕДИНЕНИЕ Справочник.Логотипы КАК СпрЛоготипы
    ПО СпрКонтрагенты.Логотип = СпрЛоготипы.Ссылка

Важный момент: если поле ФайлХранилище имеет тип ХранилищеЗначений, напрямую в списке оно может не отобразиться. Платформа 8.3 лучше всего работает с типом Число (индекс картинки из библиотеки) или навигационной ссылкой (строка).

Способ 2. Обработка события "ПриПолученииДанныхНаСервере"

Если данные нужно преобразовать "на лету" или они хранятся в сложном виде, рассмотрим использование события динамического списка ПриПолученииДанныхНаСервере. Этот метод позволяет дозаполнить данные строк перед их выводом пользователю.

Разберем алгоритм реализации:

Добавим в динамический список колонку (поле) с именем ПутьКЛоготипу (тип Строка).
В свойствах этой колонки на форме установим "Вид" — Поле картинки.
В модуле формы создадим обработчик события:


&НаСервере
Процедура СписокПриПолученииДанныхНаСервере(ИмяЭлемента, Настройки, Строки)
    Для Каждого СтрокаСписок Из Строки Цикл
        // Получаем ссылку на текущий объект
        СсылкаКонтрагент = СтрокаСписок.Ключ;
        
        // Формируем навигационную ссылку на реквизит ХранилищаЗначений
        // Параметры: Ссылка на объект, Имя реквизита
        Если ЗначениеЗаполнено(СтрокаСписок.Данные.ЛоготипСсылка) Тогда
            СтрокаСписок.Данные.ПутьКЛоготипу = ПолучитьНавигационнуюСсылку(СтрокаСписок.Данные.ЛоготипСсылка, "ДанныеФайла");
        КонецЕсли;
    КонецЦикла;
КонецПроцедуры

Выясним причину, почему этот способ может "тормозить". При каждой прокрутке списка сервер будет выполнять код для каждой видимой строки. Чтобы избежать деградации производительности, рекомендуется кэшировать навигационные ссылки или использовать предварительно подготовленные данные.

Способ 3. Особенности реализации в мобильном приложении

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

Для мобильных устройств лучше всего подготовить данные заранее. Рассмотрим схему:

В справочнике Контрагенты создадим дополнительный реквизит ХешЛоготипа (тип Строка), в который будем записывать навигационную ссылку при записи объекта.
В динамическом списке просто выводим этот реквизит как поле картинки.
Таким образом, системе не нужно ничего вычислять при отрисовке списка — она просто берет готовую ссылку.

Управление визуальным отображением (Размер картинки)

Часто программисты сталкиваются с тем, что логотип в списке выглядит как крошечная иконка. Разберем, как это исправить. В 1С свойства "Размер картинки" для колонки списка работают специфично. Чтобы картинка была крупной, выполним следующие настройки:

Выберем элемент формы (таблицу динамического списка).
Найдем свойство ВысотаСтроки. Установим значение 3 или 4. Это принудительно увеличит ячейки всей таблицы.
В свойствах самой колонки логотипа установим "Размер картинки" — Пропорционально.

Важный совет: не загружайте оригинальные изображения высокого разрешения (например, 4000x3000 пикселей) для отображения в списке. Проанализируем правильный подход к хранению: при загрузке картинки в систему программно создавайте уменьшенную копию (превью) размером 100x100 или 150x150 пикселей и сохраняйте её отдельно именно для списка.

Оптимизация производительности и кэширование

Посмотрим на пример оптимизации через использование временного хранилища. Если мы используем десктопную версию и событие ПриПолученииДанныхНаСервере, нам нужно минимизировать обращения к базе данных.


&НаСервере
Процедура СписокПриПолученииДанныхНаСервере(ИмяЭлемента, Настройки, Строки)
    // Создаем соответствие для кэша текущего вызова
    КэшСсылок = Новый Соответствие;
    
    Для Каждого Строка Из Строки Цикл
        ЛогоСсылка = Строка.Данные.ЛоготипСсылка;
        Если ЛогоСсылка = Неопределено Тогда Продолжить; КонецЕсли;
        
        НавСсылка = КэшСсылок[ЛогоСсылка];
        Если НавСсылка = Неопределено Тогда
            НавСсылка = ПолучитьНавигационнуюСсылку(ЛогоСсылка, "ДанныеФайла");
            КэшСсылок.Вставить(ЛогоСсылка, НавСсылка);
        КонецЕсли;
        
        Строка.Данные.ПутьКЛоготипу = НавСсылка;
    КонецЦикла;
КонецПроцедуры

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

Альтернативный вариант: Поле HTML-документа

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

Мы формируем строку HTML, где данные картинок вставлены через Base64:


ТекстHTML = "<table>";
Для Каждого Стр Из ТаблицаДанных Цикл
    ТекстHTML = ТекстHTML + "<tr><td><img src='data:image/png;base64," + Стр.ДвоичныеДанныеBase64 + "' /></td>";
    ТекстHTML = ТекстHTML + "<td>" + Стр.Наименование + "</td></tr>";
КонецЦикла;
ТекстHTML = ТекстHTML + "</table>";

Этот способ дает максимальную гибкость в оформлении, но требует от разработчика навыков верстки и осторожности при работе с большими объемами данных, так как передача тяжелого HTML-текста между сервером и клиентом может нагрузить сеть.

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