Как реализовать удобный редактор картинок товаров в 1С:Управление торговлей 11.4

← На главную

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

Анализ проблемы: почему стандартные списки не подходят

Первое, что приходит в голову при разработке такого инструмента — использовать ДинамическийСписок или ТаблицуЗначений. Однако на практике разработчики сталкиваются с серьезной проблемой: свойство Масштаб и РазмерКартинки в ячейках таблиц часто ведет себя непредсказуемо. Рассмотрим основные сложности:

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

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

Вариант 1: Программное создание элементов формы

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

Пример логики формирования такого интерфейса:


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

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

Вариант 2: Использование Поля HTML-документа

Это наиболее современный и гибкий способ. Мы можем вывести всю таблицу товаров и их изображений через ПолеHTMLДокумента. Разберем преимущества этого метода:

CSS-стили: Вы можете задать любой размер превью, скруглить углы, добавить рамки для «главной» картинки.
Библиотеки JS: Подключив скрипт типа Sortable.js, вы получите идеально плавный Drag-and-drop, который работает внутри браузерного движка 1С.
Скорость: Браузерный движок эффективно кэширует картинки, что делает прокрутку списка плавной.

Для реализации этого метода нам нужно подготовить HTML-шаблон и передать в него данные в формате JSON или через навигационные ссылки 1С.

Технические нюансы работы с данными в УТ 11.4

Выясним, как правильно взаимодействовать с хранилищем файлов в конфигурации. В УТ 11.4 изображения хранятся в справочнике НоменклатураПрисоединенныеФайлы.

При смене порядка картинок в вашем редакторе важно помнить о реквизите ФайлКартинки в самой карточке Номенклатура. Рассмотрим алгоритм сохранения изменений:

Определяем, какая картинка стала первой в списке после перетаскивания.
Находим соответствующий элемент в справочнике НоменклатураПрисоединенныеФайлы.
Записываем ссылку на этот файл в реквизит ФайлКартинки объекта Номенклатура.
Для остальных файлов можно использовать дополнительный реквизит (например, «Порядок»), если требуется сохранять последовательность в галерее для выгрузки на сайт.

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


// Получение ссылки для отображения на форме
СсылкаНаКартинку = ПолучитьНавигационнуюСсылку(ОбъектПрисоединенныйФайл, "ДанныеФайла");
// Эту ссылку можно напрямую присваивать пути к данным ПоляКартинки

Оптимизация: работа с буфером обмена и Drag-and-drop

Современные версии платформы 8.3 позволяют значительно упростить жизнь пользователю. Разберем, как добавить поддержку вставки из буфера:

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

Также рекомендуем реализовать «миниатюры» на лету. Чтобы форма не зависала, при загрузке картинок в редактор их можно программно уменьшать, используя метод ОбработатьКартинку(). Это создаст легкие копии только для отображения в таблице редактора.

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

Заключение

Создание качественного редактора изображений в 1С — это задача на стыке проектирования интерфейсов и оптимизации работы с БД. Наилучший результат дает сочетание программного создания элементов формы для управления логикой 1С и использования механизмов платформы для прямой работы с буфером обмена. Если же требуется максимальная визуальная эстетика — выбирайте путь интеграции с HTML.