Регулярно нужно в интерфейсе посмотреть JSON. Обычно для этого используется текстовое поле, но у этого способа два недостатка:
- Нет встроенного форматирования. Нужно его предварительно выполнить
- Нет раскраски - в итоге данные неудобно просматривать
Для решения этого вопроса с помощью deepseek создал простой макет страницы с встроенными стилями и Javascript для раскраски
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Formatter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.json-container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.json-key {
color: #881391;
}
.json-string {
color: #c41a16;
}
.json-number {
color: #1c00cf;
}
.json-boolean {
color: #0d22aa;
}
.json-null {
color: #808080;
}
</style>
</head>
<body>
<div class="json-container">
<pre id="json-output"></pre>
</div>
<script>
const jsonData = %1;
// Функция для раскрашивания JSON
function syntaxHighlight(json) {
if (typeof json !== 'string') {
json = JSON.stringify(json, null, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
function (match) {
let cls = 'json-number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'json-key';
} else {
cls = 'json-string';
}
} else if (/true|false/.test(match)) {
cls = 'json-boolean';
} else if (/null/.test(match)) {
cls = 'json-null';
}
return '<span class="' + cls + '">' + match + '</span>';
}
);
}
// Вывод раскрашенного JSON
document.getElementById('json-output').innerHTML = syntaxHighlight(jsonData);
</script>
</body>
</html>
На форме 2 текстовых поля:
- ДанныеJSON - поле для исходного JSON
- ПолеПросмотра - поле для отображения HTML документа
И добавил обработчики на форму
#Область ОбработчикиСобытийФормы
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
Если Параметры.Свойство("ДанныеJSON", ДанныеJSON) Тогда
Элементы.ДанныеJSON.Видимость = Ложь;
КонецЕсли;
ЗаполнитьПолеПросмотра();
КонецПроцедуры
#КонецОбласти
#Область ОбработчикиСобытийЭлементовШапкиФормы
&НаКлиенте
Процедура ДанныеJSONПриИзменении(Элемент)
ЗаполнитьПолеПросмотра();
КонецПроцедуры
#КонецОбласти
#Область СлужебныеПроцедурыИФункции
&НаСервере
Процедура ЗаполнитьПолеПросмотра()
ПолеПросмотра = СтрШаблон(
РеквизитФормыВЗначение("Объект").ПолучитьМакет("МакетHTML").ПолучитьТекст(),
ДанныеJSON);
КонецПроцедуры
#КонецОбласти
Обработку можно использовать двумя способами:
- Простое открытие - в этом случае после изменения текста в поле ДанныеJSON - отрабатывает обработчик события ПриИзменении и отображается превью
- Открытие по команде с передачей ДанныеJSON - в этом случае поле ДанныеJSON скрывается и происходит просто отображение отформатированного и раскрашенного JSON
Код обработчика
#Область ОбработчикиСобытий
&НаКлиенте
Процедура ОбработкаКоманды(ПараметрКоманды, ПараметрыВыполненияКоманды)
ДанныеJSON = "{}"; // <- сюда передаём данные для отображения
ОткрытьФорму("Обработка.ПросмотрJSON.Форма", Новый Структура("ДанныеJSON", ДанныеJSON));
КонецПроцедуры
#КонецОбласти
Обработка универсальная, будет работать на любых конфигурациях на управляемых формах.
Проверено на следующих конфигурациях и релизах:
- 1С:Библиотека стандартных подсистем, редакция 3.1, релизы 3.1.1.91
Вступайте в нашу телеграмм-группу Инфостарт
