О визуальном оформлении динамических списков рассказывает моя коллега Саша, разработчик 1С в нашей команде
Введение
Добавление визуальных индикаторов или иконок в динамический список — это отличный способ сделать интерфейс «1С» интуитивно понятным. Пользователю гораздо проще считать иконку «Критическая ошибка» или «Документ оплачен», чем вчитываться в текст статуса. В данной статье мы разберем основные способы реализации этой задачи.
Визуализация данных — ключевой элемент современного пользовательского интерфейса. В системе «1С» добавление графических элементов в динамические списки позволяет существенно повысить удобство работы с информацией. Иконки и индикаторы делают интерфейс более интуитивным, позволяя пользователям мгновенно распознавать статусы и состояния объектов.
Базовые принципы работы с визуальными элементами
Динамический список — основной инструмент отображения данных в «1С». Для его эффективного визуального оформления используются следующие механизмы:
- стандартные иконки — встроенные графические элементы платформы;
- пользовательские изображения — создаваемые разработчиком наборы картинок;
- динамические индикаторы — изменяющиеся в зависимости от условий отображения.
В данной статье мы разберем основные способы реализации задачи визуализации интерфейса динамического списка. Для примера рассмотрим отображение формы списка для созданного справочника «Типы билетов» с реквизитами:
Категория - тип «Перечисление.КатегорииБилетов»;
Маршрут – тип «Справочник.Маршруты»;
Описание – Тип «Строка».
Задача: добавим отображение стандартного состояния элемента (пометка удаления).
Вариант решения: для реализации данной задачи используем метод ПутьКДаннымКартинкиСтроки.
В конфигураторе откроем форму списка справочника «Типы билетов», в свойствах элемента формы, отображающего список, находим свойство «ПутьКДаннымКартинкиСтроки» и выбираем стандартную картинку для текущего списка.
В результате в режиме «1С:Предприятие» увидим стандартную картинку состояния элемента (пометку удаления).
Для документов СтандартнаяКартинка также будет отвечать за статус проведения.
Задача: представим, что нам по каким-то причинам не нравится стандартная иконка, и мы для помеченных на удаление элементов хотим вывести отличный символ.
Вариант решения
Добавим в динамический список Поле «КартинкаПометкаУдаления».
В свойстве «ПутьКДаннымКартинкиСтроки» выберем наше новое поле «КартинкаПометкаУдаления», а в свойстве «КартинкаСтрок» выбираем нужную коллекцию картинок из библиотеки.
Можно создать общую картинку (тип «Библиотека картинок»), которая представляет собой «ленту» из нескольких иконок одинакового размера (например, 16x16). Каждая иконка внутри ленты имеет свой индекс (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 с прозрачным фоном, чтобы они корректно смотрелись при выделении строки;
• не перегружайте список десятком колонок с картинками — это рассеивает внимание пользователя;
• используйте текстовые подсказки для иконок;
• в условиях большого объёма данных избегайте сложных вычислений при обработке строк. Лучше рассчитывать статус заранее в запросе.
Вступайте в нашу телеграмм-группу Инфостарт