Реализовать форму элемента с помощью html

Pi · 11 июн 2023, 14:34

Каким образом можно реализовать форму элемента справочника в 1с при помощи html поля?
Есть справочник виды, создал его просто для теста. В нем есть реквизиты: код, наименование(стандартные реквизиты), характеристика(строка), товар(ссылка на справочник товары).
Прописываю вот такой код:

Код Выделить

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
СформироватьПоле();	
КонецПроцедуры

&НаСервере
Процедура СформироватьПоле()

ПолеHTML = "<!DOCTYPE html>
|<html lang='ru' xmlns='http://www.w3.org/1999/xhtml'>
|<head>
|    <meta charset='utf-8' />
|    <title></title>
|    <style>
|        .custom-btn {
|            width: 180px;
|            height: 40px;
|            color: #fff;
|            border-radius: 5px;
|            padding: 10px 25px;
|            font-family: 'Lato', sans-serif;
|            font-weight: 500;
|            background: transparent;
|            cursor: pointer;
|            transition: all 0.3s ease;
|            position: relative;
|            display: inline-block;
|            box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
|            outline: none;
|        }
|
|        .btn-1 {
|            background: rgb(6,14,131);
|            background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
|            border: none;
|        }
|
|            .btn-1:hover {
|                background: rgb(0,3,255);
|                background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
|            }
|        .btn-2 {
|            background: rgb(255, 0, 0);
|            background: linear-gradient(0deg, rgb(255 0 0) 0%, rgb(141 10 10) 100%);
|            border: none;
|        }
|
|            .btn-2:hover {
|                background: rgb(255 106 0);
|                background: linear-gradient(0deg, rgb(198 19 19) 0%, rgb(248 99 99) 100%);
|            }
|    </style>
|</head>
|<body>
|    <button data-button-id='1' class='custom-btn btn-1'>Записать и закрыть</button>
|    <button data-button-id='2' class='custom-btn btn-2'>Записать</button>
|<form>
|        <fieldset>
|            <legend>Основная информация</legend>
|            <p><label for='code'>Код <em>*</em></label><input type='text' id='code'></p>
|            <p><label for='name'>Наименование <em>*</em></label><input type='text' id='name'></p>
|            <p><label for='harakter'>Характеристика</label><input type='text' id='harakter'></p>
|			 <p><label for='tovar'>Товар(Ссылка на справочник)</label><input type='text' id='tovar'></p>
|        </fieldset>
|    </form>
|</body>
|</html>";	

КонецПроцедуры 

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

&НаКлиенте
Функция ОбработатьОткрытиеФормы(ЗначениеКнопки)

	Соответствие = Новый Соответствие;
	Соответствие.Вставить("1","Справочник.Виды.ФормаСписка"); 
	Соответствие.Вставить("2","Справочник.Виды.ФормаСписка");
	
	Если ЗначениеКнопки = "1" Тогда
ЭтотОбъект.Записать();
Иначе 
       ОткрытьФорму(Соответствие[ЗначениеКнопки]);
		КонецЕсли
	КонецФункции

Реализовать форму элемента с помощью html

Pi

Похожие темы (5)

Поиск