Картинки в динамическом списке

13.09.24

Разработка - Работа с интерфейсом

Механизмы вывода картинок в табличные поля и динамические списки известны, тема заезженная, но в большинстве случаев требуют хранения картинок в составе конфигурации или БД. Сомнительный подход, с учетом затрат на хранение, все больший уклон в сторону SaaS и повышение требований к интерфейсам и визуализации. А что делать, если медиа-контент используется на витрине (сайте, мобилке и т.д.), а также должен быть виден в решении на 1С? Давайте посмотрим.

Файлы

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование Скачано Купить файл
(только для физ. лиц)
Картинки в динамическом списке пример (релиз 8.3.25.1286)
.cf 114,33Kb
8 1 850 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

Оформите подписку на компанию для решения рабочих задач

Оформить подписку и скачать решение со скидкой

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

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

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

Предположим, у нас есть справочник с данными. В реквизитах справочника есть URL картинки. Необходимо вывести на форму динамический список справочника с отображением картинки в каждой строке.

 

 

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

 

 

Добавляем в параметры запроса строковый параметр ИдентификаторФормы, в который соответственно будем передавать идентификатор нашей формы.

 

 

В вычисляемые поля запроса добавляем строковое поле Картинка. Значение будет возвращаться из метода общего модуля, в который как параметр будет передаваться URL изображения текущей записи справочника.

 

 

На форме в табличное поле списка выводим реквизит "Картинка" с типом "Поле картинки". 

 
 Модуль формы

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

 
 Метод серверного общего модуля

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

Запрос по URL самый обычный. Желательно ограничивать минимально-возможным таймаутом, чтобы пул фоновых заданий не копился.

 
 Метод get-запроса данных картинки

 

 
 //
 //
 Функция ПолучитьДвоичныеДанные(АдресURL) Экспорт
	 
	 Результат = Неопределено;
	 
	 лАдресURL = АдресURL;
	 ////infostart.ru/bitrix/templates/.default/mmenu/images/directions/personal.svg
	 
	 Если ЗначениеЗаполнено(лАдресURL) Тогда
		 
		 Порт = 80;
		 Если СтрНачинаетсяС(НРег(лАдресURL), "https") Тогда
			 
			 ЗащищенноеСоединениеOpenSSL = Новый ЗащищенноеСоединениеOpenSSL();
			 Порт = 443;
			 
		 КонецЕсли;
		 
		 лАдресURL = Сред(лАдресURL, СтрНайти(лАдресURL, "://") + 3);
		 
		 Сервер = "";
		 Метод = "";
		 Таймаут = 2;
		 
		 МассивЧастиURL = СтрРазделить(лАдресURL, "/", Ложь);
		 Если МассивЧастиURL.Количество() > 0 Тогда 
			 
			 МассивЧастейХост = СтрРазделить(МассивЧастиURL[0], ":", Ложь);
			 Сервер = МассивЧастейХост[0];
			 Если МассивЧастейХост.Количество() > 1 Тогда
				 
				 Порт = МассивЧастейХост[1];
				 
			 КонецЕсли;
			 
			 МассивЧастиURL.Удалить(0);
			 Метод = СтрСоединить(МассивЧастиURL, "/");
			 
		 КонецЕсли;			 
		 
		 Заголовки = Новый Соответствие;
		 
		 HTTPСоединение = Новый HTTPСоединение(Сервер, Порт,,,, Таймаут, ЗащищенноеСоединениеOpenSSL);
		 
		 HTTPЗапрос = Новый HTTPЗапрос(Метод, Заголовки);
		 
		 Попытка
			 
			 Ответ = HTTPСоединение.Получить(HTTPЗапрос);
			 Если Ответ.КодСостояния - 200 < 100 Тогда
				 
				 Результат = Ответ.ПолучитьТелоКакДвоичныеДанные();
				 
			 КонецЕсли;
			 
		 Исключение	 
			 
			 // логируем ошибку
			 
		 КонецПопытки;
		 
		 
	 КонецЕсли;
	 
	 Возврат Результат;
	 
 КонецФункции

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

 

 

Тестировалось на релизе 8.3.25.1286.

Что мы получаем при использовании данного решения:

- отображение произвольных картинок в динамических списках, а соответственно и любых других объектах, использующих СКД;

- минимальные затраты на хранение БД, т.к. перманентно хранится только строка с URL, а сама картинка хранится в стороннем хранилище, с которым кроме нашего решения могут работать и любые другие сервисы в контуре;

- минимальное влияние на скорость отклика интерфейса с оговоркой стабильной сети и наличия быстрого стороннего хранилища двоичных данных (существенное требование);

- клиент-серверные вызовы по картинкам отсутствуют, вся работа на сервере;

- затрат на клиентские лицензии нет, т.к. для работы фоновых заданий нужна только серверная лицензия;

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

Новый механизм работы с хранилищами двоичных данных (S3) платформы скорре всего реализует в итоге что-то похожее, не щупал. В данном случае выходит сильно дешевле, если КОРП вам нужен только ради такой задачи )).  

 

 

Вступайте в нашу телеграмм-группу Инфостарт

картинки динамический список разработка харнилище двоичных данных s3

См. также

Работа с интерфейсом Анализ учета Мониторинг 1С v8.3 8.3.14 1C:Бухгалтерия 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 Платные (руб)

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

21600 руб.

27.03.2025    6439    15    13    

19

Работа с интерфейсом 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022    11230    2    2    

7

Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    21131    30    6    

46

Работа с интерфейсом Программист Стажер 1С v8.3 Бесплатно (free)

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

20.08.2024    33362    mrXoxot    44    

135

Работа с интерфейсом Программист 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    19108    smielka    37    

106

Работа с интерфейсом 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    20310    1266    elcoan    53    

128

Инструментарий разработчика Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия Абонемент ($m)

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

3 стартмани

10.04.2023    14321    174    acces969    31    

131

Работа с интерфейсом Программист 1С v8.3 1C:Бухгалтерия Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    11395    kalyaka    7    

35
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Diversus 2336 20.09.24 09:08 Сейчас в теме
- клиент-серверные вызовы по картинкам отсутствуют, вся работа на сервере;


Все таки клиент-серверные вызовы есть. Если запускать в режиме отладки и скролить список, то получаем постоянные вызовы
2. Lars Ulrich 627 20.09.24 11:22 Сейчас в теме
(1) Да, динамические списки они такие, совсем без клиент-серверных вызовов никуда даже без картинок.
3. Diversus 2336 20.09.24 11:23 Сейчас в теме
(2) Я придумал способ отображения картинок в динамическом списке действительно без клиент-серверных вызовов. Если все получится, то выложу решение позже.
4. Lars Ulrich 627 20.09.24 11:24 Сейчас в теме
(3) Огонь, мне бы пригодилось.
5. Diversus 2336 20.09.24 15:55 Сейчас в теме
(4) Ничего не вышло, к сожалению.

Идея была в следующем:
1. Все используемые картинки подготовить в один спрайт SVG (это получилось сделать программно). Пример такого объединения во вложении. Пусть он был бы длинным, работало бы все равно бы быстро.
2. Дальше была идея каждому элементу справочника присвоить индекс в спрайте от 0 до n-1. При добавлении картинок добавлять в конец спрайта новую картинку и присваивать элементу справочника индекс в спрайте.
3. В форме списка использовать этот индекс и в поле КартинкаЗначений (для ячеек) или КартинкаСтрок (для списка целиком), подсунуть этот спрайт. Это бы позволило не использовать серверные вызовы.

Такой способ работает, если спрайт добавить в ручную в БиблиотекуКартинок. Но не работает, если попробовать КартинкаЗначений или КартинкаСтрок заполнить программно. Эти реквизиты только для чтения :(
Прикрепленные файлы:
Спрайт.svg
6. Lars Ulrich 627 20.09.24 16:00 Сейчас в теме
(5) сильно, но на больших количествах картинок тоже вопрос как бы это работало.
Я подобным образом через imagemagick ресайз картинки на лету делаю для отображения в списке, чтобы клиенты не умирали на данных.
7. Diversus 2336 20.09.24 16:04 Сейчас в теме
(6) Мы использовали такой спрайт добавленный в БиблиотекуКартинок со 128 картинками (причем там архив с набором картинок под разный масштаб). Все работает прекрасно. Думаю и с большим количеством легко справится. Это при условии, конечно, что картинки не большие 16x16 или 24x24. Если будут большие, то тут, наверное, да. Будут проблемы.
8. Lars Ulrich 627 20.09.24 16:06 Сейчас в теме
(7) не, тут вопрос с тем, чтобы условно произвольный-бесконечный набор картинок так на лету формировать, запоминать позиции картинок и все такое. То, что это работает в 1с для всяких картинок строк безусловно.
Оставьте свое сообщение