Печатные формы, отчеты, HTML,JS в новом релизе SimpleUI. Август 2022.

29.08.22

Разработка - Работа с интерфейсом

В новом релизе решена тема печатных форм или в общем смысле выходных форм, причем сдельно это очень и очень просто. С 1С переучиваться не придется. А HTML и JS в «экранах» это попутный результат - теперь можно размещать HTML в контейнерах. Основная статья и комплект разработчика тут: https://infostart.ru/public/1153616/

Иногда требуется печатать что то с мобильного устройства – ярлыки, чеки, заказы и даже договоры и спецификации. Даже если устройство оффлайн. Для этого нужны макеты как у 1С – т.е. что то, сохраняющее свой вид, размеры, пропорции при выводе. И при этом макет должен заполняться данными. Как решить это минимальными трудозатратами, но при этом еще чтобы было просто разработчику прикладных решений. Первое что приходит на ум – PDF с заполняемыми полями, но на практике с этим форматом оказалось все нестабильно – в каких то случаях работает, в каких то нет. Это не открытый формат к сожалению.
Отличные макеты у 1С. Но как их привинтить к обработчикам на питоне? Оказалось довольно просто – выгрузить в HTML и дать питону. В питоне для этого есть супероружие – шаблонизатор Jinja. А для более запущенных случаев есть еще одно – BeautifulSoap.

Все что нужно знать о jinja чтобы сделать любую печатную форму

Сначала рассмотрим просто HTML– строку, без какой либо разметки - только параграфы. Просто вывод по циклу несколько строк в отдельных парагарфах. Весь обработчик выглядит так:

from jinja2 import Template

t = Template("""{% for user in users -%}
    <p>Привет, {{ user }}!</p>
    {% endfor %}""")
res =t.render(users=["admin", "Alex", "prog1C"])

hashMap.put("PrintPreview",res)

В шаблоне

По сути, из необходимо, что нужно знать о шаблонизаторе – это то, что значения подставляются в двойных фигурных скобках, а не в [] как в шаблонах 1С:

<p>Привет, {{ user }}!</p>

но еще, так как часто приходится выводить табличные части понадобится цикл {% for user in users -%} - {% endfor %}

В коде обработчика

Template – берет html и делает из него шаблон, a render подставляет в шаблон ваши значения и возвращает опять html. Можно конечно вообще обойтись без шаблонизатора Jinja и собирать html динамически, но тогда потеряется вся суть разметки шаблона.

Команда PrintPreview открывает окно предпросмотра и вывода на печать(также теперь можно вывести html на экран) 
По сути, это все что нужно знать из теории. Остальное – приемы разработки.


Вариант печатной формы – накладная с шапкой и строками
 

 

 


 
Рассмотрим вариант – взять из 1С обычную накладную с табличной частью. Берем вот такой макет, выгружаем в HTML через "Сохранить как" и прикрепляем к конфигурации через Медиафайлы. Обратите внимание, что я задал значения в строках через коллекцию (line) чтобы заполнять в цикле.

 


После выгрузки я зашел блокнотом и вставил вот сюда цикл. Закрыл, сохранил, прикрепил в Медиафайлы.

 

И вот весь код обработчика: получаю html строку из файла, передаю шаблонизатору, создаю массив lines - строки таблицы, передаю его и переменные шапки шаблонизатору в render. На выходе получаем html строку, которую передаем экранной переменной размещенной в контейнере (появился новый тип элемента контейнера - HTML)
 

filename = suClass.get_stored_file("bill")

with open(filename) as file_:
   htmltxt = file_.read()

htmltxt.replace("&nbsp"," ")
template = Template(htmltxt)
lines = []
for i in range(1, 5):
  i = str(i)
  line = dict(npp=i, name="Товар "+i,price=str(random.randint(10, 10000)),qty=str(random.randint(1, 5)))
  lines.append(line)

res =template.render(lines=lines,customer = "Дмитрий Воронцов")
hashMap.put("bill",res)

 

 

 

Печатная форма ярлыка из 1С с штрихкодом

 

 

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


Для этого я просто сохраняю форму в HTML через "Сохранить как". Я сделал форму со штрихкодом, где в качестве штрихкода сделал просто рандомную картинку чтобы задать на макете размеры

 

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

Сам обработчик выглядит так

import barcode
from barcode.writer import ImageWriter
from io import BytesIO
from barcode import generate
from jinja2 import Template
from bs4 import BeautifulSoup as BS
import base64
   
    
filename = suClass.get_stored_file("template1")

with open(filename) as file_:
    htmltxt = file_.read()

htmltxt.replace("&nbsp"," ")
    
soup = BS(htmltxt)
for imgtag in soup.find_all('img'):
        EAN = barcode.get_barcode_class('ean13')
        #ean = EAN(u'123456789011', writer=ImageWriter())
        fp = BytesIO()
        generate('EAN13', u'5901234123457', writer=ImageWriter(), output=fp)
        base64data = base64.b64encode(fp.getvalue()).decode('utf-8')
        imgtag['src']="data:image/jpg;base64,"+base64data

 
htmltxt=str(soup)

template = Template(htmltxt)
docdata = { 'number': '1-555', 'customer': "Тульская мануфактура №1",'barcode':'tool.jpg' }

res =template.render(doc=docdata)

hashMap.put("PrintPreview",res) 
 


 

Тут можно обратить на следующие моменты:
1С в макет вставляет "&nbsp", которые не нравятся Jinja поэтому я их убираю фильтром по строке.
Чтобы разместить штрихкод я применяю такой прием – сначала с помощью BeautifulSoap ищу картинку, потом генерирую картинку штрихкода и вставляю на место картинки. Само собой таким же способом можно размещать и просто картинки.
Дальнейшее также как и у предыдущего обработчика – просто подставляю значения и получаю HTML который потом вывожу.

 

Экраны с HTML и JavaScript

Иногда бывает нужно нарисовать что то красивое с картинками, таблицами, например обучающий тьюториал по конфигурации (картинки и «Далее...») и для этого удобнее использовать HTML. Поэтому теперь HTML поле можно размещать в контейнерах. В качестве значения – HTML строку, полученную с помощью Jinja или любым другим способом.

В демо конфе есть этот пример и там показано как размещать вызовы JS и как они потом обработывают события. Т.е. эти кнопки не для красоты - они рабочие, вызывают обработчик ввода симпла и передают ему параметр. Тут полноценный JavaScript

 

Еще небольшое дополнение

 

Появился Java класс, доступный из питона SimpleUtilites, в котором пока один метод get_stored_file который возвращает абсолютный путь к файлу переданному через Медиафайлы - это может быть html как в этой статье или любой другой файл. Пример обращения в примерах печатных форм - получение макета html

 

Подпишитесь на мой Телеграмм канал, чтобы получать актуальные новости и анонсы по проекту Simple UI: https://t.me/devsimpleui

 

Android Simple UI HTML

См. также

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 1С:Конвертация данных Платные (руб)

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

13200 руб.

27.12.2021    37962    108    161    

201

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Программист Пользователь Платформа 1С v8.3 Мобильная платформа 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. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    96928    584    188    

321

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

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

3000 руб.

03.12.2018    59153    191    103    

172

1С-программирование Мобильная разработка Программист Стажер Платные (руб)

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

08.06.2023    9898    0    Infostart    0    

67

Мобильная разработка Платформа 1С v8.3 Конфигурации 1cv8 Финансовые услуги, инвестиции Управленческий учет Платные (руб)

Мобильное приложение и конфигурация 1С для автоматической торговли на бирже через API Тинькофф банка. Достаточно задать настройки, нажать «Пуск», и робот сам торгует ежедневно.

7000 руб.

25.05.2022    4582    1    0    

6

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Богатый редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    62908    44    59    

82

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

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

2400 руб.

29.06.2020    18773    26    6    

41
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. evn-zorin 33 30.08.22 20:10 Сейчас в теме
1С это прикладное программирование для быстрой реализации задач, зачем эти сложности в виде html js и прочей шляпы?
2. dima1c 45 31.08.22 13:50 Сейчас в теме
3. agentz 40 31.08.22 14:01 Сейчас в теме
(1) тут про реализацию печатных форм на другой платформе, причем тут 1С?
4. evn-zorin 33 31.08.22 14:28 Сейчас в теме
(3)всё верно, нужная вещь, в "горячке" вечером был)
Оставьте свое сообщение