Как оформить управляемые формы 1С 8.3, чтобы с ними было приятно работать

Красивый интерфейс в 1С 8.3 делают не цветами, а порядком. Сгруппируйте поля по смыслу, уберите лишние кнопки из командной панели, вынесите цвета и шрифты в Общие → Элементы стиля, а выделение строк сделайте условным оформлением. Этого хватает, чтобы форма стала и аккуратной, и функциональной.

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

Цвета и шрифты в интерфейсе 1С: начните со стиля

Главная ошибка новичка — красить каждое поле вручную через свойства ЦветТекста и ЦветФона. Через полгода в конфигурации двадцать оттенков красного, и поменять их разом невозможно.

Правильный путь — элементы стиля:

1. В дереве конфигурации откройте Общие → Элементы стиля.
2. Добавьте элемент вида «Цвет», например ЦветПросрочки, или «Шрифт», например ШрифтИтога.
3. В свойствах поля формы выберите не конкретный цвет, а этот элемент стиля.
4. В коде обращайтесь к нему как ЦветаСтиля.ЦветПросрочки или ШрифтыСтиля.ШрифтИтога.

Теперь оттенок меняется в одном месте и сразу во всех формах.

Что работает на практике:

• 🎨 Два-три акцентных цвета, не больше. Красный — для ошибок и просрочек, зелёный — для «всё хорошо», ещё один — для важных итогов.
• 🔤 Шрифт — тот же, что у платформы. Не задавайте гарнитуру явно. Меняйте только размер и жирность, иначе форма будет выглядеть чужеродно рядом с типовыми.
• 📏 Жирный — только для итогов и ключевых полей. Если жирное всё, не выделено ничего.
• 🌗 Цвет не единственный носитель смысла. Часть пользователей плохо различает красный и зелёный. Дублируйте цвет текстом или картинкой.

Компоновка управляемой формы: группы вместо координат

В управляемой форме нет координат. Платформа сама раскладывает элементы, а вы управляете раскладкой через группы и их свойства. Отсюда правило: красивая форма — это продуманное дерево элементов.

Группировка элементов

Каждая обычная группа имеет свойство Группировка:

Третье значение и есть основа адаптивности. На мониторе 1920 пикселей пользователь видит две колонки полей, на ноутбуке 1366 — одну, без горизонтальной прокрутки.

Свойство Отображение у группы управляет рамкой и фоном: «Сильное выделение», «Слабое выделение», «Обычное выделение», «Нет». Для вложенных групп почти всегда ставьте «Нет», иначе форма превращается в матрёшку рамок.

Ширина, растягивание и заголовки

Ровные колонки получаются из трёх свойств:

• Ширина — задаётся в символах. Для даты хватает 10–12, для суммы 12–15, для контрагента 30–40.
• РастягиватьПоГоризонтали — для полей вроде «Комментарий» ставьте «Да», для даты и суммы «Нет».
• ПоложениеЗаголовка — «Лево» для карточек, «Верх» для узких колонок и мобильного клиента.

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

Страницы и сворачиваемые группы

Длинную карточку не надо прокручивать на три экрана:

• 📑 Страницы — для независимых блоков: «Основное», «Дополнительно», «Печать».
• 🔽 Сворачиваемая группа (Поведение = Свертываемая) — для редко нужных полей, которые лучше держать на той же странице.
• 💬 Всплывающая группа (Поведение = Всплывающая) — для нескольких настроек, которые открываются по клику.

Сверху оставьте то, что заполняют всегда. Вниз и на вторые страницы — то, что заполняют раз в месяц.

Подсказки вместо пояснительных надписей

Вместо декорации-надписи под каждым полем используйте свойство Подсказка и ОтображениеПодсказки. Подсказка может появляться по кнопке «?» или выводиться под полем мелким текстом.

Для пустых полей есть ПодсказкаВвода — серый текст внутри поля вроде «ИНН из 10 или 12 цифр». Он исчезает, как только пользователь начинает ввод.

Командная панель и кнопки, которые видно сразу

Перегруженная командная панель — частая жалоба пользователей. Двадцать кнопок в ряд никто не читает.

Порядок наведения чистоты:

1. Одна главная кнопка. У основной команды включите свойство КнопкаПоУмолчанию. Платформа выделит её и повесит на неё Ctrl+Enter.
2. Редкое — в «Ещё». Свойство кнопки ПоложениеВКоманднойПанели позволяет убрать команду в дополнительное подменю «Ещё»: она остаётся доступной, но не занимает место.
3. Похожее — в подменю. Пять вариантов печати или заполнения собирайте в один элемент «Подменю».
4. Картинка или текст. Свойство Отображение кнопки: «Картинка», «Текст», «Картинка и текст». Иконка без подписи понятна только для общеизвестных действий: печать, обновить, удалить.

Картинки берите из библиотеки платформы (БиблиотекаКартинок) или добавляйте свои в Общие → Общие картинки. Платформа 8.3 принимает картинки в SVG: они не размываются при масштабировании интерфейса.

Если команда относится к конкретной таблице, переносите её в командную панель этой таблицы, а не формы. Пользователь ищет кнопку «Заполнить» рядом с табличной частью, а не вверху окна.

Табличные части: как сделать их читабельными

С табличной частью пользователь проводит больше всего времени. Вот что меняет её вид сильнее всего:

Колонку «№ строки» оставляйте узкой. Служебные колонки, которые нужны только коду, убирайте с формы: реквизит в табличной части останется.

Подсветка строк условным оформлением

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

Тот же эффект из кода, если условие нужно собрать программно:

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

    ЭлементУО = УсловноеОформление.Элементы.Добавить();

    ПолеУО = ЭлементУО.Поля.Элементы.Добавить();
    ПолеУО.Поле = Новый ПолеКомпоновкиДанных(Элементы.ТоварыКоличество.Имя);

    ОтборУО = ЭлементУО.Отбор.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
    ОтборУО.ЛевоеЗначение  = Новый ПолеКомпоновкиДанных("Объект.Товары.Количество");
    ОтборУО.ВидСравнения   = ВидСравненияКомпоновкиДанных.Меньше;
    ОтборУО.ПравоеЗначение = 0;

    ЭлементУО.Оформление.УстановитьЗначениеПараметра("ЦветТекста", WebЦвета.Красный);

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

Вызовите процедуру из ПриСозданииНаСервере. Вместо WebЦвета.Красный лучше подставить свой элемент стиля, например ЦветаСтиля.ЦветПросрочки.

Динамика интерфейса: что можно вместо анимации

CSS-анимаций в формах 1С нет. Зато есть инструменты, которые делают интерфейс «живым» и отзывчивым.

Показ и скрытие элементов

Блоки, которые нужны только при определённом значении, показывайте по событию ПриИзменении:

&НаКлиенте
Процедура ВидОперацииПриИзменении(Элемент)
    Элементы.ГруппаВозврат.Видимость = (Объект.ВидОперации = "Возврат");
КонецПроцедуры

Если условие зависит только от реквизитов формы, держите обработчик на клиенте: лишний вызов сервера заметен как подтормаживание при каждом изменении поля. Тот же код вызовите и в ПриСозданииНаСервере, чтобы форма открывалась в правильном виде.

Состояние поверх элемента

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

Элементы.Результат.ОтображениеСостояния.Видимость = Истина;
Элементы.Результат.ОтображениеСостояния.Текст = "Нажмите «Сформировать»";
Элементы.Результат.ОтображениеСостояния.ДополнительныйРежимОтображения =
    ДополнительныйРежимОтображения.Неактуальность;

Это честнее, чем показывать старые цифры под новыми настройками.

Ожидание и прогресс

• ⏳ Длительные операции выносите в фоновое задание. В конфигурациях на БСП для этого есть общий модуль ДлительныеОперации с формой ожидания.
• 📊 Индикатор — поле формы с видом «Поле индикатора», связанное с числовым реквизитом. Подходит для обработок, где известно число шагов.
• 🔁 Периодическое обновление — ПодключитьОбработчикОжидания("ОбновитьДанные", 60). Не ставьте интервал в 1–2 секунды на формах, которые держат открытыми весь день: каждый вызов сервера нагружает базу.

HTML, SVG и форматированный текст в формах 1С

Когда стандартных элементов мало, у разработчика есть три уровня свободы.

Форматированная строка

Надпись со ссылкой, жирным словом и цветом в одной строке делают без HTML:

Части = Новый Массив;
Части.Добавить("Остаток на складе: ");
Части.Добавить(Новый ФорматированнаяСтрока("12 шт.", Новый Шрифт(,, Истина)));
Части.Добавить(". ");
Части.Добавить(Новый ФорматированнаяСтрока("Открыть карточку", , , , "open"));
Элементы.Пояснение.Заголовок = Новый ФорматированнаяСтрока(Части);

Для этого у декорации-надписи включите свойство Формат в значение форматированного текста. Клик по ссылке обрабатывается в событии ОбработкаНавигационнойСсылки.

Поле HTML-документа

Это встроенный браузер внутри формы. В него можно вывести свою разметку со стилями CSS и графикой SVG: дашборд, схему склада, карточку товара с фото.

Чего ждать:

• ✅ Полная свобода вёрстки, любые диаграммы и подсветка.
• ⚠️ Внешний вид зависит от клиента: тонкий клиент на Windows, Linux и веб-клиент в разных браузерах отрисовывают HTML по-разному.
• ⚠️ Обмен данными с 1С идёт через события и вызовы JavaScript, а это больше кода и больше мест для ошибок.

Ставьте поле HTML там, где без него никак. Для обычной карточки документа оно избыточно.

SVG как картинки

Свои иконки удобнее рисовать в векторе и загружать в общие картинки. Один файл выглядит одинаково чётко при масштабе 100% и 150%, что заметно на ноутбуках с высоким разрешением экрана.

Как проверить интерфейс до того, как его увидят пользователи

Форма, которая хорошо смотрится на мониторе разработчика, часто разваливается у бухгалтера с ноутбуком. Перед выкладкой пройдите по списку:

Пользовательские настройки формы

Пользователь может сам переставить поля через меню Ещё → Изменить форму. Платформа сохраняет эти настройки, и после вашего обновления формы он может по-прежнему видеть старую раскладку.

Если после доработки «ничего не изменилось» — первым делом попросите пользователя в том же окне выбрать в меню «Ещё» команду установки стандартных настроек. Это сбрасывает его личную раскладку именно этой формы.

Скорость открытия

Медленная форма воспринимается как некрасивая, даже если выглядит идеально. Что обычно тормозит:

• 🐢 Много вызовов сервера в событиях полей. Объединяйте их, а логику без данных базы держите на клиенте или в &НаСервереБезКонтекста.
• 🐢 Десятки элементов на скрытых страницах. Заполняйте тяжёлые таблицы при первом переходе на страницу, а не при открытии формы.
• 🐢 Подсветка строк кодом вместо условного оформления.

Доработка типовой конфигурации

В типовой БП, ЗУП или УТ форму меняют через расширение конфигурации : заимствуют форму и добавляют или переставляют элементы. Основная конфигурация остаётся на поддержке, обновления ставятся как обычно.

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

Частые вопросы