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

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

Организация взаимодействия 1С и HTML

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

Суть метода заключается в создании скрытого элемента в разметке HTML, состояние которого мы будем проверять из 1С. Рассмотрим алгоритм действий:

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

Пример реализации связи через JS и 1С

Давайте посмотрим, как это выглядит на практике. Внутри вашего HTML-файла необходимо предусмотреть функцию для изменения состояния элемента:

var myParam;
function f(param){
    document.getElementById("77").textContent = param;
    document.location.href = param;
}

Теперь перейдем к коду 1С. На стороне управляемой формы нам нужно обработать нажатие. Обратите внимание, что мы принудительно отменяем стандартную обработку навигации, чтобы приложение не пыталось открыть внешнюю ссылку.

&НаКлиенте
Процедура Поле1ПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    СтандартнаяОбработка = Ложь;
    #ЕСЛИ МобильноеПриложениеКлиент ТОГДА
        // Извлекаем данные из элемента-посредника с ID "77"
        Значение = ДанныеСобытия.document.getElementById("77").textContent;
        Сообщить("Нажата кнопка: " + Значение);
    #КОНЕЦЕСЛИ
КонецПроцедуры

Рекомендации по созданию современного интерфейса

Чтобы интерфейс не выглядел как «самописная веб-страница», придерживайтесь следующих правил:

• Избавление от системных элементов: Используйте свойства формы для скрытия заголовков и служебных полос, чтобы расширить рабочую область до границ экрана устройства.
• Верстка и стили: Используйте современный CSS для стилизации кнопок и списков. Вы можете применять Base64 для встраивания иконок напрямую в код, что позволит избежать проблем с путями к файлам при работе внутри ПолеHTMLДокумента.
• Масштабирование: Всегда добавляйте в тег head мета-тег viewport, чтобы избежать неконтролируемого масштабирования страницы пользователем: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
• Хранение данных: Рекомендуется упаковывать файлы проекта (html, css, js) в макеты типа ДвоичныеДанные, распаковывая их во временную папку при запуске приложения. Это обеспечит высокую скорость загрузки интерфейса.

Работа со списками данных (Гриды)

Для реализации аналога табличной части в HTML, рассмотрите подход с динамическим заполнением DOM-структуры. Вы можете передавать данные из 1С в HTML-поле с помощью метода Элементы.ПолеHTML.Документ.defaultView. Это позволит вызывать функции JavaScript из 1С, передавая им JSON-структуры с данными запроса, которые затем будут отрисованы в виде красивых карточек или таблиц.

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