Как создать динамический и красивый интерфейс в мобильном приложении 1С с помощью HTML и JavaScript?

← На главную

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

Основные принципы построения HTML-интерфейса

Главная проблема, с которой сталкиваются новички при работе с HTML в 1С, — это попытка обновлять интерфейс путем полной перезаписи строки HTML. Это приводит к неприятному мерцанию экрана и потере фокуса. Разберем правильный подход: использование 1С как «бэкенда», а HTML/JS — как «фронтенда». Мы не перезагружаем страницу, а меняем конкретные элементы DOM (Document Object Model) через JavaScript.

Проанализируем структуру такого решения:

Контейнер: В форме 1С размещается стандартное ПолеHTMLДокумента.
Шаблон: В макете конфигурации хранится базовый HTML-код с подключенными стилями (CSS) и скриптами (JS).
Обмен данными: 1С передает данные в формате JSON внутрь HTML-поля, где JS-функция распределяет их по нужным блокам.

Организация динамического обновления частей страницы

Чтобы обновить остаток товара или сумму в корзине без перезагрузки всей формы, мы воспользуемся методом выполнения JavaScript из кода 1С. Выясним, как это работает на практике. Допустим, у нас есть функция на языке JavaScript, которая обновляет текст в определенном блоке div.

В HTML-коде (в макете) прописываем функцию:


function updatePrice(elementId, newPrice) {
    document.getElementById(elementId).innerText = newPrice + ' руб.';
}

Теперь рассмотрим, как вызвать эту функцию из модуля формы 1С. Для этого используется обращение к свойству Документ.defaultView. Это позволяет управлять страницей «на лету».


&НаКлиенте
Процедура ОбновитьЦенуНаФорме(ИдентификаторТовара, Цена)
    Сценарий = СтрШаблон("updatePrice('%1', %2);", ИдентификаторТовара, Формат(Цена, "ЧГ=0"));
    Элементы.ПолеHTMLИнтерфейс.Документ.defaultView.eval(Сценарий);
КонецПроцедуры

Важный момент: использование eval() удобно для простых команд, но для передачи больших массивов данных (например, всего списка товаров) лучше вызывать конкретные именованные функции JS, передавая им JSON-строку.

Передача событий из HTML обратно в 1С

Интерфейс должен быть интерактивным. Когда пользователь нажимает кнопку «Добавить в корзину» в HTML-блоке, мобильная платформа должна об этом узнать. Проанализируем два основных способа реализации обратной связи:

Использование схемы v8auto: Это классический метод для мобильной платформы. При нажатии на ссылку в HTML (например, <a href="v8auto://click?id=123">) в 1С срабатывает событие ПриНажатии (или ПриИзменении) поля HTML-документа. В параметрах события мы перехватываем этот URL и обрабатываем действие.
Объект window.external: Более современный способ, позволяющий вызывать процедуры 1С напрямую. В JS это выглядит как window.external.ИмяПроцедуры(Параметр).

Стилизация интерфейса под системную тему 1С

Чтобы ваше HTML-поле не выглядело «чужим» на мобильном устройстве, важно передать стили платформы в CSS. Выясним, как сделать интерфейс адаптивным. Вместо жестко заданных цветов лучше использовать переменные.

Рассмотрим пример программной передачи цветов шрифта и фона из настроек 1С в стили HTML при загрузке формы:


&НаКлиенте
Процедура ПриОткрытии(Отказ)
    ЦветФона = Элементы.ПолеHTMLИнтерфейс.ЦветФона;
    // Формируем блок стилей с использованием CSS-переменных
    ТекстСтилей = "
    | :root {
    |   --main-bg-color: " + ПолучитьЦветВФорматеHex(ЦветФона) + ";
    |   --main-text-color: #333;
    | }
    | body { background-color: var(--main-bg-color); color: var(--main-text-color); }
    |";
    // Далее передаем эти стили в HTML-документ
КонецПроцедуры

Использование современных библиотек для иерархии и списков

Для реализации иерархии товаров (как просил автор темы) не обязательно писать всё с нуля. Разберем, какие библиотеки можно внедрить в мобильное приложение:

jstree или FancyTree: Отлично подходят для создания быстрых иерархических деревьев, которые легко сворачиваются и разворачиваются.
Bootstrap или Tailwind CSS: Позволяют быстро набросать сетку (Grid System) для планшета, где экран делится на колонки (Меню | Список | Корзина).
Vue.js: Если логика интерфейса очень сложная, можно загрузить упрощенную версию Vue.js прямо в макет 1С. Это обеспечит реактивность: как только 1С передаст новый JSON с остатками, Vue сам перерисует нужные части страницы.

Технические нюансы и оптимизация

Работа в мобильной платформе имеет свои особенности, которые мы должны учитывать:

1. Работа с изображениями: Мобильное устройство может не иметь доступа к интернету. Поэтому все картинки товаров лучше передавать в HTML в формате Base64. Это увеличивает объем передаваемых данных, но гарантирует мгновенное отображение картинок из кэша или базы данных 1С.

2. Виртуальный скроллинг: Если в списке товаров тысячи позиций, обычный HTML-список заставит WebView «тормозить». Рекомендуется использовать библиотеки с виртуализацией (отрисовка только видимых элементов), что обеспечит плавность прокрутки на уровне нативных приложений Android или iOS.

3. WebView: Помните, что 1С использует встроенный движок браузера устройства. На старых планшетах Android возможности CSS могут быть ограничены, поэтому старайтесь использовать проверенные временем свойства верстки.

Выводы по созданию интерфейса

Мы проанализировали ситуацию и выяснили, что создание гибридного приложения (1С + HTML) — это наиболее эффективный способ получить сложный и красивый интерфейс на мобильной платформе. Такой подход позволяет:

Создавать многопанельные интерфейсы для планшетов.
Реализовывать анимацию и плавные переходы.
Использовать готовые UI-фреймворки.
Обеспечивать частичное обновление данных без «моргания» экрана.

Главное — грамотно разделить ответственность: 1С отвечает за бизнес-логику и хранение данных, а HTML/JS — исключительно за их визуальное представление и взаимодействие с пользователем.