Разработка визуальных интерфейсов в платформе «1С:Предприятие 8» традиционно вызывает множество вопросов у разработчиков. Особенно остро эта проблема встает, когда бизнес требует создания интерактивных графических схем, таких как планограммы выкладки товаров на стеллажах, карты складов или схемы торговых залов. Нам необходимо не просто отобразить статичную картинку, а дать пользователю полноценный рабочий инструмент: с возможностью перетаскивания объектов (Drag-and-Drop), изменением размеров, динамической подсветкой и получением обратной связи в коде 1С при клике на элементы.
В этой статье мы подробно проанализируем эволюцию технологий отрисовки графики в среде 1С, детально разберем наиболее перспективный и современный подход на базе HTML5 и SVG, а также рассмотрим пошаговое руководство по созданию интерактивной планограммы «с нуля» без использования устаревших или платных внешних компонент.
Давайте подробно рассмотрим, какими инструментами располагает разработчик 1С для решения задачи визуализации геометрических фигур по координатам, и выявим их сильные и слабые стороны.
Минусы: Крайне низкая интерактивность. Невозможно реализовать плавное перетаскивание товаров мышкой между полками, сложно масштабировать схему под разные экраны, а производительность при большом количестве мелких товаров оставляет желать лучшего. Этот метод подходит исключительно для вывода статической схемы на печать.
Графическаясхема (файлы формата .grs) позволяет программно создавать декорации, линии и фигуры, задавать им координаты и цвета.
Минусы: Инструмент изначально проектировался для создания схем бизнес-процессов. Он обладает жесткими ограничениями по стилизации, не поддерживает плавную современную анимацию, адаптивную сетку и продвинутые события мыши. Построить на нем красивую современную планограмму практически невозможно.
Dushelov.VectorDrawing1C.dll, или внедрение Flash-апплетов.
Минусы: Технологии ActiveX и Flash официально признаны устаревшими и небезопасными. Они не поддерживаются в тонком клиенте под операционными системами Linux и macOS, а также полностью неработоспособны в веб-клиенте. Использование сторонних DLL-компонент усложняет развертывание и обновление информационной базы у конечных пользователей.
ПолеHTMLДокумента. Начиная с релиза платформы 1С 8.3.14, встроенный движок отображения HTML был переведен со старого Internet Explorer на современный Chromium/WebKit. Это открыло разработчикам доступ ко всем возможностям современных веб-технологий: HTML5, CSS3, SVG (векторная графика), Canvas (растровое рисование) и полноценному выполнению кода JavaScript прямо внутри формы 1С.Именно четвертый вариант — использование поля HTML документа — является на сегодняшний день самым мощным, кроссплатформенным и бесплатным способом реализации интерактивных планограмм любой сложности. Давайте разберем по шагам, как устроен этот механизм.
Для рисования планограмм идеально подходит формат SVG (Scalable Vector Graphics). В отличие от растровых картинок, SVG-изображения описываются в виде XML-кода с указанием точных координат фигур (прямоугольников, линий, кругов). Это дает нам колоссальные преимущества:
Давайте посмотрим на простейший пример SVG-кода, описывающего торговую полку с двумя товарами:
<svg width="800" height="400" viewBox="0 0 800 400" style="background-color: #f5f5f5;">
<!-- Торговая полка -->
<rect x="50" y="300" width="700" height="20" fill="#8B4513" stroke="#5C2E0B" stroke-width="2" />
<!-- Товар 1 (Сок) -->
<g id="product_1025" cursor="pointer" onclick="selectProduct('1025')">
<rect x="100" y="100" width="80" height="200" fill="#FF8C00" rx="5" />
<text x="140" y="200" fill="white" font-family="Arial" font-size="14" text-anchor="middle">Сок</text>
</g>
<!-- Товар 2 (Молоко) -->
<g id="product_2048" cursor="pointer" onclick="selectProduct('2048')">
<rect x="220" y="120" width="90" height="180" fill="#1E90FF" rx="5" />
<text x="265" y="210" fill="white" font-family="Arial" font-size="14" text-anchor="middle">Молоко</text>
</g>
</svg>
Проанализируем этот код: тег <rect> рисует прямоугольники по заданным координатам x и y с определенной шириной width и высотой height. Группирующий тег <g> объединяет геометрию товара и его текстовое описание, а также содержит JS-обработчик onclick, который будет передавать идентификатор товара обратно в систему 1С.
Самый важный этап интеграции — связать интерфейс планограммы с бизнес-логикой базы данных 1С. Нам необходимо решить две задачи: передать данные из 1С в HTML-поле для отрисовки и вернуть информацию из HTML в 1С при действиях пользователя.
Направление 1: Из 1С в HTML.
Для передачи данных мы можем программно формировать текст HTML-страницы прямо в коде 1С, подставляя туда нужные координаты и параметры из справочников и регистров сведений, а затем присваивать этот текст свойству поля HTML. Также в платформе 8.3 можно напрямую вызывать JavaScript-функции, определенные на странице, используя метод Документ.defaultView. Рассмотрим это далее на практическом примере.
Направление 2: Из HTML в 1С.
Для отправки данных обратно в 1С (например, информации о том, на какой товар кликнули) используется механизм перехвата событий. В JavaScript мы можем изменить адрес страницы (свойство window.location.href), сформировав специальный служебный URL. Платформа 1С перехватывает это действие в событии поля HTML-документа ПриНажатии (или OnInput в зависимости от логики решения).
Давайте разберем, как выглядит этот URL-перехватчик. В JavaScript мы пишем:
function selectProduct(productId) {
// Формируем служебный URL с параметрами
window.location.href = "onc-event://click-product?id=" + productId;
}
В модуле управляемой формы 1С мы подписываемся на событие поля HTML-документа и обрабатываем его.
Давайте по шагам спроектируем и реализуем рабочее решение. Представим, что у нас есть регистр сведений, хранящий координаты товаров на стеллаже, и нам нужно вывести их на управляемую форму.
Создадим новую обработку и добавим управляемую форму. На форме определим следующие реквизиты:
АдресПланограммы (тип: Строка) — этот реквизит мы свяжем с элементом формы типа «Поле HTML документа».ВыбранныйТовар (тип: СправочникСсылка.Номенклатура) — для демонстрации обратной связи.Нам необходимо написать функцию, которая будет считывать данные из базы 1С, преобразовывать их в формат SVG и генерировать итоговую HTML-страницу. Напишем процедуру инициализации планограммы в модуле формы:
&НаСервере
Функция СформироватьHTMLПланограммы() Экспорт
// Начало HTML-шаблона с JavaScript-функцией отправки события в 1С
ТекстHTML =
"<!DOCTYPE html>" +
"<html>" +
"<head>" +
" <meta charset='utf-8'>" +
" <style>" +
" body { margin: 0; padding: 10px; overflow: hidden; background-color: #fafafa; }" +
" .shelf { fill: #8B4513; stroke: #5C2E0B; stroke-width: 3; }" +
" .product-box { transition: fill 0.3s; stroke: #333; stroke-width: 1; }" +
" .product-box:hover { fill: #FFD700 !important; }" +
" </style>" +
" <script>" +
" function sendTo1C(action, id) {" +
" // Перенаправляем браузер на кастомный URL-протокол" +
" window.location.href = '1c-event://' + action + '?id=' + id;" +
" }" +
" </script>" +
"</head>" +
"<body>" +
" <svg width='100%' height='500' viewBox='0 0 1000 500' preserveAspectRatio='xMidYMid meet'>";
// Рисуем физические полки стеллажа (статические элементы)
// Полка 1
ТекстHTML = ТекстHTML + "<rect x='50' y='200' width='900' height='15' class='shelf' />";
// Полка 2
ТекстHTML = ТекстHTML + "<rect x='50' y='400' width='900' height='15' class='shelf' />";
// В реальном решении эти данные будут выбираться запросом из регистра сведений.
// Для примера смоделируем вывод двух товаров на первой полке
// Товар 1
Идентификатор1 = "Товар_1"; // Здесь должен быть уникальный идентификатор (например, УникальныйИдентификатор ссылки)
Наименование1 = "Сок Апельсиновый";
КоординатаX1 = 100;
КоординатаY1 = 50; // Товар стоит на первой полке (высота полки 200, высота товара 150)
Ширина1 = 80;
Высота1 = 150;
Цвет1 = "#FF5733";
ТекстHTML = ТекстHTML +
"<g onclick=""sendTo1C('click', '" + Идентификатор1 + "')"" cursor='pointer'>" +
" <rect x='" + КоординатаX1 + "' y='" + КоординатаY1 + "' width='" + Ширина1 + "' height='" + Высота1 + "' fill='" + Цвет1 + "' class='product-box' rx='3' />" +
" <text x='" + (КоординатаX1 + Ширина1/2) + "' y='" + (КоординатаY1 + Высота1/2) + "' fill='white' font-family='Arial' font-size='11' text-anchor='middle'>" + Наименование1 + "</text>" +
"</g>";
// Товар 2
Идентификатор2 = "Товар_2";
Наименование2 = "Молоко Ультрапаст.";
КоординатаX2 = 200;
КоординатаY2 = 70; // Высота товара 130
Ширина2 = 90;
Высота2 = 130;
Цвет2 = "#33C1FF";
ТекстHTML = ТекстHTML +
"<g onclick=""sendTo1C('click', '" + Идентификатор2 + "')"" cursor='pointer'>" +
" <rect x='" + КоординатаX2 + "' y='" + КоординатаY2 + "' width='" + Ширина2 + "' height='" + Высота2 + "' fill='" + Цвет2 + "' class='product-box' rx='3' />" +
" <text x='" + (КоординатаX2 + Ширина2/2) + "' y='" + (КоординатаY2 + Высота2/2) + "' fill='white' font-family='Arial' font-size='11' text-anchor='middle'>" + Наименование2 + "</text>" +
"</g>";
// Закрываем теги структуры HTML
ТекстHTML = ТекстHTML +
" </svg>" +
"</body>" +
"</html>";
Возврат ТекстHTML;
КонецФункции
В обработчике события формы ПриСозданииНаСервере мы вызываем генерацию нашей интерактивной страницы и помещаем ее в реквизит формы:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
АдресПланограммы = СформироватьHTMLПланограммы();
КонецПроцедуры
Теперь нам необходимо перехватить нажатие на товар. Для этого выделим элемент формы, связанный с реквизитом АдресПланограммы, перейдем в его свойства и создадим обработчик события ПриНажатии. Напишем код, анализирующий отправленный из JavaScript URL:
&НаКлиенте
Процедура АдресПланограммыПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
// Получаем URL перехода из параметров события
ПереходныйURL = ДанныеСобытия.Url;
// Проверяем, наш ли это кастомный протокол обмена данными
Если Найти(ПереходныйURL, "1c-event://") > 0 Тогда
// Отменяем стандартное поведение браузера (чтобы не было реальной попытки перехода по ссылке)
СтандартнаяОбработка = Ложь;
// Анализируем параметры запроса. Отрезаем протокол
ЧистыйЗапрос = Сред(ПереходныйURL, СтрДлина("1c-event://") + 1);
// Ищем разделители параметров
ПозицияПараметра = Найти(ЧистыйЗапрос, "?id=");
Если ПозицияПараметра > 0 Тогда
Действие = Лев(ЧистыйЗапрос, ПозицияПараметра - 1);
ИдентификаторТовара = Сред(ЧистыйЗапрос, ПозицияПараметра + 4);
Если Действие = "click" Тогда
// Здесь мы можем найти реальный товар в БД и вывести информацию о нем
ПоказатьПредупреждение(, "Вы выбрали на планограмме товар с кодом: " + ИдентификаторТовара);
// Пример интерактивного изменения реквизита формы
ВыбранныйТоварСтрокой = ИдентификаторТовара;
КонецЕсли;
КонецЕсли;
КонецЕсли;
КонецПроцедуры
Разработанное нами решение на базе HTML и SVG обладает невероятной гибкостью. Давайте проанализируем, какие продвинутые возможности мы можем реализовать поверх этого каркаса:
Fabric.js или Interact.js), мы можем дать пользователям возможность перетаскивать товары между полками прямо мышкой. Новые координаты можно сразу же отправлять обратно в 1С через тот же механизм URL-запросов и сохранять в базу данных.Использование связки 1С и веб-технологий через ПолеHTMLДокумента — это современный, надежный и полностью бесплатный стандарт разработки интерактивных графических интерфейсов, который позволяет обойти любые ограничения классических форм 1С.