Как отобразить несколько иконок в разных колонках таблицы на управляемых формах?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

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

Метод 1. Использование вида «Поле картинки» и коллекции значений

Это классический и наиболее производительный способ. Суть его заключается в том, что в колонке таблицы хранится не само изображение, а числовой индекс (0, 1, 2...), указывающий на конкретную картинку из заранее заданной коллекции.

Разберем по шагам процесс настройки:

  1. Подготовка данных: В объекте ТаблицаЗначений (реквизит формы) создаем колонки с типом Число. Например, СтатусОплатыИндекс и СтатусДоставкиИндекс.
  2. Добавление элементов на форму: Перетаскиваем эти колонки в дерево элементов формы. По умолчанию платформа создаст для них «Поле ввода».
  3. Настройка вида поля: Для созданных элементов в свойстве Вид выбираем значение Поле картинки.
  4. Привязка коллекции: В свойстве Картинка значений необходимо выбрать библиотечную картинку, которая представляет собой коллекцию (набор иконок одинакового размера, идущих друг за другом).

Рассмотрим, как это работает в коде. Предположим, у нас есть коллекция из трех иконок: «Новый» (индекс 0), «В работе» (индекс 1), «Завершено» (индекс 2).


// Пример заполнения данных в таблице значений на сервере
Для Каждого СтрокаТЗ Из Объект.НашаТаблица Цикл
    Если СтрокаТЗ.Статус = Перечисления.СтатусыЗаказов.Новый Тогда
        СтрокаТЗ.СтатусОплатыИндекс = 0;
    ИначеЕсли СтрокаТЗ.Статус = Перечисления.СтатусыЗаказов.ВРаботе Тогда
        СтрокаТЗ.СтатусОплатыИндекс = 1;
    КонецЕсли;
КонецЦикла;

Важно помнить, что если в данных будет стоять число -1, то в ячейке не отобразится никакая картинка. Это удобно использовать для скрытия иконок в определенных строках.

Метод 2. Отображение картинок через навигационные ссылки

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

Процесс реализации:

  1. В ТаблицаЗначений создаем колонку с типом Строка.
  2. Устанавливаем для элемента формы вид Поле картинки.
  3. В данные этой колонки записываем адрес во временном хранилище или навигационную ссылку на объект базы данных.

Пример программной установки картинки:


// Помещаем двоичные данные картинки во временное хранилище
АдресКартинки = ПоместитьВоВременноеХранилище(ДвоичныеДанныеИконки, УникальныйИдентификатор);

// Записываем адрес в строку таблицы
НоваяСтрока = Объект.НашаТаблица.Добавить();
НоваяСтрока.ПутьККартинке = АдресКартинки;

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

Метод 3. Совмещение иконки и текста в одной ячейке

Часто требуется не просто вывести картинку в отдельной колонке, а разместить её рядом с текстом (например, флаг страны и название города). Для этого мы используем механизм группировки.

Алгоритм настройки:

В результате платформа визуально объединит два элемента в одну ячейку таблицы. Пользователь будет видеть иконку и текст как единое целое, что значительно повышает юзабилити интерфейса.

Метод 4. Динамическое управление через условное оформление

Хотя Условное оформление управляемой формы не позволяет напрямую подставить картинку в поле, оно является мощным инструментом для управления видимостью. Выясним, как это применить.

Если у вас есть несколько разных колонок-картинок, вы можете настроить правила, при которых те или иные иконки будут скрываться или менять цвет фона в зависимости от условий. Например, если товар отсутствует на складе, мы можем программно установить ТолькоПросмотр или изменить ЦветТекста (если используется шрифт-иконка).

Метод 5. Использование перечислений с картинками

Платформа 1С предоставляет встроенный механизм для упрощения этой задачи, если данные связаны с перечислениями. Рассмотрим этот вариант подробнее:

  1. В конфигураторе откройте свойства нужного Перечисления.
  2. Перейдите на вкладку Значения.
  3. Для каждого значения перечисления в поле Картинка выберите соответствующую иконку из библиотеки.
  4. На форме в таблице укажите для этого поля вид Поле картинки.

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

Интерактивность: обработка нажатий на иконки

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


&НаКлиенте
Процедура НашаТаблицаКартинкаСтатусаНажатие(Элемент, СтандартнаяОбработка)
    
    // Получаем текущую строку, чтобы понять, где кликнули
    ТекущиеДанные = Элементы.НашаТаблица.ТекущиеДанные;
    
    Если ТекущиеДанные <> Неопределено Тогда
        // Выполняем логику в зависимости от того, какая колонка нажата
        Если Элемент.Имя = "НашаТаблицаИконкаДействия" Тогда
            СтандартнаяОбработка = Ложь; // Отменяем стандартное поведение
            ПоказатьВопрос(...);
        КонецЕсли;
    КонецЕсли;
    
КонецПроцедуры

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

← На главную