Перейти к содержимому

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

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

Часть 1: 1С Поле HTML документа — Кнопки.
Часть 2: 1С Поле HTML документа — Обмен.
Часть 3: 1С Поле HTML документа — Список.
Часть 4: 1С Поле HTML документа — React Список.

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

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1С Поле HTML документа - Обмен данными</title>
    <style type="text/css">
        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 {
            border-bottom: solid 2px #fd9535;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
        }
    </style>
</head>
<body>
    <form name='dataInput' action='#'>
        <fieldset>
            <legend>Текстовое поле</legend>
            <input type="text" name="textInput" id="textInput" placeholder=" ... ">
            <a href="#" class="square_btn" data-button-id="Exchange">
                <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF">
                    <path d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
                </svg>
            </a>
        </fieldset>
    </form>    
    <script type="text/javascript" defer>
        // Получаем ссылку на элемент ввода текста.
        let obj = document.querySelector("#textInput");
        
        // Устанавливаем текст элемента с помощью свойства.
        function insertTextToObject(text) {
            obj.value = text;
        }
        
        // Получаем текст элемента с помощью свойства.
        function getTextFromObject() {
            return obj.value;
        }
    </script>   
</body>
</html>

Пояснение кода:

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

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

Так же как в примере 1С Поле HTML документа — Кнопки:

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

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

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

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

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	Поле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 документа — Обмен данными».

Метки:

2 комментария для “1С Поле HTML документа — Обмен”

  1. Иван
    Ответить

    Доброго,

    подскажите, все кнопки-команды, сделанные из 1с («ОтправитьВHTML», «ОтправитьВJS», «ПолучитьИЗJS»), работают, а вот кнопка-стрелка в самом HTML поле рядом с Текстовым полем — нет, как быть? Может быть, что-то нужно установить? У меня платформа 1С:Предприятие 8.3 (8.3.26.1540).

    1. Иван
      Ответить

      У вас работает в конфигурации. Буду смотреть, что у меня не так. Правда я делал обработку.

Добавить комментарий

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