В современной разработке на платформе 1С:Предприятие 8.3 визуальная составляющая интерфейса играет важную роль. Стандартные выпадающие списки часто выглядят однообразно, однако вы можете использовать скрытые на первый взгляд возможности платформы для их кастомизации. В этой статье мы разберем, как изменить цвет текста, добавить графические индикаторы и сделать выбор данных более интуитивно понятным для пользователя.
Рассмотрим основной механизм, который позволяет управлять внешним видом строк в выпадающем списке. Ключом к решению является объект ФорматированнаяСтрока. В отличие от обычной строки, этот объект позволяет задавать цвет текста, цвет фона, шрифт и даже гиперссылки для отдельных фрагментов текста. Принципы работы с такими объектами во многом схожи с тем, как устроено использование форматированного документа при преобразовании текстов.
Проанализируем ситуацию: когда пользователь начинает вводить текст в поле или нажимает кнопку выпадающего списка, платформа генерирует событие подбора данных. Чтобы внедрить свое оформление, нам необходимо перехватить этот процесс. Для быстрой отладки визуальных свойств элементов в реальном времени часто используется редактор форм в режиме предприятия, но в данном случае программный код в обработчике события АвтоПодбор на стороне клиента будет наиболее эффективным решением.
Разберем по шагам, как программно изменить представление элементов в списке выбора:
АвтоПодбор для элемента формы.ФорматированнаяСтрока, указав нужные параметры цвета.
&НаКлиенте
Процедура ИмяЭлементаАвтоПодбор(Элемент, Текст, ДанныеВыбора, Параметры, Ожидание, СтандартнаяОбработка)
СтандартнаяОбработка = Ложь;
ДанныеВыбора = Новый СписокЗначений;
// Предположим, мы получаем данные из запроса или массива
Для каждого СтрокаДанных Из МассивРезультатов Цикл
// Создаем цвет (например, красный для важных позиций)
ЦветТекста = Новый Цвет(255, 0, 0);
// Формируем форматированную строку
ТекстЭлемента = Новый ФорматированнаяСтрока(СтрокаДанных.Наименование, , ЦветТекста);
// Добавляем в список выбора
ДанныеВыбора.Добавить(СтрокаДанных.Ссылка, ТекстЭлемента);
КонецЦикла;
КонецПроцедуры
Выясним причину, по которой иногда недостаточно просто покрасить текст. Часто разработчикам требуется создать "цветовой маркер" — небольшой квадрат или прямоугольник определенного цвета перед названием элемента (например, при выборе статуса или категории). Поскольку напрямую вставить div или html-контейнер в стандартный список нельзя, мы используем спецсимволы Unicode. Если же вам требуется более сложная графика, например, вертикальные закладки на основе SVG, стоит рассмотреть альтернативные способы отрисовки элементов формы.
Символ "Полный блок" (U+2588: █) идеально подходит для создания визуальных индикаторов. Рассмотрим подробнее, как объединить несколько фрагментов в одну форматированную строку:
// Создаем индикатор и текст
Индикатор = Новый ФорматированнаяСтрока("█ ", , Новый Цвет(0, 150, 0)); // Зеленый блок
ОсновнойТекст = Новый ФорматированнаяСтрока("Завершено", , Новый Цвет(0, 0, 0));
// Соединяем их в один объект
ИтоговаяСтрока = Новый ФорматированнаяСтрока(Индикатор, ОсновнойТекст);
// Теперь ИтоговаяСтрока содержит и цветной квадрат, и обычный текст
ЭлементДанныхВыбора.Представление = ИтоговаяСтрока;
Этот прием позволяет имитировать полноценную палитру цветов, оставаясь в рамках стандартного контрола.
Если вы хотите, чтобы
кастомное оформление работало во всей системе для конкретного справочника, наиболее правильным подходом будет использование события ОбработкаПолученияДанныхВыбора в модуле менеджера. Это позволит избежать дублирования кода во всех формах, где используется данный объект. Похожий подход применяется, когда реализуется реализация флажков в динамическом списке, чтобы логика управления данными была сосредоточена в одном месте.
Проанализируем структуру этого метода. В нем мы можем программно сформировать таблицу значений, которая будет передана в параметр ДанныеВыбора. Важно помнить, что в модуле менеджера мы работаем на стороне сервера, что позволяет эффективно выполнять запросы к базе данных перед формированием визуального представления.
Посмотрим на ситуацию под другим углом. Если ФорматированнаяСтрока кажется слишком сложной для простых задач, можно воспользоваться свойством Картинка у элементов списка значений. Платформа 1С позволяет привязать пиктограмму к каждой строке выпадающего списка.
Для этого в объекте ЭлементСпискаЗначений существует соответствующее поле. Вы можете заранее подготовить библиотеку картинок (кружки, квадраты, иконки) и подставлять их в зависимости от условий:
НовыйЭлемент = ДанныеВыбора.Добавить(СсылкаНаОбъект);
Если СсылкаНаОбъект.Статус = Перечисления.Статусы.Активен Тогда
НовыйЭлемент.Картинка = БиблиотекаКартинок.ЗеленыйШар;
Иначе
НовыйЭлемент.Картинка = БиблиотекаКартинок.КрасныйШар;
КонецЕсли;
Важный момент: использование стандартных картинок из библиотеки конфигурации гарантирует стабильное отображение как в тонком клиенте, так и в веб-клиенте, в то время как сложные форматированные строки в очень старых версиях платформы могли отображаться некорректно.
Рассмотрим важные нюансы эксплуатации. Начиная с версии платформы 8.3.15, поддержка ФорматированнаяСтрока в списках выбора стала стабильной для большинства современных браузеров. Однако при разработке под веб-клиент следует учитывать следующие моменты:
Подводя итог, можно сказать, что механизм ДанныеВыбора в сочетании с ФорматированнаяСтрока — это мощный инструмент в руках разработчика 1С, позволяющий превратить стандартный интерфейс в современное и удобное рабочее пространство.