Сторонний контрол палитры для настроечного справочника

Задача

В рамках реализации требований от аналитиков на проекте столкнулись со следующим кейсом: необходимо релизовать цветовыделение контролов свойств с возможностью выбора из справочника, и настройки цвета у значений из  справочника.

Например такое может быть полезно для задачи:

• Создать справочник Группы товаров;
• Создать в справочнике Товары связанное свойство-ссылку на справочник Группы товаров и вынести его контрол на форму;
• В справочнике Товары контрол свойства-ссылки должен подсвечиваться цветом, указанным в связанной записи справочника Группы товаров (пример - жёлтый для бакалеи, красный для мясных продуктов, синий для воды);
• Администратор системы должен иметь возможность изменить цветовое выделение в проводнике системы при создании/изменении записи справочника Группы товаров;

Особенности

В веб-клиенте Directum RX существует функциональность цветовыделения контролов свойств. Есть возможность задавать подсветку предопределённой палитрой цветов Colors.Common или же использовать код цвета модели RGB глубиной 8 бит #RRGGBB (шестнадцатеричное представление красного, зелёного и синего каналов цвета от 0x00 до 0xFF соответственно). У системы есть возможность динамически менять цвет контрола при каждом обращении к нему или при обновлении формы. Получить итоговый цвет можно получить из строкового представления.

При использовании данного метода были выявлен недостаток — отсутствие визуализации цвета при определении его кодом #RRGGBB. Иначе говоря, увидеть цвет можно только по факту его определения в дополнительном свойстве и нужно использовать сторонние палитры цветов (например, в поисковике Яндекса).

Реализация

Приняли решение реализовать универсальный контрол с палитрой цветов модели RGB глубиной 8 бит.

Данный функционал позволит:

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

Используемые решения и подходы

В рамках выполняемой задачи были определены следующие ограничения:

• Подсветка задаётся для одного свойства одновременно. Фиксируется жёсткая связка между свойством и контролом как «один к одному»;
• Используется дополнительное свойство для хранения кода цвета для каждого свойства;
• При определении кода цвета исключен альфа-канал (канал прозрачности из модели ARGB), так как при тестах было выявлено, что альфа-канал не влияет на отображение цвета веб-клиентом и всегда считается как 0xFF (полная непрозрачность);

При реализации палитры цветов были учтены следующие нюансы:

Палитра цветов создается с помощью дистрибутива сторонних контролов на языке программирования TypeScript в связке с фреймворком ReactJS:

•  отображение палитры;
•  выборка цвета;
•  изменение значения кода цвета через API самого Directum RX;

Добавлена логика поддержки цветового кода с помощью свойства типа Строка и ранее созданного стороннего контрола со стороны Directum RX:

• проверка по регулярному выражению для свойства цветового кода в событии "Изменение значения свойства" и "Изменение значение контрола" в настроечном справочнике;
• изменение цвета подсветки свойства "Имя" из кода цвета в событии "Обновление формы" в событии "Изменение значения свойства" и "Изменение значение контрола" в настроечном справочнике;
• получение цвета из кода цвета в событии "Обновление формы" в основном справочнике;
• проверка корректности ввода и отображение ошибок в событии "Обновление формы" в настроечном справочнике;

С точки зрения разработки добавляется новое свойство типа Строка для хранения кода цвета, добавляется связка стороннего контрола с этим свойством и идёт обращение к данному значению вида:

_obj.State.Properties.Name.HighlightColor = Colors.Parse(_obj.ColorCode);

где _obj.ColorCode — строковое преставление кода #RRGGBB, которое можно подтянуть через API со стороннего контрола палитры (без альфа-канала).

Теперь значение цвета можно визуально задавать в проводнике системы.

Результат

Получился сторонний контрол, который позволяет дать новый опыт user-story и даёт возможность вынести часть функционала в проводник системы.

Преимущества решения

Расширена функциональность. Добавлены новые возможности для настройки, расширяющие возможности системы Directum RX 4.9 и выше.

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

Оригинальное решение. Реализован функционал, который ранее не использовался в Directum RX.

Планы по дальнейшему развитию проекта

• Привести оформление палитры цветов к единому с веб-клиентом стилем;
• Доработать отображение палитры цвета в зависимости от требования заказчиков;
• Дополнить настроечный справочник критериями, чтобы подбирать подсветку в зависимости от дополнительных условий;

Состав команды проекта

• Идея, реализация на стороне Directum RX – Пушкарев Андрей Андреевич, прикладной разработчик ООО «РосА»;
• Реализация стороннего контрола – Кугушев Андрей Андреевич, руководитель группы прикладных разработчиков ООО «РосА»;

Об авторе заявки

• Являюсь прикладным разработчиком одной из команд разработки;
• Решение было реализовано в рамках проекта, который является новым опытом работы с компанией Directum;
• Более 3 лет занимаюсь прикладной разработкой;