Как выделить строки цветом в таблице значений на управляемой форме 1С?

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

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

Представим стандартную ситуацию: на управляемой форме у нас есть реквизит с типом ТаблицаЗначений, выведенный на экран в виде таблицы. Нам необходимо динамически окрашивать строки этой таблицы в разные цвета в зависимости от определенных условий. Например, если все ключевые колонки в строке заполнены правильными данными, мы хотим подсветить эту строку приятным зеленым цветом. Если же какие-то обязательные поля остались пустыми — строка должна гореть предупреждающим красным цветом. Это позволяет пользователю мгновенно ориентироваться в массиве данных и не тратить время на построчный ручной анализ.

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

Почему именно условное оформление формы?

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

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

Разберем по шагам: как связываются таблица значений и условное оформление

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

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

Интерактивная настройка условного оформления в конфигураторе

Давайте сначала решим задачу интерактивным путем. Это отличный способ быстро проверить гипотезу и визуально оценить результат. Для реализации нашего сценария («все заполнено — зеленый, иначе — красный») нам потребуется создать два независимых правила условного оформления формы.

Откроем палитру свойств нашей управляемой формы в конфигураторе. Найдем свойство Условное оформление и нажмем кнопку открытия (три точки). Перед нами откроется окно настройки.

Шаг 1. Создаем Правило 1 (для красной подсветки незаполненных строк):

  1. Нажимаем кнопку «Добавить» для создания нового элемента условного оформления.
  2. Переходим на вкладку Оформление. Находим параметр «Цвет фона» и устанавливаем для него мягкий красный цвет (например, из веб-палитры или стилей конфигурации, чтобы он не резал глаза пользователю).
  3. Переходим на вкладку Условие (Отбор). Поскольку нам нужно красить строку в красный цвет, если хотя бы одна из колонок не заполнена, нам понадобится логическое сложение «ИЛИ». Добавляем группу условий и меняем тип группы на ИЛИ. Внутри этой группы добавляем элементы отбора для каждой ключевой колонки:
    • Левое значение: ИмяТаблицы.Колонка1, Вид сравнения: Не заполнено
    • Левое значение: ИмяТаблицы.Колонка2, Вид сравнения: Не заполнено
  4. Переходим на вкладку Оформляемые поля. Чтобы окрашивалась вся строка, мы можем либо оставить список абсолютно пустым, либо добавить туда элемент формы нашей таблицы (например, ТаблицаФормы). Рекомендуем явно указывать саму таблицу формы — это делает структуру оформления более понятной при последующем чтении настроек.

Шаг 2. Создаем Правило 2 (для зеленой подсветки полностью заполненных строк):

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

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

Программная настройка условного оформления на сервере

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

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

Проанализируем пример кода, который решает нашу задачу. Программную настройку условного оформления следует выполнять на сервере при инициализации формы — в процедуре ПриСозданииНаСервере.

Посмотрим на пример реализации такой процедуры:


&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)

    // Вызываем нашу процедуру настройки оформления
    НастроитьУсловноеОформлениеНаСервере();

КонецПроцедуры

&НаСервере
Процедура НастроитьУсловноеОформлениеНаСервере()

    // Перед добавлением новых правил хорошей практикой является очистка коллекции, 
    // чтобы избежать дублирования правил при повторных вызовах
    УсловноеОформление.Элементы.Очистить();
    
    // ==========================================
    // НАСТРОЙКА ПРАВИЛА 1: ЗЕЛЕНЫЙ ЦВЕТ (Все заполнено)
    // ==========================================
    
    // Создаем новый элемент условного оформления
    ЭлементЗеленый = УсловноеОформление.Элементы.Добавить();
    
    // Задаем цвет фона с использованием встроенных веб-цветов платформы
    ЭлементЗеленый.Оформление.УстановитьЗначениеПараметра("ЦветФона", WebЦвета.ЗеленыйЛайм);
    
    // Настраиваем группу отбора "И" (все условия должны выполняться одновременно)
    ГруппаИ = ЭлементЗеленый.Отбор.Элементы.Добавить(Тип("ГруппаЭлементовОтбораКомпоновкиДанных"));
    ГруппаИ.ТипГруппы = ТипГруппыЭлементовОтбораКомпоновкиДанных.ГруппаИ;
    
    // Первое условие: Колонка1 должна быть заполнена
    ОтборЗеленый1 = ГруппаИ.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ОтборЗеленый1.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("ИмяТаблицы.Колонка1");
    ОтборЗеленый1.ВидСравнения = ВидСравненияКомпоновкиДанных.Заполнено;
    ОтборЗеленый1.Использование = Истина;
    
    // Второе условие: Колонка2 должна быть заполнена
    ОтборЗеленый2 = ГруппаИ.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ОтборЗеленый2.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("ИмяТаблицы.Колонка2");
    ОтборЗеленый2.ВидСравнения = ВидСравненияКомпоновкиДанных.Заполнено;
    ОтборЗеленый2.Использование = Истина;
    
    // Указываем оформляемое поле (всю таблицу значений целиком)
    ПолеОформленияЗеленый = ЭлементЗеленый.Поля.Элементы.Добавить();
    ПолеОформленияЗеленый.Поле = Новый ПолеКомпоновкиДанных("ИмяЭлементаТаблицыФормы");
    ПолеОформленияЗеленый.Использование = Истина;

    // ==========================================
    // НАСТРОЙКА ПРАВИЛА 2: КРАСНЫЙ ЦВЕТ (Не все заполнено)
    // ==========================================
    
    ЭлементКрасный = УсловноеОформление.Элементы.Добавить();
    
    // Задаем красный цвет для фона
    ЭлементКрасный.Оформление.УстановитьЗначениеПараметра("ЦветФона", WebЦвета.СветлоРозовый);
    
    // Настраиваем группу отбора "ИЛИ" (хотя бы одно поле пустое)
    ГруппаИЛИ = ЭлементКрасный.Отбор.Элементы.Добавить(Тип("ГруппаЭлементовОтбораКомпоновкиДанных"));
    ГруппаИЛИ.ТипГруппы = ТипГруппыЭлементовОтбораКомпоновкиДанных.ГруппаИЛИ;
    
    // Условие 1: Колонка1 НЕ заполнена
    ОтборКрасный1 = ГруппаИЛИ.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ОтборКрасный1.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("ИмяТаблицы.Колонка1");
    ОтборКрасный1.ВидСравнения = ВидСравненияКомпоновкиДанных.НеЗаполнено;
    ОтборКрасный1.Использование = Истина;
    
    // Условие 2: Колонка2 НЕ заполнена
    ОтборКрасный2 = ГруппаИЛИ.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ОтборКрасный2.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("ИмяТаблицы.Колонка2");
    ОтборКрасный2.ВидСравнения = ВидСравненияКомпоновкиДанных.НеЗаполнено;
    ОтборКрасный2.Использование = Истина;
    
    // Привязываем оформление к элементу формы таблицы
    ПолеОформленияКрасный = ЭлементКрасный.Поля.Элементы.Добавить();
    ПолеОформленияКрасный.Поле = Новый ПолеКомпоновкиДанных("ИмяЭлементаТаблицыФормы");
    ПолеОформленияКрасный.Использование = Истина;

КонецПроцедуры

Давайте подробно проанализируем этот программный код, чтобы понять назначение ключевых объектов платформы, которые мы использовали:

Ограничения и важные нюансы при работе с условным оформлением

Каждый профессиональный разработчик должен помнить о некоторых критических ограничениях и правилах хорошего тона при проектировании условного оформления форм 1С:

Мы подробно разобрали все аспекты работы с условным оформлением для таблиц значений на управляемых формах 1С. Теперь вы без труда сможете создавать гибкие, динамические и интуитивно понятные интерфейсы для пользователей ваших конфигураций. Успешной вам разработки!

← На главную