Как сделать три колонки на начальной странице 1С

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

Почему платформа ограничивает нас двумя колонками?

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

Способ 1: Создание единой «мастер-формы»

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

Разберем этот процесс по шагам:

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

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

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
    
    // Создаем основной контейнер для трех колонок
    ГруппаКонтейнер = Элементы.Добавить("ГруппаТриКолонки", Тип("ГруппаФормы"), ЭтаФорма);
    ГруппаКонтейнер.Вид = ВидГруппыФормы.ГруппаКолонок;
    
    // Добавляем левую колонку
    Колонка1 = Элементы.Добавить("Колонка1", Тип("ГруппаФормы"), ГруппаКонтейнер);
    Колонка1.Вид = ВидГруппыФормы.ОбычнаяГруппа;
    Колонка1.Отображение = ОтображениеОбычнойГруппы.Нет;
    
    // Добавляем центральную колонку
    Колонка2 = Элементы.Добавить("Колонка2", Тип("ГруппаФормы"), ГруппаКонтейнер);
    Колонка2.Вид = ВидГруппыФормы.ОбычнаяГруппа;
    Колонка2.Отображение = ОтображениеОбычнойГруппы.Нет;
    
    // Добавляем правую колонку
    Колонка3 = Элементы.Добавить("Колонка3", Тип("ГруппаФормы"), ГруппаКонтейнер);
    Колонка3.Вид = ВидГруппыФормы.ОбычнаяГруппа;
    Колонка3.Отображение = ОтображениеОбычнойГруппы.Нет;
    
КонецПроцедуры

Способ 2: Использование вложенности стандартных колонок

Если нам критично использовать стандартный конструктор «Настройка состава начальной страницы», мы можем применить метод вложенности. Платформа позволяет разместить форму в левую колонку и форму в правую колонку.

Выясним, как сделать из этого три части: Рассмотрим вариант, когда левая колонка занимает 2/3 экрана, а правая — 1/3. В ту форму, которая находится слева, мы можем поместить еще две группы и расположить их горизонтально. Визуально пользователь увидит три колонки: 1.1, 1.2 и 2.0.

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

Способ 3: Визуализация через HTML-поле

Для создания действительно сложных интерфейсов, напоминающих современные веб-дашборды, мы можем использовать объект ПолеHTMLДокумента. Это позволяет полностью абстрагироваться от ограничений 1С и отрисовать любое количество колонок с помощью CSS Grid или Flexbox.

Посмотрим, как это реализовать:

1. Разместим на форме начальной страницы поле с типом Строка и видом Поле HTML документа.
2. Сформируем HTML-строку, в которой опишем структуру div-контейнеров.
3. Используем свойство display: flex для родительского контейнера.

Пример простейшей верстки для трех колонок:

ТекстHTML = 
"<html>
|<head>
|<style>
|  .container { display: flex; justify-content: space-between; }
|  .column { width: 30%; border: 1px solid #ccc; padding: 10px; }
|</style>
|</head>
|<body>
|  <div class='container'>
|    <div class='column'>Данные колонки 1</div>
|    <div class='column'>Данные колонки 2</div>
|    <div class='column'>Данные колонки 3</div>
|  </div>
|</body>
|</html>";

Этот метод позволяет сделать интерфейс максимально современным, однако он требует навыков веб-разработки и настройки взаимодействия между 1С и HTML (через JSON или обработку событий onclick).

Рекомендации по юзабилити

Проанализировав опыт внедрения многоколоночных интерфейсов, мы рекомендуем придерживаться следующих правил:

• Группировка данных: В центральную (самую широкую) колонку выносите наиболее важную оперативную информацию: списки текущих задач, реестры документов.
• Боковые панели: Левую и правую колонки лучше использовать для графиков, ключевых показателей (KPI) или ссылок для быстрого перехода.
• Адаптивность: Обязательно проверяйте, как ваша форма выглядит на мониторах с разрешением 1366x768. Если три колонки становятся слишком узкими, лучше программно скрывать одну из них при уменьшении ширины окна.

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