Пример оптимизации интерфейса динамического списка в мобильном приложении, сделанном на 1С при помощи HTML + CSS

24.02.26

Разработка - Мобильная разработка

Пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С.

Добрый день!

Хочу привести пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С.

Разницу вы сами можете проверить, скачав приложение и переключив флаг в настройках "Оформление HTML".

  • С выключенным флагом - стандартный интерфейс от 1С (форма списка справочника, на ней - динамический список)

  • С включенным флагом - список формируется при помощи HTML+CSS.

Описание приложения:
Мобильное приложение на 1С «Доходность облигаций»

Ссылка на скачивание:
Скачать приложение "Доходность облигаций" на RuStore

Удалось решить несколько проблем со стандартным интерфейсом 1С:

  1. При прокрутке (скроллинге) динамического списка полностью исчезли задержки при отображении списка.

  2. Дизайн стал более живым, интересным, логичным.

  3. Расположение элементов стало более адаптивным.

 

Старый интерфейс облигаций:

 

 

Новый интерфейс облигаций:

 

 

Вариант отображения списка регулируется в настройках, пункт "Оформление HTML":

 

 

Старый интерфейс акций:

 

 

Новый интерфейс акций:

 

 

Реализация на 1С очень хорошо и подробно описана в этой статье:
Пример использования HTML-интерфейса для мобильного приложения (+JS, +CSS)

Не вижу смысла пересказывать её в контексте моей статьи, я сделал тоже самое, для разметки списка использовал flexbox, и для акций и для облигаций использовал одну и ту же функцию формирования HTML-текста.

Основной посыл статьи - продемонстрировать на конкретном примере, как достаточно легко меняется интерфейс мобильного приложения (frontend), сделанного на 1С, в случае, если он вас чем то не устраивает.

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

Вступайте в нашу телеграмм-группу Инфостарт

См. также

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Программист Пользователь 1С:Предприятие 8 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный ТСД (терминал сбора данных) сканер для 1С для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

3050 руб.

22.04.2019    116236    697    205    

368

Мобильная разработка Сканер штрих-кода Терминал сбора данных 1С:Предприятие 8 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн - все это содержит в себе решение 1С "Штрихкод-информер" (штрих-код чекер). Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

3050 руб.

03.12.2018    68283    230    106    

186

Мобильная разработка Мессенджеры и боты 1С:Предприятие 8 Платные (руб)

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

13420 руб.

27.12.2021    51131    129    175    

226

Мобильная разработка Программист 1С 8.3 1С:Комплексная автоматизация 2.х 1С:КА Управленческий учет Абонемент ($m)

В этой статье простейший документ - ориентированный пример складского учета на клиент-серверной платформе NodaLogic с автономными мобильными рабочими местами. Это чисто скелетный пример как можно вынести часть учета во внешний контур. И расширение - модуль связи с 1С. Тестировалось на платформе 1С:Предприятие 8.3 (8.3.27.1326), 1С:Комплексная автоматизация 2 (2.4.8.63).

1 стартмани

13.02.2026    1395    informa1555    4    

22

Мобильная разработка 1С:Предприятие 8 1С:Управление торговлей 11 Оптовая торговля, дистрибуция, логистика Россия Платные (руб)

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

19000 руб.

24.06.2025    2358    1    0    

2

Мобильная разработка Программист 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х Абонемент ($m)

Товары (либо другие учетные объекты) могут быть промаркированы штрихкодами либо быть без штрихкодов, но с число-буквенным обозначением (артикулом, VIN-номером и т.д.). И та, и другая ситуация не проблема для SimpleUI. Но что делать, если нет ни того, ни другого? Вообще никакой маркировки. Как можно максимально ускорить работу с таким объектами? В статье показываю новые фичи релиза и готовые для встраивания поисковые комбайны на все случаи жизни. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

1 стартмани

14.04.2025    3114    7    informa1555    0    

16

Мобильная разработка Программист 1С:Предприятие 8 Абонемент ($m)

В Simple появился еще один онлайн-режим, не через REST-API, а через веб-сокеты. Показываю, что это дает, ради чего было сделано. А также два чисто онлайновых примера с такими обработчиками еще и с использованием новой ActiveCV 2.0. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

1 стартмани

07.02.2025    6081    informa1555    3    

28
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. coollerinc 188 10.03.26 17:01 Сейчас в теме
а как сделал сам динамический список? Какие запросы выполняются при прокручивании, как отслеживал что докрутил до конца списка?
2. Suker86 77 10.03.26 20:32 Сейчас в теме
Перечитал текст своей статьи, и действительно, не понятно, каким образом я "оптимизировал" список.

Отвечаю:
(1) В старом варианте (без html) с динамическим списком ничего не делал, он стандартный, с произвольным запросом из регистра сведений.

В новом варианте (с html) я вместо списка вывожу html поле с содержимым html страницы, а сам динамический список делаю недоступным на форме.
3. coollerinc 188 11.03.26 02:12 Сейчас в теме
(2) Да я спрашивал про вариант с HTML, откуда получаются данные, для формирования строк HTML? Формируются все данные сразу или получаются порционно, как в настоящем динамическом списке?

Я пробовал делать динамический список на HTML, и понял, что нельзя отследить, когда долистал до конца списка, т.к. платформа ловит только когда пользователь нажимает на тег <a> со ссылкой
5. coollerinc 188 11.03.26 12:11 Сейчас в теме
(4) Понял, спасибо за ответ
Для отправки сообщения требуется регистрация/авторизация