Разработка и поддержка решений на платформе 1С, предназначенных для работы в веб-клиенте на различных устройствах (от смартфонов и планшетов до нетбуков и ПК), часто сопряжена с проблемой «корявого» отображения интерфейса. Обычные управляемые формы, которые отлично смотрятся на мониторе компьютера, на экране смартфона могут сжиматься, сдвигаться или требовать постоянной горизонтальной прокрутки.
В этой статье мы подробно разберем, как решить проблему адаптации веб-клиента 1С под мобильные платформы (iOS, Android) и различные разрешения экранов. Мы проанализируем несколько подходов: от настройки встроенных механизмов адаптивности платформы 1С 8.3 до создания собственной веб-морды, взаимодействующей с 1С через HTTP-сервисы.
Прежде чем приступать к разработке сторонних интерфейсов или создавать десятки дублирующих форм, давайте разберем возможности самой платформы 1С:Предприятие 8.3. Фирма 1С активно развивает мобильное направление, и в платформе есть встроенный механизм автоматического изменения дизайна управляемых форм в зависимости от размера экрана.
Чтобы формы в веб-клиенте на смартфонах не «ехали», нам нужно отказаться от жесткой верстки и правильно настроить свойства элементов в Конфигураторе. Выполним следующие шаги:
Высокая. Для второстепенных полей (комментарий, ответственный, дата создания) укажем значение Низкая. На маленьких экранах мобильных устройств платформа автоматически свернет элементы с низкой важностью в компактные группы или скроет их под спойлер, освобождая полезное пространство.Группировка — ГоризонтальнаяЕслиВозможно. В этом случае на ПК элементы будут выстроены в один ряд, а на экране телефона автоматически перенесутся друг под друга (вертикально).Ширина и Высота элементов должны быть равны 0 (автоматический расчет). Чтобы элементы не растягивались на сверхшироких мониторах, используем свойство АвтоМаксимальнаяШирина.Давайте посмотрим на пример программной настройки элементов формы при ее создании для обеспечения максимальной гибкости:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Настраиваем адаптивность группы контактной информации
ГруппаКонтакты = Элементы.ГруппаКонтактнаяИнформация;
ГруппаКонтакты.Группировка = ГруппировкаПодчиненныхЭлементовФормы.ГоризонтальнаяЕслиВозможно;
// Задаем важность отображения для ключевых полей
Элементы.Контрагент.ВажностьПриОтображении = ВажностьПриОтображенииЭлементаФормы.Высокая;
Элементы.СуммаДокумента.ВажностьПриОтображении = ВажностьПриОтображенииЭлементаФормы.Высокая;
Элементы.Комментарий.ВажностьПриОтображении = ВажностьПриОтображенииЭлементаФормы.Низкая;
КонецПроцедуры
Если автоматическая перестройка универсальной управляемой формы не дает идеального результата, мы можем разработать два варианта формы для одного объекта конфигурации: одну полноценную форму для ПК и планшетов, и вторую — максимально упрощенную и компактную — для смартфонов.
Вместо того чтобы вручную спрашивать пользователя о типе его устройства при входе, мы можем определить параметры окружения программно на стороне сервера в момент открытия формы.
Для определения мобильного клиента или операционной системы устройства в веб-клиенте проанализируем следующий программный код, который размещается в модуле объекта или менеджера при вызове формы:
&НаСервере
Процедура ПередЗаполнениемФормыОпределитьМобильный(Отказ, СтандартнаяОбработка)
#Если МобильныйКлиент Тогда
// Если открыто через Мобильный клиент 1С
ИспользоватьМобильнуюФорму = Истина;
#Иначе
// Проверяем тип операционной системы через СистемнуюИнформацию
Инфо = Новый СистемнаяИнформация;
ПлатформаОС = ВРег(Инфо.ТипПлатформы);
Если Найти(ПлатформаОС, "ANDROID") > 0 Или Найти(ПлатформаОС, "IOS") > 0 Тогда
ИспользоватьМобильнуюФорму = Истина;
Иначе
ИспользоватьМобильнуюФорму = Ложь;
КонецЕсли;
#КонецЕсли
Если ИспользоватьМобильнуюФорму Тогда
// Подменяем стандартную форму на мобильную версию
СтандартнаяОбработка = Ложь;
ОткрытьФорму("Документ.ЗаказПокупателя.Форма.ФормаДокументаМобильная");
КонецЕсли;
КонецПроцедуры
Этот способ позволяет гарантировать, что пользователи смартфонов получат интерфейс, изначально спроектированный под вертикальный экран шириной 360–400 пикселей, а пользователи ПК увидят привычную многофункциональную форму.
Если бизнес-требования диктуют необходимость иметь уникальный, быстрый и красивый дизайн (например, личный кабинет клиента, рабочее место курьера или складского рабочего), стандартный веб-клиент 1С может оказаться слишком тяжеловесным. В этом случае отличным решением будет создание собственной «веб-морды» на HTML, CSS и JavaScript, которая общается с базой данных 1С через HTTP-сервисы.
Рассмотрим подробнее преимущества такого подхода:
Разберем по шагам создание простого HTTP-сервиса в 1С для получения списка заказов покупателя в формате JSON, который затем будет отображен на нашей адаптивной веб-странице.
Шаг 1. Создаем в Конфигураторе новый HTTP-сервис с именем MobileAPI и шаблоном URL /orders.
Шаг 2. Пишем метод обработки GET-запроса в модуле HTTP-сервиса:
Функция ПолучитьСписокЗаказов(Запрос)
Ответ = Новый HTTPСервисОтвет(200);
Ответ.Заголовки.Вставить("Content-Type", "application/json; charset=utf-8");
// Формируем запрос к базе данных 1С
ЗапросБД = Новый Запрос;
ЗапросБД.Текст =
"ВЫБРАТЬ РАЗРЕШЕННЫЕ
| ЗаказПокупателя.Ссылка КАК Ссылка,
| ЗаказПокупателя.Номер КАК Номер,
| ЗаказПокупателя.Дата КАК Дата,
| ЗаказПокупателя.Контрагент.Наименование КАК Контрагент,
| ЗаказПокупателя.СуммаДокумента КАК Сумма
|ИЗ
| Документ.ЗаказПокупателя КАК ЗаказПокупателя
|УПОРЯДОЧИТЬ ПО
| Дата УБЫВ";
ТаблицаДанных = ЗапросБД.Выполнить().Выгрузить();
// Сериализуем результат в JSON массив
МассивЗаказов = Новый Массив;
Для Каждого Строка Из ТаблицаДанных Цикл
СтруктураЗаказа = Новый Структура;
СтруктураЗаказа.Вставить("id", Строка(Строка.Ссылка.УникальныйИдентификатор()));
СтруктураЗаказа.Вставить("number", Строка.Номер);
СтруктураЗаказа.Вставить("date", Формат(Строка.Дата, "ДФ=dd.MM.yyyy"));
СтруктураЗаказа.Вставить("client", Строка.Контрагент);
СтруктураЗаказа.Вставить("total", Строка.Сумма);
МассивЗаказов.Добавить(СтруктураЗаказа);
КонецЦикла;
ЗаписьJSON = Новый ЗаписьJSON;
ЗаписьJSON.УстановитьСтроку();
ЗаписатьJSON(ЗаписьJSON, МассивЗаказов);
СтрокаОтвета = ЗаписьJSON.Закрыть();
Ответ.УстановитьТелоИзСтроки(СтрокаОтвета, КодировкаТекста.UTF8, ИспользованиеByteOrderMark.НеИспользовать);
Возврат Ответ;
КонецФункции
На стороне фронтенда (нашего сайта) этот JSON-пакет принимается стандартным скриптом на JavaScript (например, с использованием fetch) и динамически отрисовывается в виде адаптивных карточек, которые прекрасно выглядят как на экране iPhone, так и на мониторе Full HD.
Если мы решили использовать гибридный подход — встроить кастомные HTML-страницы непосредственно внутрь управляемой формы 1С через элемент Поле HTML-документа, то для корректной работы масштабирования на мобильных экранах необходимо соблюдать правила мобильной верстки.
Проанализируем структуру простейшего HTML-шаблона для 1С:
<!DOCTYPE html>
<html>
<head>
<!-- Метатег viewport сообщает мобильному браузеру реальную ширину экрана -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 10px;
background-color: #f5f5f5;
}
.card {
background: #fff;
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
font-weight: bold;
color: #333;
}
/* Адаптивность с помощью медиа-запросов */
@media (max-width: 600px) {
.card {
padding: 10px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="card">
<div class="card-header">Заказ №001</div>
<p>Контрагент: ООО "Ромашка"</p>
<strong>Сумма: 15 000 руб.</strong>
</div>
</body>
</html>
Важно: Всегда используйте относительные величины (проценты width: 100%, единицы вьюпорта vw, vh) вместо фиксированных пикселей для адаптивных контейнеров, а также не забывайте про метатег viewport, без которого мобильный браузер отобразит страницу в режиме "десктопного" сжатого масштаба.
Выбор метода адаптации зависит от масштаба задачи, бюджета и квалификации разработчиков: