СКД на JavaScript в 1С

11.12.23

Интеграция - WEB-интеграция

Долгое время поддерживаю web-портал, в котором появилась необходимость создавать отчеты. Просмотрев различные фреймворки на js, я решил сделать свое решение, которое позволяло бы быстро разрабатывать и добавлять новые отчеты на web-портал.

Файлы

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование Скачано Купить файл
Конфигурация "СКД.JS". (с данными dt)
.dt 209,48Kb ver:1.0.1
29 3 000 руб. Купить

Подписка PRO — скачивайте любые файлы со скидкой до 85% из Базы знаний

Оформите подписку на компанию для решения рабочих задач

Оформить подписку и скачать решение со скидкой

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

Для демонстрации механизма я разработал небольшую конфигурацию, в которой реализовал отчет с различными схемами компоновки. Я не стал все делать в одной схеме, а разделил на несколько схем, для того чтобы схемами было проще воспользоваться используя мои примеры. А так все эти схемы можно объединять в одну или комбинировать в зависимости от задачи.

 

 

В форме отчета идет получение данных для отчета и формируется html с JavaScript, которые передаются в поле HTMLДокумента на форме

 

 

&НаКлиенте
Процедура Сформировать(Команда)
	Результат = ПолучитьHTML();
КонецПроцедуры 

&НаСервере
Функция ПолучитьHTML() 
	
	ОбъектОтчет = РеквизитФормыВЗначение("Отчет"); 
	СКД_JS = ОбъектОтчет.ПолучитьМакет("СКД_JS"+Тип).ПолучитьТекст(); 		
	  
	ДанныеДляТаблица = ПолучитьДанные();
	СКД_JS = СтрЗаменить(СКД_JS,"{ДанныеДляТаблица}",ДанныеДляТаблица); 
	
	Основа = js_СКД_JS.ПолучитьСКДJS(); 
	Основа = СтрЗаменить(Основа,"{СКД_JS}",СКД_JS);	  
	
	Возврат Основа; 
	
КонецФункции

&НаСервере
Функция ПолучитьДанные()
	
	Запрос = Новый Запрос;
	Запрос.Текст = ПолучитьТекстЗапроса();
	
	Запрос.УстановитьПараметр("Д1",Период.ДатаНачала);   
	Запрос.УстановитьПараметр("Д2",Период.ДатаОкончания);
	ТЗ = Запрос.Выполнить().Выгрузить();
	
	Возврат js_СКД_JS.ТаблицаЗначенийВМассивJSON(ТЗ);
	
КонецФункции 

 

Для получения данных использую запрос в котором количество группировок зависит от количества группировок в макете СКДJS. В запросе не рассчитываются итоги для группировок. Итоги для группировок рассчитываются уже в макете СКДJS с помощью библиотеки AlaSQL (https://alasql.org/) (AlaSQL применяет операции SQL к массивам и объектам JavaScript, поэтому библиотеку лучше всего можно описать как базу данных JavaScript SQL.)
 

 

Пример запроса для расчета итогов по группировкам через AlaSQL

 

 

После выполнения запроса выгружаю данные в таблицу значений и преобразую ее в Массив структур в формате JSON. Название русских полей автоматически преобразуются в английские. И если в поле содержалась ссылка, то дополняю структуру свойством "название поля + guid" эти данные пригодятся если в отчете нужно реализовать открытие объекта по ссылке.

 

 

Дизайн отчетов реализован с помощью стилей bootstrap 5 (https://getbootstrap.com/), подключаю их из макета так что для работы отчетов не требуется подключение к интернету. Также к шаблону html подключаю таблицу стилей CSS при желании дизайн можно полностью переписать на чистый CSS. 

 

Структура макета СКД_JS.

1. В groups располагаются запросы группировок и общих итогов 

2. Выполняем запросы в библиотеке AlaSQL

let group2 = alasql(this.groups[0],[state.data])
let group1 = alasql(this.groups[1],[group2])  
let total = alasql(this.groups[2],[group2])

3. Циклы по группировкам (вложенность зависит от количества группировок)

4. В getTD хранятся функции обработки группировок, строк, итогов. Они используются в циклах через this.

5. Шапка таблицы

6.Данные в формате json (массив структур)

7. Описание общих стилей таблицы bootstrap 5

Далее переменная state будет передана в объект класса Table, который выведет таблицу.

 

 

Примеры отчетов:

 
 Без группировок

 

 
 Одна группировка

 

 
 Две группировки

 

 
 Три группировки (в одной колонке)

 

 
 Три группировки (в разных колонках)

 

 
 С картинкой

 

Google таблица расположена в теге iframe в принципе там можно расположить любой сайт, портал, которые поддерживают отображение в теге iframe.

Чтобы получить iframe для google таблице нужно зайти файл->поделиться->Опубликовать в интернете->Встроить. Выбрать нужный лист и нажать опубликовать. При изменении google таблицы автоматически обновляется публикация. Поэкспериментировав данные обновляются не мгновенно, но в течении нескольких минут. 

 
 С google таблицей

 

 
 С расшифровкой

 

 
 Итоги вверху и внизу

 

 
 С поиском

 

 
 С оформлением

 

Тестировал: 

  • Платформа 1С:Предприятие 8.3 (8.3.22.1709).

 

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

См. также

Инструментарий разработчика Роли и права Запросы СКД Программист Руководитель проекта 1С:Предприятие 8 Платные (руб)

Инструменты для разработчиков 1С 8.3: Infostart Toolkit. Автоматизация и ускорение разработки на управляемых формах. Легкость работы с 1С.

16500 руб.

02.09.2020    237512    1287    419    

1104

Сайты и интернет-магазины WEB-интеграция Системный администратор Программист Пользователь 1С:Предприятие 8 1C:Бухгалтерия 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM / LOGICSTARS. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM / LOGICSTAR разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    22948    33    24    

26

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

Модуль "Экспортер" — это расширение для 1С, предназначенное для автоматизации процессов выгрузки данных. Оно позволяет эффективно извлекать, преобразовывать и передавать данные из систем 1С в интеграционную платформу Spot2D. Подсистема упрощает настройку, снижает количество ручных операций и обеспечивает удобный контроль данных.

17280 руб.

20.12.2024    5039    22    4    

24

WEB-интеграция Программист 1С:Предприятие 8 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Расширение для автоматизации передачи данных между сервисом Vetmanager с 1С: Бухгалтерия 3.0. Решение позволяет загружать документы и справочники из Ветменеджер в 1С:Бухгалтерию, сокращая время на ручной ввод данных и минимизируя ошибки.

24000 руб.

02.02.2021    21607    62    52    

40

WEB-интеграция Загрузка и выгрузка в Excel Программист Пользователь 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

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

12000 руб.

29.08.2025    1395    2    0    

3

Обмен с ГосИС WEB-интеграция Бухгалтер Пользователь 1С:Предприятие 8 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

5196 руб.

28.04.2016    99639    114    218    

362
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. AlexHelmer 2082 11.12.23 10:40 Сейчас в теме
2. Трактор 1263 11.12.23 10:45 Сейчас в теме
Красиво. Практическое применение можно придумать. Например, возвращать готовый ХТМЛ внешнему получателю..
3. starik-2005 3208 11.12.23 12:06 Сейчас в теме
(2)
возвращать готовый ХТМЛ
https://altair-viz.github.io/
MrFlanker; +1 Ответить
6. Трактор 1263 11.12.23 14:08 Сейчас в теме
7. starik-2005 3208 11.12.23 14:17 Сейчас в теме
14. Трактор 1263 12.12.23 11:06 Сейчас в теме
(7) открывается, а что это?
19. siamagic 13.12.23 06:14 Сейчас в теме
(2) 1 с возвращает хтмл 5 строками кода с типовым оформлением, зачем это убожество вообще непонятно.
4. Tavalik 3450 11.12.23 12:20 Сейчас в теме
Завидую вашей способности делать еще такие проекты, да еще и на другом стеке после основной работы. Это круто!
5. aximo 2563 11.12.23 12:22 Сейчас в теме
8. s_vidyakin 68 11.12.23 14:41 Сейчас в теме
А зачем в этой схеме 1С, я че то не понял... Интегрировал бы тогда уж в реакт или вью
ketr; so-quest; +2 Ответить
12. anosin 29 11.12.23 23:08 Сейчас в теме
(8) видимо данные из базы 1с достать? Но также не понятен смысл этих отчётов.
Danila-Master; siamagic; +2 Ответить
9. acsent 1207 11.12.23 16:40 Сейчас в теме
С большими таблицами как я я понимаю напряженно все будет. Ибо createElement в цикле.
И про виртуализацию наверно тоже речи нет
10. John_d 6072 11.12.23 16:47 Сейчас в теме
(9) с createElement все нормально и с большими данными, к примеру у react и vue createElement под капотом.
18. acsent 1207 12.12.23 22:05 Сейчас в теме
(10) У реакта целая подсистема чтоби минимизировать createElement. Именно из-за этого он и взлетел
11. Dzenn 926 11.12.23 21:06 Сейчас в теме
Главный вопрос — зачем?)
Danila-Master; zqzq; +2 Ответить
13. s_vidyakin 68 12.12.23 03:00 Сейчас в теме
(11) было бы полезно сделать такой редактор который принимает JSON с данными и по нему генерит набор фильтров, группировок, сортировок. А ты из них собираешь отчет. Только причем тогда тут 1С )) Наверно только для выдачи по API данных в определенном формате JSON
15. starik-2005 3208 12.12.23 11:29 Сейчас в теме
(13)
было бы полезно сделать такой редактор который принимает JSON с данными и по нему генерит набор фильтров, группировок, сортировок
На JS это уже есть в разных вариантах. Например, Vega, которая в купе с Альтаиром на питоне, который генерит под нее JSON из дэйтфреймов, позволяет очень красиво визуализировать данные, при том и интерактивно тоже.
16. Boneman 302 12.12.23 15:50 Сейчас в теме
Круто, молодец !
Всегда интересно узнать что-то новенькое )
17. JetBrain 80 12.12.23 18:24 Сейчас в теме
давайте уже всю 1С на JS переведем))) вот наш скромный прототип в начальной стадии eva.brainrs.com, но это только потренироваться кодить js и html.
20. s_vidyakin 68 13.12.23 16:16 Сейчас в теме
(17)
eva.brainrs.com
Я уже начинал по приколу делать 1-в-1, но на реакте (Next.js) )) правда некогда дальше развивать
Прикрепленные файлы:
21. John_d 6072 13.12.23 17:02 Сейчас в теме
(20) выглядит прикольно. Можно сделать, как шутка типа конфигуратор.
Я бы правда делал на tailwind css, т.к. тут считай один дизайн и верстка (и немного чистого js)
Возможно сделаю как-нибудь)
23. s_vidyakin 68 14.12.23 02:06 Сейчас в теме
(21) не, я планировал полноценный конфигуратор сделать, редактор объектов и форм. Как минимум - пет проект, как максимум - рабочий аналог с генерацией таблиц в БД и классов и моделей на бэке на Typescript. А потом клиентскую часть с UI на основе всего этого, тоже в точности как 1С ))
22. JetBrain 80 13.12.23 17:45 Сейчас в теме
(20) мы не стремимся в точности интерфейс воспроизвести, но смотрится красиво. чтобы не перегружать код и фокусироваться только на функционале. и для чтения только ванильный js, ориентированный больше на новичков.
24. biruk 7 11.01.24 19:03 Сейчас в теме
(20) Красиво смотрится! Код открыт? Можно глянуть?
25. John_d 6072 16.01.24 11:49 Сейчас в теме
26. Viktor_Ermakov 394 10.02.25 09:30 Сейчас в теме
Скрещивание 1С и "HTML/css/js" это интересно и увлекательно, и даже иногда полезно. Например консоль VSC в 1С, очень сильно взлетело, по разным проектам.
Не понятно как это будет в 8.5, но надо пробовать и продолжать развивать это направление.
Спасибо за работу!
27. kihawi 26.03.25 22:56 Сейчас в теме
(26) можете подсказать пожалуйста как из 1с тригерить функции js и наоборот? Раньше передавали прям форму в js, а сейчас как?
28. Viktor_Ermakov 394 28.03.25 08:54 Сейчас в теме
(27) В основном через нажатие кнопок, если нет другого выхода.
29. kihawi 28.03.25 08:56 Сейчас в теме
(28) Имеете ввиду невидимые кнопки и программно их тригерить?
30. Viktor_Ermakov 394 28.03.25 08:57 Сейчас в теме
(29) ну если нужно вызвать 1С то да, если нужно вызвать JS то там через JS вешаем прослушивание
Для отправки сообщения требуется регистрация/авторизация