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

← На главную

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

Вариант 1. Использование группы типа «Поток» (Flow Group)

Начиная с версии платформы 8.3.15, в управляемых формах появился мощный инструмент — Группа-Поток. Рассмотрим подробнее, как она помогает решить нашу задачу. Группа с видом ГруппаУправления.Поток автоматически распределяет вложенные элементы слева направо и переносит их на новую строку, если они не помещаются по ширине окна. Это идеальное решение для создания адаптивной плитки с фотографиями.

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

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

Проанализируем пример кода для программного заполнения такой галереи:


// Очищаем группу перед заполнением
Для Каждого ЭлементГруппы Из Элементы.ГруппаГалерея.ПодчиненныеЭлементы Цикл
    Элементы.Удалить(ЭлементГруппы);
КонецЦикла;

Файлы = НайтиФайлы(ПутьКПапке, "*.jpg");
Для Каждого Файл Из Файлы Цикл
    // Создаем контейнер для картинки и кнопок
    ИмяГруппы = "Группа_" + СтрЗаменить(Новый УникальныйИдентификатор(), "-", "");
    ГруппаКарточки = Элементы.Добавить(ИмяГруппы, Тип("ГруппаФормы"), Элементы.ГруппаГалерея);
    ГруппаКарточки.Вид = ВидГруппы.ОбычнаяГруппа;
    ГруппаКарточки.Отображение = ОтображениеОбычнойГруппы.Нет;

    // Добавляем саму картинку
    ИмяКартинки = "Фото_" + СтрЗаменить(Новый УникальныйИдентификатор(), "-", "");
    Декорация = Элементы.Добавить(ИмяКартинки, Тип("ДекорацияФормы"), ГруппаКарточки);
    Декорация.Вид = ВидДекорацииФормы.Картинка;
    
    // Помещаем файл во временное хранилище для отображения
    Адрес = ПоместитьВоВременноеХранилище(Новый ДвоичныеДанные(Файл.ПолноеИмя));
    Декорация.Картинка = Новый Картинка(Адрес);
    Декорация.РазмерКартинки = РазмерКартинки.Авторазмер;
    Декорация.Ширина = 15; // Примерный размер 3*4 см
    Декорация.Высота = 10;
КонецЦикла;

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

Вариант 2. Динамический список с настройкой «Вид списка»

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

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

Вариант 3. Использование Поля HTML-документа и JS-библиотек

Рассмотрим ситуацию, когда требуется расширенный функционал: плавное масштабирование, поворот картинки или выделение нескольких объектов рамкой. В этом случае наиболее гибким вариантом будет использование ПоляHTMLДокумента. Современная платформа 1С использует WebKit/Chromium, что дает нам возможность применять современные стандарты веб-разработки.

Проанализируем основные шаги реализации:

Сформируем HTML-строку, содержащую теги <img> для каждого файла.
Для реализации обратной связи (клик по фото — выбор в 1С) используем механизм window.external.OnClick(id) или генерацию события onclick, которое перехватывается в 1С через обработчик ПриНажатии поля HTML-документа.
Для красоты интерфейса можно подключить легковесные скрипты, такие как Viewer.js, прямо в текст HTML-документа.

Пример формирования упрощенного HTML-контента:


ТекстHTML = "<html><body><div style='display:flex; flex-wrap:wrap;'>";
Для Каждого Файл Из МассивФайлов Цикл
    АдресВХ = ПоместитьВоВременноеХранилище(Новый ДвоичныеДанные(Файл.ПолноеИмя));
    ТекстHTML = ТекстHTML + "
        |<div style='margin:10px; text-align:center;' onclick='1c_callback(""" + Файл.Имя + """)'>
        |   <img src='" + АдресВХ + "' width='150' height='200' />
        |   <p>" + Файл.Имя + "</p>
        |</div>";
КонецЦикла;
ТекстHTML = ТекстHTML + "</div></body></html>";

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

Вариант 4. Реализация механизма Drag-and-Drop

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

Для этого у таблицы номенклатуры необходимо включить событие ПроверкаПеретаскивания и Перетаскивание. Разберем логику обработки:


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

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

Вариант 5. Использование возможностей БСП

Не будем забывать, что в Библиотеке стандартных подсистем (БСП) уже реализована мощная подсистема РаботаСФайлами. Она включает в себя готовые формы списка присоединенных файлов с возможностью предпросмотра. Проанализируем возможность адаптации этого функционала. Вместо написания своего кода, мы можем добавить в форму выбора файлов фильтрацию по определенному каталогу или расширить стандартную команду "Добавить" функцией массовой загрузки из папки. Это существенно сократит время разработки и обеспечит стабильность решения при обновлениях платформы.