Визуальное оформление динамических списков в «1С»: подходы к работе с иконками и индикаторами

Введение

Добавление визуальных индикаторов или иконок в динамический список — это отличный способ сделать интерфейс «1С» интуитивно понятным. Пользователю гораздо проще считать иконку «Критическая ошибка» или «Документ оплачен», чем вчитываться в текст статуса. В данной статье мы разберем основные способы реализации этой задачи.

Визуализация данных — ключевой элемент современного пользовательского интерфейса. В системе «1С» добавление графических элементов в динамические списки позволяет существенно повысить удобство работы с информацией. Иконки и индикаторы делают интерфейс более интуитивным, позволяя пользователям мгновенно распознавать статусы и состояния объектов.

Базовые принципы работы с визуальными элементами

Динамический список — основной инструмент отображения данных в «1С». Для его эффективного визуального оформления используются следующие механизмы:

• стандартные иконки — встроенные графические элементы платформы;
• пользовательские изображения — создаваемые разработчиком наборы картинок;
• динамические индикаторы — изменяющиеся в зависимости от условий отображения.

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

Категория — тип «Перечисление.КатегорииБилетов»;

Маршрут – тип «Справочник.Маршруты»;

Описание – Тип «Строка».

Задача: добавим отображение стандартного состояния элемента (пометка удаления).

Вариант решения: для реализации данной задачи используем метод ПутьКДаннымКартинкиСтроки.

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

В результате в режиме «1С:Предприятие» увидим стандартную картинку состояния элемента (пометку удаления).

Для документов СтандартнаяКартинка также будет отвечать за статус проведения.

Задача: представим, что нам по каким-то причинам не нравится стандартная иконка, и мы для помеченных на удаление элементов хотим вывести отличный символ.

Вариант решения

Добавим в динамический список Поле «КартинкаПометкаУдаления».

В свойстве «ПутьКДаннымКартинкиСтроки» выберем наше новое поле «КартинкаПометкаУдаления», 

 а в свойстве «КартинкаСтрок» выбираем нужную коллекцию картинок из библиотеки.

Можно создать общую картинку (тип «Библиотека картинок»), которая представляет собой «ленту» из нескольких иконок одинакового размера (например, 16×16). Каждая иконка внутри ленты имеет свой индекс (0, 1, 2…).

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

Если ПутьКДаннымКартинкиСтроки ссылается на числовое поле, значение трактуется как индекс картинки в коллекции КартинкаСтрок;

Если поле имеет тип «Картинка», значение используется напрямую (коллекция КартинкаСтрок не нужна, как было со СтандартнаяКартинка).

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

Задача: переместить картинку флажка, отображающего пометку удаления, после колонки «Маршрут».

Вариант решения

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

На форму перетаскиваем созданное поле динамического списка КартинкаПометкаУдаления в нужное место. В свойствах указываем:

• вид — «Поле картинки»;
• картинка значений – выбранная нами картинка из библиотеки (КоллекцияФлаговПисем);
• отображать в шапке – «Ложь» (если не нужен заголовок колонки).

Запускаем «1С» и проверяем результат:

Задача: добавить визуальный индикатор в зависимости от значения Категории в типе билета. Доработку выполним исключительно с помощью кода (не изменяя форму).

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

• модификация текста запроса динамического списка: добавляем реквизит «КартинкаЛьготный», значение индекса будет завесить от значения Категории.

&НаСервере
Процедура ОбновитьЗапросДинамическогоСписка()
	
	СвойстваСписка = ОбщегоНазначения.СтруктураСвойствДинамическогоСписка();
	СвойстваСписка.ОсновнаяТаблица = "Справочник.ТипыБилетов";
	СвойстваСписка.ДинамическоеСчитываниеДанных = Истина; 
	ТекстПолеКартинка = "
		|		ВЫБОР КОГДА СправочникТипыБилетов.Категория = ЗНАЧЕНИЕ(Перечисление.КатегорииБилетов.Платный)
		|			ТОГДА 0
		|		ИНАЧЕ ВЫБОР
		|				КОГДА СправочникТипыБилетов.Категория = ЗНАЧЕНИЕ(Перечисление.КатегорииБилетов.Бесплатный)
		|					ТОГДА 1
		|				ИНАЧЕ ВЫБОР
		|						КОГДА СправочникТипыБилетов.Категория = ЗНАЧЕНИЕ(Перечисление.КатегорииБилетов.Льготный)
		|							ТОГДА 2
		|						ИНАЧЕ 9
		|					КОНЕЦ
		|			КОНЕЦ
		|	КОНЕЦ КАК ИндексКартинкиЛьготный, ";

	СвойстваСписка.ТекстЗапроса = СтрЗаменить(Список.ТекстЗапроса, "ВЫБРАТЬ", "ВЫБРАТЬ " + ТекстПолеКартинка);
	ОбщегоНазначения.УстановитьСвойстваДинамическогоСписка(Элементы.Список, СвойстваСписка);   
	
КонецПроцедуры  

• создание колонки в таблице формы. Программно добавляем элемент формы типа «Поле картинки» и помещаем его перед колонкой «Категория»;
• указываем, какие именно иконки соответствуют индексам (0, 1, 2, 3).

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

	НоваяКолонка.Вид 				= ВидПоляФормы.ПолеКартинки;
	НоваяКолонка.ПутьКДанным 		= "Список.ИндексКартинкиЛьготный"; // Привязка к полю из запроса
	НоваяКолонка.Ширина 			= 2; 
	НоваяКолонка.ОтображатьВШапке	= Ложь; // Пустой заголовок
	
	// Перемещаем перед колонкой Категория (если не найдена, то в начало таблицы  
	КолонкаКатегория 			= Элементы.Список.ПодчиненныеЭлементы.Найти("Категория");
	ПоложениеКолонки 			= ?(КолонкаКатегория = Неопределено, Элементы.Список.ПодчиненныеЭлементы[0], КолонкаКатегория);
	
	Элементы.Переместить(НоваяКолонка, Элементы.Список, ПоложениеКолонки); 
	
	//Указываем колекцию картинок (какие именно иконки соответствуют индексам (0, 1, 2))
	НоваяКолонка.КартинкаЗначений = БиблиотекаКартинок.КоллекцияЗадачи;
	
 КонецПроцедуры

Переходим в режим «1С:Предприятие» и смотрим на результат: во всех строках, где заполнена Категория, вывелась соответствующая иконка.

Задача: визуально обозначить строки, в которых не заполнен хотя бы один из реквизитов (Категория, Маршрут).

Вариант решения

В данном примере рассмотрим вариант определения вывода иконки в событии таблицы списка ПриПолученииДанныхНаСервере():

• создадим поле динамического списка и элемент формы (через редактирование формы или программно ПрСозданииНаСервере()), назовем «ИндексОшибкаЗаполнения»;
• в процедуре Список ПриПолученииДанныхНаСервере() проверим заполнение реквизитов Категория и Маршрут. И если хотя бы одно из значений пустое, то присвоим нашему реквизиту индекс 0.

Полный текст кода в модуле:

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) 
	
	ОбновитьЗапросДинамическогоСписка();	
	
	ДобавитьЭлементыФормы();    
	
КонецПроцедуры      

&НаСервере
Процедура ОбновитьЗапросДинамическогоСписка()
	
	СвойстваСписка = ОбщегоНазначения.СтруктураСвойствДинамическогоСписка();
	СвойстваСписка.ОсновнаяТаблица = "Справочник.ТипыБилетов";
	СвойстваСписка.ДинамическоеСчитываниеДанных = Истина; 
	
	ТекстПолеКартинка = "0 КАК ИндексОшибкаЗаполнения, ";

	СвойстваСписка.ТекстЗапроса = СтрЗаменить(Список.ТекстЗапроса, "ВЫБРАТЬ", "ВЫБРАТЬ " + ТекстПолеКартинка);
	ОбщегоНазначения.УстановитьСвойстваДинамическогоСписка(Элементы.Список, СвойстваСписка);   
	
КонецПроцедуры  

&НаСервере
Процедура ДобавитьЭлементыФормы()
	
	ИмяКолонки 						= "СписокИндексОшибкаЗаполнения";
	НоваяКолонка 					= Элементы.Добавить(ИмяКолонки, Тип("ПолеФормы"), Элементы.Список);

	НоваяКолонка.Вид 				= ВидПоляФормы.ПолеКартинки;
	НоваяКолонка.ПутьКДанным 		= "Список.ИндексОшибкаЗаполнения"; 
	НоваяКолонка.ОтображатьВШапке	= Ложь; 
	
	Элементы.Переместить(НоваяКолонка, Элементы.Список, Элементы.Список.ПодчиненныеЭлементы[0]); 
	
	НоваяКолонка.КартинкаЗначений = БиблиотекаКартинок.ВажностьВысокая;
	
 КонецПроцедуры

&НаСервереБезКонтекста
Процедура СписокПриПолученииДанныхНаСервере(ИмяЭлемента, Настройки, Строки)
	
	Для Каждого Строка Из Строки Цикл
		
		ТекДанные = Строка.Значение.Данные;
		
		Если НЕ ЗначениеЗаполнено(ТекДанные.Категория)
			ИЛИ НЕ ЗначениеЗаполнено(ТекДанные.Маршрут) Тогда
            ТекДанные.ИндексОшибкаЗаполнения = 0;
        Иначе
            ТекДанные.ИндексОшибкаЗаполнения = 1;
		КонецЕсли;  
		
    КонецЦикла;
	
КонецПроцедуры

Заключение

Добавление визуальных индикаторов в динамические списки «1С» — эффективный способ улучшить пользовательский опыт. Комбинируя статические и динамические методы, вы можете создать интуитивно понятный интерфейс, который поможет пользователям быстрее анализировать данные.

Полезные советы:

•             используйте стандартные картинки. В платформе уже есть библиотека БиблиотекаКартинок, где можно найти иконки статусов, конвертов, восклицательных знаков. Это экономит время и память;

•             если вы создаете свои картинки, используйте формат .png с прозрачным фоном, чтобы они корректно смотрелись при выделении строки;

•             не перегружайте список десятком колонок с картинками — это рассеивает внимание пользователя;

•            используйте текстовые подсказки для иконок;

•            в условиях большого объёма данных избегайте сложных вычислений при обработке строк. Лучше рассчитывать статус заранее в запросе.

Словарь