1с создать html документ
В статье на примере будут описаны все этапы создания поля html документа. В 1с html поле позволяет представить данные, которые не требуется редактировать, в более эстетичном виде. Разработчик может применить возможности html для создания и настройки формы справочника или бизнес-процесса (как делается в конфигурации Документооборот).
Рассмотрим пример. Разработаем обработку, которая будет представлять элемент справочника Пользователи в виде поля html документа. Для разработки примера я использовал демо БСП 3.1 (управляемое приложение).
Выведем в документ следующие поля справочника:
- Наименование и Комментарий в виде текста;
- ФизическоеЛицо и Подразделение в виде ссылок;
- Фотографию пользователя;
- Контактную информацию в виде таблицы.
Размещение реквизитов на форме
Для начала создадим внешнюю обработку и добавим форму. На форме создадим два реквизита Пользователь (тип СправочникСсылка.Пользователи) и ПредставлениеHTML (тип Строка неограниченной длины). Перетащим реквизиты в дерево элементов. Для элемента ПредставлениеHTML выберем вид Поле HTML документа и отключим отображение заголовка. Должно получится так:
Теперь поработаем над программной частью формы:
- Заполнять html поле данными будем при изменении пользователя. Поэтому создадим для него обработчик события ПриИзменении;
- Работа же с самим полем потребует перехода на сервер, так как нам необходимо выполнять запрос и получать данные из хранилища значений. Поэтому для заполнения данных html создадим функцию ЗаполнитьHTMLПредставление с директивой НаСервереБезКонтекста. В качестве параметра передадим в нее ссылку на пользователя;
В итоге должно получиться следующее:
Получение данных
Во входные параметры функции ЗаполнитьHTMLПредставление мы передаем только ссылку на пользователя, поэтому для начала надо собрать все данные, необходимые для вывода в html документ. Для этого воспользуемся запросом, который вынесем в отдельную процедуру. Приводить текст процедуры здесь я не буду, чтобы не занимать много места. Ознакомиться с ним можно во внешней обработке, ссылка на которую находится внизу статьи.
Функция возвращает структуру, в которой содержится две выборки. Первая, ВыборкаДанных — содержит одну строку с основными данными пользователя. Вторая, ВыборкаКонтактов — содержит контактную информацию пользователя, в разрезе двух полей: Вид и Представление. Вызов функции получения данных выглядит так:
Заполнение стилей 1с html поля
Теперь в функции ЗаполнитьHTMLПредставление будем описывать html документ. Начнем с обязательных тегов и . После чего перейдем к заполнению стилей (тег ), которые будут применяться во всем документе, а также в отдельных его блоках.
Рассмотрим заполнение стилей более подробно:
Создание тела html документа в 1с 8
После описания стилей займемся формированием тела документа. Для этого используем тег .
Вывод изображения в html
Начнем с вывода фотографии пользователя. В элементе справочника она хранится в реквизите Фотография, в виде хранилища значения. Его мы получили вместе с остальными данными пользователя, при помощи запроса.
Разберем представленный код:
- Хранилище содержит двоичные данные изображения, их необходимо получить. Используем для этого метод Получить(), который распаковывает данные хранилища;
- В html мы можем вывести изображение либо указав ссылку на него, либо использовав его двоичные данные, в кодировке base64. Для этого используем метод Base64Строка;
- После подготовки данных, можно выводить их в документ.
- Используем тег , применяемый для вывода изображений;
- Атрибут src указывает адрес выводимого изображения или его данные. У нас это двоичные данные, поэтому в дополнение к ним необходимо использовать префикс data:image/ и указание типа данных base64.
Для того чтобы отделить изображение от следующей информации, используем тег
. Он означает начало нового абзаца. При описании стилей мы указали, что перед началом нового абзаца устанавливается отступ в 10 пикселей.
Вывод текстового реквизита в html
После фотографии выведем основные данные пользователя в следующем формате:
Начнем с имени пользователя:
Разберем представленный код:
- Для того, чтобы имя реквизита не сливалось с его содержанием, выделим его другим цветом. Для этого используем свойство , позволяющее изменять характеристики текста. В нашем случае это цвет color.
- После вывода данных используем тег
. Он предназначен для перехода на следующую строку.
Вывод ссылки в html
Теперь выведем в документ физлицо пользователя. Так как оно представлено ссылочным типом, оформим его в виде ссылки.
Разберем представленный код:
Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.
Вывод всех реквизитов будет выглядеть следующим образом:
Вывод таблицы в html 1с
Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.
На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст.
В итоге у нас получается html поле, заполненное следующим образом:
Обработка нажатия на ссылку
В обработчике мы анализируем текст ссылки, на которую произошло нажатие. Если это навигационная ссылка, обрабатываем ее по отдельному алгоритму. Получаем текст и осуществляем переход. Таким образом при нажатии на ссылку, у нас произойдет переход на форму элемента справочника.
В статье будут разобраны способы использования визуального HTML Редактора NicEdit в 1С 8.2 и 1С 8.3, который существенно меньше по размерам, чем TinyMCE. Показано достоинство этого редактора. Приведены обработки, которые работают как на компьютерной платформе, так и пример реализации обработки, которая предназначена для мобильной платформы. Решение испытывалось на платформах 1С 8.2.12 и 8.3.20, и мобильном клиенте 8.3.19.59.
Краткий обзор предистории
Не так давно решил написать собственную конфигурацию для автоматизации Help-Desk. Более того, эту систему захотелось сделать универсальной. Встал вопрос - а как-же обеспечить удобный ввод для заявок пользователей? Для этого используется HTML документ. 1С предлагает несколько объектов:
- Форматированный документ. Сравнительно новый объект, имеющий много недостатков. Более того, этот объект нельзя полноценно использовать в обычных формах.
- Поле HTML документа. Это решение было ещё в 1С 8.1. Основным достоинством является то, что работа с этим объектом такая же как с текстом, и не портится форматирование документа - есть возможность редактировать.
Поэтому был выбран вариант Поле HTML документа. Но тут ждал "сюрприз": У Поле HTML документа нет встроенной в 1С командной панели в режиме управляемого приложения. Собственного говоря, про один из способов решения данной проблемы и будет эта статья.
Способы доработки HTML документа в управляемом и обычном приложении
Если их сократить, то получится 3 варианта:
- Написать собственный редактор HTML документа из 1С.
- Использовать компактный готовый визуальный редактор, написанный на javascript.
- Использовать полноценный HTML визуальный редактор на Javascript.
Первый подход был реализован на 1С в нескольких публикациях. Обладает одним серьезным недостатком - приходится писать полностью код от и до. Такой подход может провалиться, если была замена синтаксиса, например отказ от модальности и редактор с 1с 8.2 придется переписывать для работы на 1с 8.3. Однако, на мобильном приложении 1С - этот вариант имеет все шансы на реализацию, что связано с эффективностью использования размера экрана мобильного устройства.
Второй подход является хорошим, однако надо понимать 2 ограничения:
- Его функционал будет меньше, чем у полновесного редактора. При этом имеется в виду то, что сам редактор хоть и будет функциональным, но его функционал будет менее обширным чем TinyMCE.
- Методика интеграции микроредакторов для различных типов приложений и клиентов, если применяется способ хранения текстов внутри макетов (их будет как правило несколько), может существенно отличаться.
Микроредактор NicEdit
Их визуальных html редакторов автору статьи приглянулись несколько визуальных редакторов. Один из них - это NicEditor. Простой визуальный html редактор. Официальный сайт этого редактора
Данный редактор является визуальным микроредактором. Под микроредактором я имею ввиду редактор, код которого собран в один или несколько файлов js, в которых нет сложной взаимоинтеграции по файлам. Т.е. пути в таком редакторе могут быть легко подправлены путем строковых операций.
Существенные преимущества - низкие требования. Достаточно даже IE 6.0. Пример теста на Windows 98 fe с последним IE 6.0:
Но и в современных браузерах, которые являются сборками Chrome - чувствует себя прекрасно. При этом, если скачать данный редактор, то структура каталога загрузки будет выглядеть таким образом:
Как видно из скриншота такой редактор легко можно интегрировать в обработку и спокойно носить с собой. Однако возникает вопрос, а как его подключить в различных режимах приложения 1С? Если в Толстом и Тонком клиенте все элементарно, ничего придумывать для этого не требуется (можно использовать методы, описанные в публикации TinyMCE редактор HTML WYSIWYG. Интеграция во все виды управляемого и обычного приложения), то ситуация с ВебКлиентом значительно хуже - там нужен или внешний каталог или метод развертки редактора на сервере.
Для демонстрации этапов внедрения по методу развертки редактора на сервере выберем 2 компьютерные платформы:
- 1С 8.3.20.Эта практически последняя версия 1С на апрель 2022.
- 1С 8.2.12. Эта одна из самых первых реализаций 1С 8.2, которая стала доступна публично.
А для работы с мобильным приложением выберем версию 8.3.19.59 и Эмулятор Андроид BlueStarks 5.0.
Поэтому для начала рассмотрим как интегрировать в Управляемое приложение в режим WebКлиент (и заодно мобильное приложение - здесь они будут одинаковы).
Интеграция в ВебКлиент и мобильное приложение микроредактор NicEdit
Самым проблемным местом в интеграции выступает в первую очередь ВебКлиент, так как для него не предусмотрены функции для работы с файлами (ради справедливости файловые методы в браузерах появились тоже не очень рано, а до их появления использовали java-апплеты).
Итак, для этого режима примем следующее:
Вставка картинки в веб-клиент осуществляется по методу:
- Получить двоичные данные картинки.
- После этого получить "постоянную" ссылку на картинку из "временного хранилища".
Формула постоянной ссылки на картинку:
Эта ссылка будет одинаковой как на Сервере, так и на Клиенте. Теперь остался только последний этап интеграции - необходимо загнать код редактора в HTML поле.
Ну для этого можно использовать следующий код:
Этот кусок кода как видно выше, осуществляет простую сборку текста следующим образом:
Как видно из скриншота - редактор работает в тестовом режиме. Основной недостаток такого редактора его низкая функциональность и отсутствии русского языка локализации.
Для мобильного приложения код интеграции будет таким:
Отличие от предыдущего режима - у нас нет возможности использовать ТекстовыйДокумент в мобильном приложении, а поэтому придется пойти через двоичные данные, и через временный файл конвертировать двоичные макеты в текстовые файлы.
Естественно, что про удобство говорить не приходится - не удобно, но на данном этапе редактор уже работает - значит пользоваться можно. Для Тонкого Клиента в виду простоты редактора не требуется дополнительно инициализировать редактор.
Интеграция в Обычное приложение микроредактор NicEdit.
Эта задача тривиальна, тем не менее, чтобы не плодить макеты приведу код, макеты которого расположены в обработке, работающей только на платформе для ПК:
Здесь все похоже на управляемые формы за исключением:
- Мы получаем ссылку не на хранилище, а на сам файл. Следовательно слэш с прямого надо менять на обратный в имени временного файла.
- Для того, чтобы активировать редактор нужно сгенерированный код записать в временный HTML документ, и затем выполнить принудительный переход на получившийся файл.
Пример кода для согласования обычного приложения с двоичными макетами приведен во второй обработке.
Заключение:
Я показал интеграцию только самого простого микроредактора. На самом деле их ещё больше, и уместить в одну статью процессы интеграции невозможно, тем не менее, при правильном подборе таких редакторов можно существенно расширить функционал - в ряде случаев он получается больше, чем стандартный 1С функционал для HTML документа в обычном приложении.
HTML-редактор используется для создания пользовательских описаний в виде HTML-документов. Окно редактора содержит три закладки, позволяющие осуществлять просмотр и редактирование документа.
На закладке Редактирование документ отображается в текстовом и графическом виде:
На закладке Текст разработчик имеет возможность редактировать HTML-текст документа:
Закладка Просмотр предназначена для отображения документа в том виде, в котором он будет показан пользователю:
Работа с HTML-документом напоминает работу в обычном текстовом редакторе, однако HTML-редактор предоставляет ряд дополнительных возможностей, которые обусловлены использованием формата HTML:
Форматирование текста
Текст HTML-документа можно форматировать: устанавливать его стиль, абзацные отступы, выбирать размер шрифта, параметры, гарнитуру и т. д.:
При копировании текста из других текстовых редакторов (например, Word) HTML-редактор сохраняет исходное форматирование текста.
Таблицы
В HTML-документ можно вставлять таблицы и редактировать как параметры отдельных ячеек таблицы, так и изменять внешний вид и параметры всей таблицы:
Картинки
В HTML-документе могут быть размещены картинки. Разработчик имеет возможность задавать размеры картинки, ее положение и толщину рамки вокруг картинки:
Надписи
HTML-редактор позволяет использовать в документах надписи — специальные объекты HTML-документа. В надписи можно разместить текст, таблицу, картинку или другую надпись. При просмотре документа вложенные объекты надписи будут непрерывно прокручиваться справа налево:
В данной статье рассматривается способ программного формирования HTML документа, содержащего ссылки на объекты базы данных, такие как справочники, документы и т.д. Показан пример построения обработчика события OnClick ПоляHTMLДокумента, для обработки клика на html -ссылке.
Предисловие
Однажды, дописывая обработку, создающую и модифицирующую, не суть важно какие документы, я подумал, что неплохо было бы вывести для пользователя некое резюме:
"Создан документ такой-то"
"Изменен документ такой-то" и т.д.
То, что в форме есть элемент управления именуемый ПолеHTMLДокумента я конечно знал, но вот представилась возможность познакомиться с ним поближе. Было решено реестр обработанных документов выводить в виде html документа содержащего ссылки на эти самые документы, а по клику на ссылке открывать форму соответствующего документа. Здесь мне многие могут возразить: "А почему бы для этих целей не использовать обычный макет, выводимый в табличный документ, а для открытия документов использовать расшифровку? И чем Ваш способ лучше?" Отвечаю: Конечно можно использовать, и мой способ ничем не лучше. Он просто другой. Ведь у хорошего программиста для решения одной задачи должно быть в арсенале несколько инструментов :)
Итак, перейдем от слов к делу, в рамках данной статьи рассмотрим следующую задачу: Сформировать html-документ, содержащий ссылки на элементы справочника номенклатура, по клику требуется открывать форму соответствующего элемента.
Создаем новый отчет, его форму, на форме размещаем элемент управления ПолеHTMLДокумента.
Текст модуля формы:
Процедура ДействияФормыСформировать ( Кнопка )
Запрос = Новый Запрос ( "
|ВЫБРАТЬ
| Номенклатура.Ссылка
|ИЗ
| Справочник.Номенклатура КАК Номенклатура" );
ТекстHTML = Новый ТекстовыйДокумент ;
Выборка = Запрос . Выполнить (). Выбрать ();
Пока Выборка . Следующий () Цикл
ДобавитьТекстHTML ( ТекстHTML , Выборка . Ссылка );
КонецЦикла;
ЭлементыФормы . ПолеHTMLДокумента . УстановитьТекст ( ТекстHTML . ПолучитьТекст ());
КонецПроцедурыНу вот html мы сформировали, теперь что бы ссылки "ожили" надо написать обработчик события OnClick элемента управления ПолеHTMLДокумента.
Процедура ПолеHTMLДокументаonclick ( Элемент , pEvtObj )
htmlElement = НайтиСсылку ( pEvtObj . srcElement );
// Анализируем если произошло нажание не ссылку
Если htmlElement <> Неопределено Тогда
// Если у ссылки есть идентификатор
Если СокрЛП ( htmlElement . id ) <> "" Тогда
// Получаем ссылку из атрибута id
СсылкаНаЭлемент = htmlElement . id ;
Разделитель = Найти ( СсылкаНаЭлемент , "-" );
Если Разделитель > 0 Тогда
// Получаем тип элемента
ТипЭлемента = Лев ( СсылкаНаЭлемент , Разделитель - 1 );
// Получаем УникальныйИдентификатор
ГУИД = Сред ( СсылкаНаЭлемент , Разделитель + 1 );
Справочники [ ТипЭлемента ]. ПолучитьСсылку (Новый УникальныйИдентификатор ( ГУИД )). ПолучитьФорму (). Открыть ();
КонецЕсли;
// Отказ от стандартной обработки клика
pEvtObj . returnValue = Ложь;
КонецЕсли;
КонецЕсли;
КонецПроцедурыФункция НайтиСсылку ( Элемент )
Врем = Элемент ;
Пока Врем <> Неопределено Цикл
Если НРег ( Врем . tagName ) = "a" Тогда
Возврат Врем ;
КонецЕсли;
Врем = Врем . parentElement ;
КонецЦикла;
Возврат Неопределено;
КонецФункцииВсё можно пробовать! см. Рис.1
Заключение
Обратите внимание что ссылку я формировал следующим образом:
- это сделано для того, чтобы в обработчике можно было определить к какому объекту метаданных относится данный УникальныйИдентификатор, потому что имея ТОЛЬКО УникальныйИдентификатор невозможно определить к какому объекту метаданных он относиться. Точнее возможно, но уж слишком долго и неудобно - путем перебора всех метаданных в цикле, для каждого объекта метаданных выполнять попытку .ПолучитьСсылку(Новый УникальныйИдентификатор(НашУникальныйИдентификатор))
Хотя в нашем примере только один справочник, и указывать его вид было необязательно, и так понятно что это УникальныйИдентификатор элемента справочника Номенклатура, но вдруг Вам потребуется работать с несколькими справочниками, вот тут то мой способ задания ссылки Вам и пригодится.
P.S. Платформа 8.2 имеет встроенный механизм работы со ссылками на объекты БД и данная задача наверняка упростится, но это уже другая тема.
P.P.S. Как выяснилось, в ходе обсуждения этой статьи, существует и более простой способ формирования ссылки на объект БД. Выкладываю пример кода, в котором ссылка формируется по методу о котором написал в форуме Saint:
В данной статье рассматривается способ программного формирования HTML документа, содержащего ссылки на объекты базы данных 1С, такие как справочники, документы и т.д. Показан пример построения обработчика события OnClick ПоляHTMLДокумента, для обработки клика на html-ссылке.
Текст модуля формы:
Код 1C v 8.х
Ну вот html мы сформировали, теперь чтобы ссылки “ожили” надо написать обработчик события OnClick элемента управления ПолеHTMLДокумента.
Код 1C v 8.х
Всё можно пробовать!Похожие FAQ
10060 (0x0000274C): Попытка установить соединение была безуспешной 19
Установили новый терминальный сервер, на нем подняли 1С, терминальные пользователе неописуемо довольны, все просто летает :) И вот же надо было такому случиться, главному бухгалтеру не понравилось работать через терминал, а еще у нее свой ноутбук и 17 правил для составления оптимального ЗАПРОСа к данным базы 1С 44
Для формирования и выполнения запросов к таблицам базы данных в платформе 1С используется специальный объект языка программирования Запрос . Создается этот объект вызовом конструкции Новый Запрос . Запрос удобно использовать, когда требуется получ 1C и Google Maps 21
была поставлена задача отображения на географической карте медицинских учреждений. После обзора предлагаемых решений был выбран сервис google. Но так же подобного рода подход будет работать и с картами сервиса yandex. Во время решения задачи было реш 1С 8.x : Как убрать лидирующие нули в номере Документа (вариант2) 0
Скопировать строку с номером, с лидирующими нулями, в числовом поле (с форматом без групп, без группировки), и вернуть(скопировать) обратно в строковом поле с номером. Возвращает без нулей. COM-подключение к базе 7.7 из 8.2 1С 6
Если код выполняется на стороне клиента, то необходимо наличие базы 7.7 на локальной машине. Пример (На форме объекта присутствует реквизит Таблица(ТаблицаЗначений)): НаКлиенте Процедура Загрузки() ПутьКБазе=" D: ВашаБаза 1с77 " ; Пользователь= Посмотреть все результаты поиска похожихЕще в этой же категории
Читайте также: