При разработке интерфейсов на платформе 1С:Предприятие 8.3 часто возникает задача оптимизации экранного пространства. Стандартное Поле переключателя по умолчанию располагает свои значения вертикально, что может занимать слишком много места по высоте и выглядеть неэстетично в современных интерфейсах. В этой статье мы разберем несколько способов, как изменить ориентацию элементов на горизонтальную и сделать форму более удобной для пользователя.
Это самый простой и быстрый метод, который упоминается в обсуждении. Рассмотрим подробнее, как это работает в конфигураторе. Когда мы добавляем на форму реквизит с типом Поле переключателя, платформа по умолчанию устанавливает количество колонок равным единице, что и заставляет систему выстраивать список «в столбик».
Выполним следующие шаги для изменения визуализации:
КоличествоКолонок.Проанализируем результат: теперь платформа разделит область, выделенную под элемент, на три равные колонки, и каждое значение займет свое место по горизонтали. Важно помнить, что если установить значение 0, система будет пытаться определить количество колонок автоматически, исходя из доступной ширины формы. Для быстрой настройки параметров отображения элементов прямо в пользовательском сеансе можно использовать инструмент для редактирования свойств элементов форм в режиме предприятия.
Начиная с версии платформы 8.3.14, разработчикам стал доступен более современный визуальный элемент — Поле тумблера. Разберем, почему в контексте горизонтального дизайна это решение часто оказывается предпочтительнее обычных «точек» переключателя.
Тумблер представляет собой сегментированную кнопку. Выбранное значение выделяется цветом, а сама структура элемента изначально ориентирована на горизонтальное использование. Чтобы применить этот стиль, выполним следующие действия:
Вид выберем значение Поле тумблера.КоличествоКолонок также настроено корректно (обычно для тумблера лучше всего подходит значение, равное числу элементов).Поле тумблера не только выглядит современнее, но и гораздо удобнее для сенсорных интерфейсов (мобильных клиентов), так как площадь нажатия на кнопку больше, чем на стандартный радиобаттон.
Иногда список выбора для переключателя формируется динамически в зависимости от прав пользователя или настроек системы. В такой ситуации жесткая установка свойств в конфигураторе не подойдет. Выясним, как управлять отображением из кода.
Мы можем установить количество колонок программно в процедуре ПриСозданииНаСервере. Посмотрим на пример реализации:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Допустим, наш элемент называется "ВидОперации"
ЭлементФормы = Элементы.ВидОперации;
// Получаем количество доступных значений из списка выбора
КоличествоВариантов = ЭлементФормы.СписокВыбора.Количество();
// Устанавливаем количество колонок равным количеству элементов
Если КоличествоВариантов > 0 Тогда
ЭлементФормы.КоличествоКолонок = КоличествоВариантов;
КонецЕсли;
КонецПроцедуры
Такой подход гарантирует, что при добавлении новых значений в список выбора ваш интерфейс не «поедет», а сохранит заданную горизонтальную структуру.
Рассмотрим ситуацию, когда горизонтальный переключатель все равно выглядит громоздко. Часто это происходит из-за заголовка (подписи) элемента, который по умолчанию располагается слева. Проанализируем, как можно улучшить композицию формы с помощью группировки.
Для создания чистого дизайна выполним следующие настройки:
Обычная группа (без отображения).Группировка — Горизонтальная или Вертикальная, в зависимости от того, где должен быть общий заголовок.ПоложениеЗаголовка в значение Верх или вовсе снимем флаг ОтображатьЗаголовок.Это позволит расположить поясняющий текст над кнопками выбора, освободив место по горизонтали для самих значений. Если значения имеют разную длину текста, рекомендуется установить свойство РастягиватьПоГоризонтали в значение Да, чтобы кнопки распределялись равномерно по всей ширине группы.
Если стандартных возможностей Поля переключателя или Поля тумблера недостаточно для реализации вашей дизайнерской идеи (например, нужно добавить иконки к каждому значению), мы можем рассмотреть вариант с использованием командной панели.
Алгоритм действий следующий:
Пометка.В коде модуля формы потребуется прописать логику переключения: при нажатии на одну кнопку мы устанавливаем ей Пометка = Истина, а у остальных кнопок сбрасываем это свойство в Ложь. Это дает максимальную гибкость в оформлении, позволяя создавать сложные и красивые элементы навигации.
Важно учитывать, как горизонтальное расположение будет выглядеть на мобильных устройствах. Если значений много (например, 5 или более), они могут не поместиться в ширину экрана смартфона. В этом случае 1С:Предприятие может автоматически переносить значения на новую строку. Чтобы избежать непредсказуемого поведения, для мобильных клиентов рекомендуется оставлять КоличествоКолонок равным 0, что позволит платформе адаптивно подстраиваться под ориентацию экрана устройства.
Подводя итог, мы видим, что задача по горизонтальному размещению значений решается стандартными средствами платформы за несколько кликов. Однако для достижения наилучшего результата стоит комбинировать настройку КоличествоКолонок с использованием современных видов элементов, таких как Поле тумблера, и грамотной группировкой элементов формы.