Как сделать интерфейс обычных форм 1С 8.3 более современным и наглядным

← На главную

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

Использование поля HTML-документа для неограниченных возможностей

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

Рассмотрим, что именно это дает разработчику:

Интерактивные дашборды: С помощью библиотек вроде Chart.js или Google Charts можно выводить динамические графики, которые реагируют на наведение мыши. В обычном режиме штатные диаграммы выглядят довольно аскетично, в то время как HTML позволяет реализовать современную инфографику.
Сложная навигация: Мы можем реализовать боковые панели (Sidebar) с анимацией раскрытия подменю, используя стандартные CSS переходы.
Форматированный текст: Вместо набора надписей (Labels), мы можем выводить информацию о клиенте или товаре в виде красивых карточек с тенями, закруглениями и внедренными изображениями.

Разберем пример кода, как можно передать данные из 1С в HTML-поле для отображения:


// Пример формирования простого HTML для вывода в поле
ТекстHTML = "<html><body style='font-family: Arial; background-color: #f0f0f0;'>" +
            "<h1 style='color: #2c3e50;'>Информация о заказе</h1>" +
            "<div style='padding: 10px; border-left: 5px solid #3498db; background: white;'>" +
            "Статус: <strong>" + ТекущийСтатус + "</strong>" +
            "</div></body></html>";
ЭлементыФормы.ПолеИнфо.УстановитьТекст(ТекстHTML);

Работа с изображениями и прозрачностью

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

Посмотрим на алгоритм создания кастомных элементов управления:

Вместо стандартной кнопки используйте элемент ПолеКартинки.
Подготовьте в графическом редакторе три состояния кнопки: обычная, при наведении и нажатая (в формате PNG с прозрачными краями).
Обрабатывайте события ПриНажатии, MouseMove (если используется перехват событий) или просто используйте смену картинки при активации элемента.

Этот метод позволяет создавать круглые кнопки, кнопки с градиентами или иконками, которые органично вписываются в фон формы, не создавая лишнего визуального шума в виде серых рамок.

Имитация условного оформления в табличных частях

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

Разберем, как сделать список более читаемым:

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

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


Процедура ТабличнаяЧастьПриВыводеСтроки(Элемент, ОформлениеСтроки, ДанныеСтроки)
    Если ДанныеСтроки.Сумма > 100000 Тогда
        // Выделяем жирным важные документы
        ОформлениеСтроки.Шрифт = Новый Шрифт(ОформлениеСтроки.Шрифт, , , Истина);
    КонецЕсли;
    
    Если ДанныеСтроки.Статус = Перечисления.СтатусыЗаказов.Отменен Тогда
        ОформлениеСтроки.ЦветТекста = ЦветаСтиля.ТекстВторостепеннойНадписи;
        ОформлениеСтроки.ЦветФона = Новый Цвет(255, 230, 230); // Светло-красный
    КонецЕсли;
КонецПроцедуры

Применение сторонних компонентов и ActiveX

Если стандартных возможностей 1С:Предприятие недостаточно, можно прибегнуть к использованию внешних библиотек. Выясним, какие инструменты наиболее эффективны. В свое время для 1С 7.7 была популярна библиотека FormEx, позволявшая творить чудеса с интерфейсом. Для 1С 8.3 в обычном режиме концепция похожа — использование ActiveX контролов или внешних компонент, написанных на C# или C++.

Рассмотрим примеры таких решений:

Альтернативные сетки (Grids): Внешние компоненты могут предоставлять таблицы с возможностью группировки строк, сворачивания узлов (как в дереве, но с колонками данных) и встроенными фильтрами в заголовках.
Календари и планировщики: Использование ActiveX компонентов для визуализации графиков работ (Gantt chart) или расписаний, которые выглядят значительно современнее штатной диаграммы Ганта.
Системные треи и уведомления: Внешние компоненты позволяют создавать всплывающие уведомления (Toast notifications) в углу экрана, которые не блокируют работу пользователя, в отличие от стандартного Предупреждение().

Основные правила дизайна для обычных форм (Гайд)

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

Группировка данных: Используйте элементы типа Панель. Однако старайтесь минимизировать количество вложенных рамок. Избыток линий создает визуальную перегруженность. Лучше разделять логические блоки небольшими отступами или тонкими разделительными линиями.
Шрифты: Стандартный шрифт MS Sans Serif или Tahoma можно заменить на более современные Segoe UI или Open Sans. Это мгновенно придаст приложению современный вид. Помните, что для заголовков и основного текста лучше использовать разные размеры шрифта.
Цветовая палитра: Откажитесь от стандартного «серого» фона 1С. Используйте очень светлые оттенки синего, бежевого или мятного для фона форм. Это снижает утомляемость глаз при длительной работе.
Принцип «Воздуха»: Не старайтесь прижать элементы друг к другу как можно плотнее. Увеличение отступов между полями ввода на 2-4 пикселя значительно повышает комфорт восприятия информации.

Примеры для вдохновения

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

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