1С Поле HTML документа — Список

1С Поле HTML документа — Список

Рассмотрим простой пример использования списка, созданного при помощи HTML, CSS и JavaScript, с возможностью загрузки данных из 1С. За основу будет взята база данных из записи Анализ данных и прогнозирование в 1С — Общая статистика, реализация будет выполнена во внешней обработке.

1. Добавлен макет HTML.

Во внешнюю обработку добавлен макет HTML, содержащий следующий код:

Пояснение кода:
Существует особенность работы события «scroll» для элементов Поле HTML, был добавлен обработчик события фиксации прокрутки списка до конца, для автоматической загрузки новых элементов списка, но при работе в 1С он не срабатывал, привязка к элементу «document.body», так же не дало результата.

// Обработка события прокрутки, уведомить платформу 1С о необходимости загрузить новые элементы. window.addEventListener("scroll", () => < if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) < // console.log("scroll end"); >>);

Изображение звездочки, используется в виде строки, закодированной в Base64. Более подробно можно прочесть по адресу: Data URL и Храните мелкие картинки в CSS.

Макет HTML был сверстан с учетом использования атрибута «data-*» тега «div», в котором хранится текущий идентификатор записи, для последующей обработки события нажатия. В текущей версии платформы 1С, не удалось получить на прямую данные из dataset атрибута, видимо ограничение взаимодействие между платформой 1С и web движком «WebKit». Для обхода сложившейся ситуации, на элементы с классом «item», добавлен обработчик нажатия, который получает необходимые данные и сохраняет их в переменной «itemId». Для получения данных добавлена функция «getItemId», которая просто возвращает значение переменной «itemId».

// Переменная для данных элемента, из тега "data-*. let itemId = undefined; // Элемент body текушей страницы. let body = document.querySelector("body"); // Функция добавление нового элемента списка. function addItem(id, itemName, itemData1, itemData2, itemData3) < // Создаем новый элемент списка. let newItem = document.createElement("div"); newItem.className = "item"; newItem.dataset.id = id; // Формируем структуру элемента списка, заполненного данными. newItem.innerHTML = `
$ 
▪ $ 
▪ $
 
 `; // Добавляем новый элемент на страницу. body.append(newItem); // Добавляем событие нажатия на элемент. newItem.addEventListener("click", (event) => < // Сохраняем данные элемента в переменной для хранения. itemId = event.currentTarget.dataset.id; >); >;

2. Добавлены реквизиты формы.

На форму обработки, добавлены два реквизита «ПолеHTMLСписок» тип строка, вид «Поле HTML документа», и текстовый документ «ТекстовыеДанные», для простого вывода данных элемента списка, при нажатии, а именно идентификатора элемента.

3. Добавлены обработчики событий.

Загрузка макета HTML, осуществляется в процедуре «ПриСозданииНаСервере»:

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

Для элемента формы «ПолеHTMLСписок» добавлены обработчики «ДокументСформирован» и «ПриНажатии», со следующей реализацией:

&НаКлиенте Процедура ПолеHTMLСписокДокументСформирован(Элемент) Если НЕ Элементы.ПолеHTMLСписок.Документ.readyState = "complete" Тогда Возврат; КонецЕсли; ОкноHTML = Элементы.ПолеHTMLСписок.Документ.defaultView; Если ОкноHTML = Неопределено Тогда Возврат; КонецЕсли; МассивПродаж = ДанныеПродаж(); Для каждого Продажа Из МассивПродаж Цикл // addItem(id, itemName, itemData1, itemData2, itemData3); ОкноHTML.addItem(Продажа.ИдентификаторСчетФактуры, Продажа.ВидНоменклатуры, Продажа.ТипКлиента, Продажа.Пол, Продажа.РейтингКлиента); КонецЦикла; КонецПроцедуры &НаКлиенте Процедура ПолеHTMLСписокПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка) СтандартнаяОбработка = Ложь; Если ДанныеСобытия.Event.type = "click" И ДанныеСобытия.Element.tagName = "DIV" Тогда ОкноHTML = Элементы.ПолеHTMLСписок.Документ.defaultView; Если ОкноHTML = Неопределено Тогда Возврат; КонецЕсли; ИдентификаторЭлемента = ОкноHTML.getItemId(); ТекстовыеДанные.ДобавитьСтроку(ИдентификаторЭлемента); КонецЕсли; КонецПроцедуры

Источник

1С Поле HTML документа — Обмен

Простой пример обмена текстовой информацией, между платформой 1С и полем HTML документа, будут рассмотрены два варианта отправки и получения данных в поле HTML документа:

• Вставка и получения текста из атрибута HTML тега.
• Вставка и получение текста при помощи JavaScript функций.

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

1. Создаем HTML страницу.

В любом редакторе кода поддерживающим HTML, CSS и JS необходимо создать страницу, содержащую следующий исходный текст:

       body < background-color: #ECEFF4; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; color: #2E3440; >fieldset < border-style: solid; border-width: thin; border-color: #A9ADB2; border-radius: 5px; width: 95%; >fieldset>input < position: relative; border: none; border-radius: 3px; outline: none; width: 95%; height: 29px; font-size: 16px; background-color: #F8F9FB; >.square_btn < position: absolute; padding: 5px; text-decoration: none; color: #FFF; background: #fd9535; border-radius: 5px; margin-left: 3px; >.square_btn:active  
 
Текстовое поле
     
 
 // Получаем ссылку на элемент ввода текста. let obj = document.querySelector("#textInput"); // Устанавливаем текст элемента с помощью свойства. function insertTextToObject(text) < obj.value = text; >// Получаем текст элемента с помощью свойства. function getTextFromObject()  

1. Используется тег form с заданным именем «dataInput», для последующего обращения с целью получения дочерних элементов.
2. Для ввода и отображения текста, используется тег input с заданным идентификатором «textInput».
3. Добавлена область script, в которой происходит получение ссылки на элемент ввода и реализованы функции установки и получения значения.

2. Создаем конфигурацию 1С.

• Создаем пустую конфигурацию.
• Добавляем общий макет «МакетHTML», с типом «HTML документ», помещаем в него HTML код из первого пункта.
• Создаем общую произвольную форму «ПолеHTML», где:
  ▪ добавляем реквизит «ПолеHTML» тип строка, переносим на форму, вид «Поле HTML документа» и создаем обработчик «ПриНажатии».
  ▪ создаем реквизит «Комментарий» тип строка, переносим его на форму.
  ▪ добавляем команды «ОтправитьВHTML», «ОтправитьВJS», «ПолучитьИЗJS», переносим их на форму и создаем обработчики.
• Общую форму «ПолеHTML», устанавливаем в рабочую область начальной страницы.

Если возникнут сложности, в конце записи можно скачать архив с конфигурацией.

3. Создаем код модуля формы.

В общей форме необходимо добавить обработчик «ПриСозданииНаСервере», в котором будет происходит загрузка текста из «МакетаHTML» в элемент формы «ПолеHTML».

Пояснение: Из общего макета происходит получение текста HTML страницы и отображение в элементе формы.

Далее добавляем код в обработчик «ПриНажатии» для элемента формы «ПолеHTML», в котором происходит основная обработка нажатий внутри HTML документа:

&НаКлиенте Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка) СтандартнаяОбработка = Ложь; // Проверяем, что нажатие было на ссылке (кнопке). Если ДанныеСобытия.Anchor = Неопределено Тогда Возврат; КонецЕсли; // Проверяем, что у ссылки (кнопки) есть атрибуты для анализа. Если ДанныеСобытия.Anchor.attributes.length = 0 Тогда Возврат; КонецЕсли; // Проверяем, что нажата кнопка обмена, с помощью атрибута data. Для каждого Атрибут Из ДанныеСобытия.Anchor.attributes Цикл Если Атрибут.name = "data-button-id" И Атрибут.value = "Exchange" Тогда // Получаем данные из поля HTML и присваиваем их реквизиту формы. ДокументHTML = Элементы.ПолеHTML.Документ; Комментарий = ДокументHTML.forms["dataInput"].textInput.value; Прервать; КонецЕсли; КонецЦикла; КонецПроцедуры

Пояснение: Так как используется пустой «якорь», определяем имеются ли на странице соответствующие элементы, после по конкретно заданному имени атрибута и его значению, получаем введенный текст.

Оставшийся код обработчиков команд формы:

&НаКлиенте Процедура ОтправитьВHTML(Команда) ДокументHTML = Элементы.ПолеHTML.Документ; ДокументHTML.forms["dataInput"].textInput.value = Комментарий; КонецПроцедуры &НаКлиенте Процедура ОтправитьВJS(Команда) ОкноHTML = Элементы.ПолеHTML.Документ.defaultView; Если ОкноHTML = Неопределено Тогда Возврат; КонецЕсли; ОкноHTML.insertTextToObject(Комментарий); КонецПроцедуры &НаКлиенте Процедура ПолучитьИЗJS(Команда) ОкноHTML = Элементы.ПолеHTML.Документ.defaultView; Если ОкноHTML = Неопределено Тогда Возврат; КонецЕсли; Комментарий = ОкноHTML.getTextFromObject(); КонецПроцедуры

Пояснение: В команде «ОтправитьВHTML» происходит запись введенного комментария при помощи помещения текста в соответствующее свойство «value» тега input. Команда «ОтправитьВJS» и «ПолучитьИЗJS» обращается непосредственно к JavaScript функциям «insertTextToObject» и «getTextFromObject», при помощи свойства «defaultView».

Источник

1С Поле HTML документа — Кнопки

Простой пример взаимодействия между платформой 1С и интерфейсом на основе HTML и CSS, при помощи элемента вида «Поле HTML документа». В данном примере, будет рассмотрена реакция при нажатии кнопки в поле HTML документа.

Обновление 10.12.2021:
Добавлен дополнительный способ получить событие нажатия кнопки и обработать переданные данные через атрибут «data-*», для этого будет использоваться ручное добавление обработчика события, для элемента поля HTML.

1. Создаем HTML страницу.

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

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

Для ссылок (кнопок) атрибут «href» тега a будет равен «#», то есть пустой «якорь».

В качестве идентификаторов кнопок будет использоваться атрибут «data-*» тега a в следующем виде data-button-id=’1′.

      body < background-image: radial-gradient(circle farthest-corner at 50% 50%, rgba(236, 239, 244, 1) 0%, rgba(216, 222, 233, 1) 100%); >.container < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.square_btn < position: relative; display: inline-block; padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #fd9535; /*button color*/ border-bottom: solid 2px #d27d00; /*daker color*/ border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19); font-weight: bold; >.square_btn:active   
      
   

2. Создаем конфигурацию 1С.

Создаем пустую конфигурацию, в которой добавляем общий макет «МакетHTML», с типом «HTML документ»:

Во вкладке «Текст» макета, помещаем исходный код HTML страницы из пункта 1.

Следующим шагом будет добавление общей произвольной формы «ПолеHTML», которую необходимо установить в рабочую область начальной страницы:

В форме добавляем реквизит «ПолеHTML» тип строка и переносим его на форму, для элемента, устанавливаем вид «Поле HTML документа»:

Реквизит формы Поле HTML документа

3. Создаем код модуля формы.

Для формы необходимо добавить обработчик «ПриСозданииНаСервере», в котором будет происходит загрузка текста из «МакетаHTML» в элемент формы «ПолеHTML».

Теперь необходимо добавить обработчик «ПриНажатии» для элементы формы «ПолеHTML», в котором происходит основная обработка нажатий внутри HTML документа:

#Область ОбработчикиСобытийФормы &НаСервере Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка) ПолеHTML = ПолучитьОбщийМакет("МакетHTML").ПолучитьТекст(); КонецПроцедуры #КонецОбласти #Область ОбработчикиСобытийЭлементовФормы &НаКлиенте Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка) // Проверяем, что нажатие было на ссылке (кнопке). Если ДанныеСобытия.Anchor = Неопределено Тогда Возврат; КонецЕсли; // Проверяем, что у ссылки (кнопки) есть атрибуты для анализа. КоличествоАтрибутов = ДанныеСобытия.Anchor.attributes.length; Если КоличествоАтрибутов = 0 Тогда Возврат; КонецЕсли; // Ищем среди атрибутов необходимые данные ссылки (кнопки). Для каждого Атрибут Из ДанныеСобытия.Anchor.attributes Цикл Если Атрибут.name = "data-button-id" Тогда ПоказатьПредупреждение(, Атрибут.value, , "Нажата кнопка:"); Прервать; КонецЕсли; КонецЦикла; КонецПроцедуры #КонецОбласти

Источники информации:

Обновление 10.12.2021:
Добавлен дополнительный способ получить событие нажатия кнопки и обработать переданные данные через атрибут «data-*», для этого будет использоваться ручное добавление обработчика события, для элемента поля HTML.

Поле HTML — Добавить обработчик

2. Для реквизита «ПолеHTML» добавить обработку события «ДокументСформирован», содержащую следующий код:

&НаКлиенте Процедура ПолеHTMLДокументСформирован(Элемент) ДокументHTML = Элементы.ПолеHTML.Документ; ДобавитьОбработчик ДокументHTML.links[3].onclick, ОбработчикПриНажатии; КонецПроцедуры

3. Непосредственно добавить сам обработчик нажатия:

Источник