картинка в поле html документа 1с

1С html. Cоздание поля html документа

В статье на примере будут описаны все этапы создания поля html документа. В 1с html поле позволяет представить данные, которые не требуется редактировать, в более эстетичном виде. Разработчик может применить возможности html для создания и настройки формы справочника или бизнес-процесса (как делается в конфигурации Документооборот).

Рассмотрим пример. Разработаем обработку, которая будет представлять элемент справочника Пользователи в виде поля html документа. Для разработки примера я использовал демо БСП 3.1 (управляемое приложение).

Выведем в документ следующие поля справочника:

Размещение реквизитов на форме

Для начала создадим внешнюю обработку и добавим форму. На форме создадим два реквизита Пользователь (тип СправочникСсылка.Пользователи) и ПредставлениеHTML (тип Строка неограниченной длины). Перетащим реквизиты в дерево элементов. Для элемента ПредставлениеHTML выберем вид Поле HTML документа и отключим отображение заголовка. Должно получится так:

Теперь поработаем над программной частью формы:

В итоге должно получиться следующее:

Получение данных

Во входные параметры функции ЗаполнитьHTMLПредставление мы передаем только ссылку на пользователя, поэтому для начала надо собрать все данные, необходимые для вывода в html документ. Для этого воспользуемся запросом, который вынесем в отдельную процедуру. Приводить текст процедуры здесь я не буду, чтобы не занимать много места. Ознакомиться с ним можно во внешней обработке, ссылка на которую находится внизу статьи.

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

Заполнение стилей 1с html поля

Рассмотрим заполнение стилей более подробно:

Создание тела html документа в 1с 8

Вывод изображения в html

Начнем с вывода фотографии пользователя. В элементе справочника она хранится в реквизите Фотография, в виде хранилища значения. Его мы получили вместе с остальными данными пользователя, при помощи запроса.

Разберем представленный код:

Для того чтобы отделить изображение от следующей информации, используем тег

. Он означает начало нового абзаца. При описании стилей мы указали, что перед началом нового абзаца устанавливается отступ в 10 пикселей.

Вывод текстового реквизита в html

После фотографии выведем основные данные пользователя в следующем формате:

Начнем с имени пользователя:

Разберем представленный код:

Вывод ссылки в html

Теперь выведем в документ физлицо пользователя. Так как оно представлено ссылочным типом, оформим его в виде ссылки.

Разберем представленный код:

Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.

Вывод всех реквизитов будет выглядеть следующим образом:

Вывод таблицы в html 1с

Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.

На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст.

В итоге у нас получается html поле, заполненное следующим образом:

Обработка нажатия на ссылку

В нашей обработке мы используем не веб ссылки, а на навигационные ссылки 1с. По этой причине система не может корректно обработать их нажатие. Это можно исправить, создав обработчик события ПриНажатии, для Поля HTML документа.

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

Скачать обработку формирования html поля можно здесь: СозданиеHTMLПоля

Источник

При этом последний функционал необходимо полностью доработать до возможности использования в Общем модуле, из которого будем вызывать экспортную процедуру с Формы (Управляемой или Обычной). Хотя есть уже до этого публикация Вставка снимка экрана (screenshot) в форматированный документ, тем не менее не очень удобно переносить 3 процедуры в каждую форму.

Вставка картинки в HTML поле положения курсора при помощи JavaScript.

Рассмотрим следующие режимы:

Для Обычного приложения код выглядит так:

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

Вставка картинки в Форматированный Документ компонентой ДО в Управляемых Формах.

Однако, взамен 1С дописала удобный для разработчиков интерфейс, благодаря чему можно обойтись без вызовов javascript, правда и расширить функционал можно только за счет внешних компонент. В данном случае код вставки будет выглядеть таким образом:

Следует отметить, что все процедуры, кроме ВставитьКартинкуВФорматированныйДокумент можно вставить в модуль и осуществить вызов из модуля, для этого последнюю достаточно сделать экспортной, и также необходимо добавить туда наименование какого-либо события, если вставку картинки в Форматированный Документ необходимо контролировать.

Итоговый код для упрощения процедуры вставки

Для Форматированного Документа:

Для HTML поля обычные Формы:

Источник

Редактор HTML-документа

HTML-редактор используется для создания пользовательских описаний в виде HTML-документов. Окно редактора содержит три закладки, позволяющие осуществлять просмотр и редактирование документа.

На закладке Редактирование документ отображается в текстовом и графическом виде:

На закладке Текст разработчик имеет возможность редактировать HTML-текст документа:

Закладка Просмотр предназначена для отображения документа в том виде, в котором он будет показан пользователю:

Работа с HTML-документом напоминает работу в обычном текстовом редакторе, однако HTML-редактор предоставляет ряд дополнительных возможностей, которые обусловлены использованием формата HTML:

Форматирование текста

Текст HTML-документа можно форматировать: устанавливать его стиль, абзацные отступы, выбирать размер шрифта, параметры, гарнитуру и т. д.:

При копировании текста из других текстовых редакторов (например, Word) HTML-редактор сохраняет исходное форматирование текста.

Таблицы

В HTML-документ можно вставлять таблицы и редактировать как параметры отдельных ячеек таблицы, так и изменять внешний вид и параметры всей таблицы:

Картинки

В HTML-документе могут быть размещены картинки. Разработчик имеет возможность задавать размеры картинки, ее положение и толщину рамки вокруг картинки:

Надписи

HTML-редактор позволяет использовать в документах надписи — специальные объекты HTML-документа. В надписи можно разместить текст, таблицу, картинку или другую надпись. При просмотре документа вложенные объекты надписи будут непрерывно прокручиваться справа налево:

Источник

1С 8.3 : Работа с изображениями (картинками) в интерфейсе Такси

Рассмотрим алгоритм работы с файлами и картинками в новом интерфейсе 1С:Предприятие 8.3 «Такси».

Рассмотрим алгоритм работы с файлами и картинками в новом интерфейсе 1С:Предприятие 8.3 «Такси».

Однако, если разрешить модальные окна, то мы столкнемся с проблемами при работе в web-клиенте.

Во-вторых, о работе с картинками в управляемых формах часто спрашивают.

Итак, задача: в справочнике «Товары» необходимо сохранять и отображать в форме фотографию товара.

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

Для хранения самого графического файла, в справочнике создадим реквизит «ДанныеКартинки», с типом «Хранилище значений».

Если планируете выгружать картинку (файл) из информационной базы обратно в файловую систему, то добавьте еще реквизит, который будет хранить исходное имя файла и его тип.

Далее, займемся формой. Как видно на картинке, реквизит с типом хранилище значений в форме недоступен.

Как будем отображать картинку в форме? Нет, не декорацией с типом «картинка». А в виде реквизита формы с типом «строка». Да, да! Это очевидно, и странно, что мало кто об этом догадывается сам. 😉

Все дело в том, что если на форму вынести реквизит с типом «строка», который будет содержать навигационную ссылку на графические данные или адрес временного хранилища которое содержит такие данные, то форма сможет отобразить сами графические данные.

Добавим реквизит формы с именем «СсылкаНаКартинку», тип «строка», длина не ограничена. И поместим его в реквизиты формы.

По умолчанию, строка в форме будет выглядеть как поле ввода, нам нужно поменять это, в свойствах элемента формы. Выберем в свойстве «Вид» «Поле картинки».

Интерфейсная часть готова. Займемся кодингом. Создадим команду формы «ВыбратьФайлКартинки», в виде кнопки расположим ее на форме.

В модуле опишем обработчик события «Действие» для созданной команды формы:

Пару комментариев к вышеописанному коду:

Если бы мы не обращали внимание на режим модальности приложения, то могли вполне использовать метод «ПоместитьФайл«, однако цель статьи показать работу с файлами именно в таком режиме.

Метод НачатьПомещениеФайла помещает выбранный файл во временное хранилище (если выбор файла был произведен) и вызывает процедуру «ОбработатьВыборФайла» в этом же модуле.

Обращаю внимание на выделенный «УникальныйИдентификатор«, этим свойством мы связали временное хранилище с текущей формой. В противном случае файл в хранилище помещен будет, но само хранилище при серверном вызовет будет уничтожено, а нам оно еще понадобится, для записи файла в реквизит справочника.

Опишем процедуру «ОбработатьВыборФайла»:

Если пользователь не отказался от выбора файла, то в реквизит формы «СсылкаНаКартинку» помещаем адрес во временном хранилище, куда были помещены данные картинки.

Так, осталось теперь при записи элемента справочника записать данные из временного хранилища в реквизит элемента справочника. Описываем событие ПередЗаписьюНаСервере:

Осталось описать открытие формы, для отображения картинки уже сохраненной в реквизите элемента справочника.

Источник

Вывод картинок в строках таблиц формы в управляемом приложении

Начинающие программисты на платформе 8.2 иногда сталкиваются с проблемой вывода картинок в различных таблицах формы. На платформе 8.1 зачастую это делалось программно в обработке события ПриПолученииДанных либо ПриВыводеСтроки. В 8.2 же ничего программировать не надо, а лишь достаточно правильно заполнить значения свойств интерфейсных объектов. Ключевым моментом является то, что в итоговой таблице у нас должна быть отдельная колонка, содержащая индекс выводимой картинки. Попробуем вывести картинку. Есть у нас, например, справочник пользователей, в котором есть реквизит «ЕстьВИнформационнойБазе» типа булево, и нам бы хотелось выводить картинку пользователя в цвете, если пользователь есть, и серую, если его нет в информационной базе .

Вставим в нашу форму динамический список, поставим флажок произвольного запроса и зададим запрос в следующем виде:

Поставим реквизиту «ИндексКартинки» флажок «Использовать всегда», т.к. на форму мы выводить его не будем. Теперь добавим наш динамический список на форму и зададим свойства «ПутьКДаннымКартинкиСтрок» и «КартинкаСтрок»

В результате у нас выведется список в следующем виде:

Т.е. в данном случае, картинка будет выводится в первой, по порядку, колонке списка. Но иногда возникает необходимость вывести картинку в определенной колонке или, в общем случае, различные картинки в нескольких колонках. Давайте выведем нашу картинку не в колонке «Наименование», а в колонке «Код» (заодно вернем стандартную картинку списка справочника). Для возврата стандартной картинки в вышеупомянутых свойствах «ПутьКДаннымКартинкиСтрок» и «КартинкаСтрок» возвращаем первоначальные значения.

Теперь создаем новую группу колонок в таблице вывода динамического списка и перемещаем туда колонки «Код» и «ИндексКартинки». Для группы колонок задаем группировку «В ячейке».

Для колонки «ИндексКартинки» задаем вид «Поле картинки» и в появившееся свойство «КартинкаЗначений» указываем нашу картинку. Ну и уберем заголовок, чтоб не отсвечивал 🙂

Источник