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

24.02.26

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

+5 –
> > > >
  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg
  • 5.jpg
Пример небольшой оптимизации интерфейса (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С.

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

+5 –

Вы можете заказать платную адаптацию этой статьи под ваши задачи на «Бирже заказов».

  • 0% комиссии — оплата напрямую исполнителю;
  • Исполнители любого масштаба — от отдельных специалистов до команд под проект;
  • Прямой обмен контактами между заказчиком и исполнителем;
  • Безопасная сделка — при необходимости;
  • Рейтинги, кейсы и прозрачная система откликов.

См. также

1С.Информер

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

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

3050 руб.

03.12.2018    72914    250    108    

191
Программа "Мобильный ТСД для 1С" - приложение для телефона для инвентаризации и сбора штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Разработчик Пользователь 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    124906    739    207    

391
Сканер QR-кода и штрих-кодов для Android, терминал сбора данных (ТСД), подписка на штрих-код Комбайн

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

Android смартфон как беспроводной сканер штрих-кодов, QR-кодов (2D), терминал сбора данных (ТСД), подписка на штрих-код Комбайн

2196 руб.

18.01.2017    152653    235    237    

255
ЗапросРедактор — бесплатное мобильное приложение для разработчиков и консультантов 1С

Мобильная разработка Бесплатно (free)

Android-клиент: конструктор и выполнение запросов 1С по HTTP к опубликованной базе. Часть экосистемы КонфигРедактор.

06.10.2026    1877    54    aleksandrboldyusov    0    

30
Коммуникатор процессов 1С/NodaLogic

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

Эта подключаемая обработка для любой конфигурации 1С, позволяет отправить любой объект (и рекуррентно связанные с ним объекты) на устройства c NodaLogic, где они будут полнофункциональны и доступны офлайн, по ним можно вести переписку как со стороны чата в NodaLogic, так и со стороны 1С, заполнять данные и загрузить в 1С по мере надобности. Т.е. обработка содержит генератор UI/UX интерфейса NodaLogic и создает объекты для обмена. При этом не надо ни разбираться в NodaLogic вообще, ни иметь базу/сервер/решение на стороне NL – только учетка и мобильное устройство, а со стороны 1С достаточно галочками отметить, какие поля должны быть на формах. Все данные хранятся в ХранилищеОбщихНастроек, поэтому никакого расширения не нужно, сервера со стороны 1С для связи с устройствами тоже не нужно. Тестировалось на 1С:Предприятие 8.3 (8.3.27.1326), 1С:Комплексная автоматизация 2 (2.4.8.63)

1 стартмани

12.05.2026    1550    6    informa1555    1    

14
Интерпретатор 1С языка в NodaLogic

Мобильная разработка Разработчик Бесплатно (free)

Мне нужен был высокопроизводительный язык для фронт-сайда, я его сделал, а потом подумал, а что, если сделать 1С-синтаксис? Вот что из этого вышло. Продолжение статьи https://infostart.ru/1c/articles/2614496/

12.03.2026    2833    informa1555    11    

14
Модуль интеграции 1C с NodaLogic и пример автономного учетного решения

Мобильная разработка Разработчик 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    4119    informa1555    5    

27
1Scan — интеграция Android‑устройств с 1С

WEB-интеграция Мобильная разработка Разработчик 1С:Предприятие 8 1С:Библиотека стандартных подсистем Россия Бесплатно (free)

Бесплатное приложение для интеграции веб-клиента 1С с Android-устройством. Просто установите, укажите веб-адрес вашей базы 1С - и пользуйтесь привычным интерфейсом с расширенным доступом к функциям устройства: лазерный и имидж-сканер ТСД, сканер штрихкода камерой, GPS, Bluetooth, фотокамера, NFC и многое другое.

05.08.2025    4684    221    OneScan    25    

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

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

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

Я пробовал делать динамический список на HTML, и понял, что нельзя отследить, когда долистал до конца списка, т.к. платформа ловит только когда пользователь нажимает на тег <a> со ссылкой
+ – Ответить
4. Suker86 87 11.03.26 07:16 Сейчас в теме
(3) Я формирую сразу все данные.

Есть пример от моего друга: можно отследить что активно в ДОМе только то что надо показать юзеру сейчас, должны быть видны только ~20 элементов одновременно
Ссылка открывается с включенным vpn.
+ – Ответить
5. coollerinc 189 11.03.26 12:11 Сейчас в теме
(4) Понял, спасибо за ответ
+ – Ответить
6. i4eX 2 29.06.26 09:03 Сейчас в теме
Добрый день!

Приложения интересное, далее небольшая критика и предложения по улучшению.

1) Не совсем понятно как работает срок и дистанция. Т.е. в моем понимании было так - ставлю срок от 2 лет, дистанция 2 года, хочу увидеть результат расчета на эту дистанцию по облигациям со сроком от 2 лет, но вижу в итоге расчет по таким облигациям, но за весь их срок. Может быть конечно не правильно понял как работают эти поля.

2) Крайне не хватает отбора по наименованию, особенно в корпоративных. Например я хочу посмотреть только РЖД и не могу этого сделать, приходится крутить весь список. Как вариант поиск по наименованию которое начинается с указанных символов (например ввел Сбер - выводятся все у которых наименование начинается со Сбер, без учета регистра.)

3) Возможно стоит сделать несколько видов сортировок Срок, Наименование, Величина купона, Ставка, Цена облигации и т.п.

3) Возможно было бы удобней задавать Сумму инвестиций так же в настройках общую для всех, а не в каждой облигации отдельно. Если сумма задана в настройках, то используется как общая для всех, если не задана, то можно сменить в каждой облигации отдельно. Если в какой-то облигации задана отдельно и в настройках задается общая, то в этой облигации так же меняется на общую (возможно с предупреждением, что сумма инвестиций установленная в отдельных облигациях будет изменена).
+ – Ответить
7. Suker86 87 29.06.26 23:30 Сейчас в теме
(6) Доброй ночи, отлично, что вы даёте обратную связь.
Отвечаю по пунктам:

1) Срок - это простой фильтр который ограничивает выборку облигаций в расчет (и, соответственно в форму списка облигаций) по сроку погашения, работает это так:
Указан только срок "до"= 10 лет, то берутся все облигации сроком погашения до 10 лет.
Указан только срок "от" = 3 года, то берутся все облигации сроком погашения от 3 лет.
Указан срок И "от"=3 лет И "до"=10 лет, то берутся облигации сроком погашения от 3 до 10 лет.

А вот фильтр "дистанция" нужно применять, если вы выбираете вариант расчета "с реинвестированием" дохода от купонов, т.е. когда вы рассчитываете "эффективную доходность".

Расчет предполагает, что если вы продадите облигации с 10-летным сроком погашения через 2 года,то вы продадите их по цене равно пропорционально увеличению за 2 года из 10.
Поэтому вы не видите разницу при расчете простой доходности. На пару сотых влияет только НКД.

С помощью дистанции можно сравнить эффективную доходность у 2х совершенно разных по сроку погашения облигации.

Например, вы планируете выбрать самые доходные облигации. У вас есть цель, накопить на квартиру за 5 лет с использованием ИИС - вы не платите НДФЛ ни с тела, ни с купонов. Предложим, вы будете реинвестировать купоны в те же самые облигации.

Ставим фильтр, срок от 5 лет, дистанция 5 лет, без НДФЛ.

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

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

Вы можете посмотреть подробный расчет эффективной доходности каждой облигации, зайдя в карточку облигации и выбрав вкладку "эффективная доходность". Периоды реинвестирования дробятся сроками выплат купонов и ограничиваются заданной дистанцией.
+ – Ответить
8. Suker86 87 29.06.26 23:40 Сейчас в теме
(6)
2) Отбор по наименованию доступен в форме списка при использовании в настройках стандартного 1с интерфейса.
РЖД очень удобно отбирать, фото прикладываю.
Так же в стандартном интерфейсе доступен глобальный поиск по тексту и в облигациях и в акциях.

К сожалению, для веб интерфейса я пока отбор на форме не сделал, может быть сделаю позже. На данный момент можно в стандартном интерфейсе 1с добавить всё интересующее в избранное, а потом использовать только избранное в веб интерфейсе.

3) Цель приложения - помочь выбрать самые доходные облигации исходя из сроков и параметров. Я, например, не считаю купонную доходность тем параметром, по которому нужно сортировать облигации, так как это не единственный ключевой параметр доходности облигаций.
Кстати, в стандартном интерфейсе сортировка по сроку, купону работает стандартная.
Все параметры, которые вы перечислили есть в обычных брокерских приложениях, но ни одно брокерское приложение не позволит вам посчитать доходность без учета НДФЛ или рассчитать эффективную доходность с реинвестированием купонов или сравнит разные облигации на дистанции владения.
Не хотел загромождать приложение тем, что и так много в обычных приложениях, тем более рабочая область сильно ограничена по размеру.

4) По умолчанию, если сумма инвестиций не указана пользователем, она равна 1 млн. Т. е. можно считать это общей настройкой. Когда сумма указана - считается заданная сумма. Опять же, сумма выступает в приложении скорее для наглядности расчета, основное это доходность, от неё нужно отталкиваться, а не от суммы.
Прикрепленные файлы:
+ – Ответить
9. i4eX 2 30.06.26 12:54 Сейчас в теме
Спасибо за ответы.
Suker86; +1 – Ответить
Для отправки сообщения требуется регистрация/авторизация