Как визуализировать организационную структуру предприятия в 1С?

← На главную

Разработка и визуализация организационной структуры (оргсхемы) предприятия — это частая задача при автоматизации кадрового и управленческого учета. В крупных компаниях оргструктура включает в себя множество уровней иерархии: управляющую компанию, филиалы, обособленные подразделения, департаменты, отделы и конкретные должности сотрудников. При этом к интерактивной схеме часто предъявляются жесткие требования: динамическое построение, фильтрация по правам доступа, возможность перехода к кадровым документам и редактирование прямо «на лету».

В этой статье мы подробно разберем три основных технологических подхода к решению этой задачи в среде «1С:Предприятие»: использование стандартного объекта Графическая схема, динамическое формирование Табличного документа и интеграцию веб-технологий через Поле HTML-документа. Выясним преимущества и недостатки каждого метода и напишем примеры кода для реализации.

Вариант 1. Использование встроенного объекта «Графическая схема»

На первый взгляд, стандартный объект платформы 1С ГрафическаяСхема (используемый обычно для карт маршрутов бизнес-процессов) кажется идеальным кандидатом. Однако на практике разработчики сталкиваются с серьезными архитектурными ограничениями.

Главная сложность заключается в том, что в объекте ГрафическаяСхема отсутствует механизм автоматического распределения элементов (Auto-layout). Платформа не умеет самостоятельно выстраивать дерево подчиненности, рассчитывать оптимальные расстояния между блоками и избегать пересечения соединительных линий. Если ваша оргструктура динамически меняется (добавляются новые подразделения, закрываются филиалы), вам придется вручную в коде вычислять координаты X и Y для каждого элемента, управлять размерами блоков и рисовать связующие линии-стрелки программно.

Поэтому использовать графическую схему для сложных иерархических структур с большим количеством уровней подчинения не рекомендуется. Этот вариант жизнеспособен только для статичных, редко меняющихся схем верхнего уровня.

Вариант 2. Динамический Табличный документ (Рекомендуемый нативный метод)

Если перед вами стоит задача реализовать оргструктуру исключительно штатными средствами платформы 1С без использования сторонних веб-технологий, оптимальным выбором будет Табличный документ. В отличие от ручной отрисовки, мы можем формировать его структуру динамически на основе иерархического справочника подразделений или должностей.

Рассмотрим алгоритм реализации по шагам:

В макете обработки или отчета создадим именованные области-шаблоны. Например, область БлокРуководителя (шириной в несколько колонок и строк, с рамкой и заливкой), область БлокСотрудника и области-разделители для имитации линий связи.
В модуле напишем рекурсивный обход дерева значений оргструктуры.
Будем последовательно выводить области в итоговый табличный документ с помощью методов Вывести() (для добавления строк вниз) и Присоединить() (для добавления блоков вбок на том же уровне).

Для обеспечения интерактива настроим обработку события двойного клика на ячейке табличного документа. Мы можем передавать в параметр Расшифровка ссылку на подразделение или сотрудника. Проанализируем пример кода для обработки такого клика в управляемой форме:


&НаКлиенте
Процедура РезультатВыбор(Элемент, Область, СтандартнаяОбработка)
    
    СтандартнаяОбработка = Ложь;
    СсылкаНаОбъект = Область.Расшифровка;
    
    Если ЗначениеЗаполнено(СсылкаНаОбъект) Тогда
        // Проверяем тип данных в расшифровке
        Если ТипЗнч(СсылкаНаОбъект) = Тип("СправочникСсылка.Сотрудники") Тогда
            // Открываем форму сотрудника или табель с проверкой прав доступа
            ПараметрыФормы = Новый Структура("Ключ", СсылкаНаОбъект);
            ОткрытьФорму("Справочник.Сотрудники.ФормаОбъекта", ПараметрыФормы);
        ИначеЕсли ТипЗнч(СсылкаНаОбъект) = Тип("СправочникСсылка.Подразделения") Тогда
            // Обрабатываем клик по подразделению
            ПоказатьПредупреждение(, "Выбрано подразделение: " + СсылкаНаОбъект);
        КонецЕсли;
    КонецЕсли;
    
КонецПроцедуры

Плюсы метода: решение полностью нативное, быстро работает, легко разграничивать права доступа средствами 1С (роли, RLS), не требует сторонних библиотек и глубоких знаний веб-технологий.

Минусы: дизайн табличного документа выглядит архаично, отсутствуют плавные анимации свертывания/развертывания ветвей, сложно реализовать горизонтальное масштабирование (zoom) на больших объемах данных.

Вариант 3. Интеграция HTML + JavaScript (Поле HTML-документа)

Это наиболее современный и визуально привлекательный подход. Начиная с версии платформы 8.3.14, встроенный движок отображения HTML-документов в тонком клиенте на операционных системах Windows был переведен на современный WebKit (Chromium). Это позволяет использовать любые JavaScript-библиотеки для построения графов и оргсхем.

Для реализации этого подхода рекомендуем рассмотреть такие JS-библиотеки, как vis.js (модуль vis-network), OrgChart JS от BALKAN App, или мощную библиотеку диаграмм GoJS. Они автоматически решают проблему позиционирования блоков, поддерживают drag-and-drop, масштабирование колесиком мыши и позволяют кастомизировать дизайн блоков с помощью CSS.

Рассмотрим подробно, как настроить двусторонний обмен данными между 1С и JavaScript внутри Поля HTML-документа.

Шаг 1. Передача данных из 1С в HTML-шаблон

Сначала мы должны преобразовать иерархический справочник подразделений в JSON-структуру, которую ожидает библиотека визуализации. Выясним, как сформировать такие данные на стороне сервера 1С:


&НаСервере
Функция ПолучитьДанныеСтруктурыВФорматеJSON() Экспорт
    
    Запрос = Новый Запрос;
    Запрос.Текст = 
        "ВЫБРАТЬ
        |   Подразделения.Ссылка КАК Идентификатор,
        |   Подразделения.Наименование КАК Наименование,
        |   Подразделения.Родитель КАК Родитель,
        |   Подразделения.Руководитель КАК Руководитель
        |ИЗ
        |   Справочник.Подразделения КАК Подразделения";
        
    ТаблицаДанных = Запрос.Выполнить().Выгрузить();
    
    МассивУзлов = Новый Массив;
    Для Каждого Строка Из ТаблицаДанных Цикл
        Узел = Новый Соответствие;
        Узел.Вставить("id", Строка(Строка.Идентификатор.УникальныйИдентификатор()));
        Узел.Вставить("name", Строка.Наименование);
        Узел.Вставить("manager", Строка(Строка.Руководитель));
        
        Если ЗначениеЗаполнено(Строка.Родитель) Тогда
            Узел.Вставить("pid", Строка(Строка.Родитель.УникальныйИдентификатор()));
        КонецЕсли;
        
        МассивУзлов.Добавить(Узел);
    КонецЦикла;
    
    // Записываем данные в формат JSON
    ЗаписьJSON = Новый ЗаписьJSON;
    ЗаписьJSON.УстановитьСтроку();
    ЗаписатьJSON(ЗаписьJSON, МассивУзлов);
    
    Возврат ЗаписьJSON.Закрыть();
КонецФункции

Шаг 2. Получение и обработка событий из HTML обратно в 1С

Когда пользователь кликает по кнопке внутри HTML-схемы (например, по кнопке «Показать табель» в блоке конкретного сотрудника), JavaScript-код должен передать событие обратно в 1С. Для этого используется современный механизм взаимодействия платформы с WebKit — метод window.Extension.postMessage().

Посмотрим на пример JS-кода, который вешается на событие клика по узлу схемы в HTML-документе:


// Функция вызывается при клике на элемент схемы в браузере
function onNodeClick(nodeId, actionName) {
    let messageData = {
        event: "node_clicked",
        id: nodeId,
        action: actionName
    };
    
    // Отправляем сообщение обратно в платформу 1С
    if (window.Extension) {
        window.Extension.postMessage(JSON.stringify(messageData));
    } else {
        // Резервный метод для старых версий платформы
        window.external.postMessage(JSON.stringify(messageData));
    }
}

Теперь на форме 1С у элемента управления Поле HTML-документа нам необходимо создать обработчик события ПриНажатии или ДокументСформирован (в зависимости от логики интеграции). Начиная с версии 8.3.15, предпочтительно использовать событие ОжиданиеСообщения (MessageWaiting) для асинхронного получения данных из WebKit.

Разберем, как выглядит обработка полученного из HTML события в модуле управляемой формы 1С:


&НаКлиенте
Процедура ПолеHTMLДокументаОжиданиеСообщения(Элемент, Сообщение, ДополнительныеПараметры)
    
    // Парсим JSON, пришедший от JS-библиотеки
    ЧтениеJSON = Новый ЧтениеJSON;
    ЧтениеJSON.УстановитьСтроку(Сообщение);
    ДанныеСобытия = ПрочитатьJSON(ЧтениеJSON);
    ЧтениеJSON.Закрыть();
    
    Если ДанныеСобытия.event = "node_clicked" Тогда
        ИдентификаторУзла = ДанныеСобытия.id;
        Действие = ДанныеСобытия.action;
        
        // Получаем ссылку на элемент справочника по его UUID
        СсылкаНаОбъект = ПолучитьСсылкуПоУникальномуИдентификатору(ИдентификаторУзла);
        
        Если Действие = "show_timesheet" Тогда
            // Проверяем права текущего пользователя и открываем табель
            ОткрытьТабельСотрудника(СсылкаНаОбъект);
        КонецЕсли;
    КонецЕсли;
    
КонецПроцедуры

Сравнительный анализ решений

Проанализируем все три рассмотренных подхода, чтобы сделать правильный выбор под конкретную бизнес-задачу:

1. Графическая схема (GRS)

Сложность реализации: Очень высокая (требуется ручной расчет всех координат геометрических фигур).
Внешний вид: Устаревший, плоская векторная графика.
Интерактивность: Средняя (поддерживает стандартные события клика).
Когда применять: Только для простых статических схем уровня дирекции (до 10 блоков).

2. Динамический Табличный документ

Сложность реализации: Средняя (чистый код 1С без сторонних языков программирования).
Внешний вид: Строгий, табличный. Напоминает классические отчеты.
Интерактивность: Высокая (через стандартный механизм расшифровки).
Когда применять: Если у вас сжатые сроки разработки, нет опыта работы с JS и жесткие требования безопасности (запрет на использование внешних скриптов).

3. Поле HTML-документа (JS + CSS)

Сложность реализации: Высокая (требует навыков веб-разработки HTML/CSS/JS и организации обмена данными JSON).
Внешний вид: Современный, интерактивный, с плавной анимацией, сворачиванием веток и масштабированием.
Интерактивность: Максимальная (любые кнопки, всплывающие окна прямо на схеме, drag-and-drop).
Когда применять: Идеально подходит для создания корпоративных порталов, полноценных HRM-систем внутри 1С, где важен юзабилити и красивый интерфейс для топ-менеджмента.

Таким образом, выбор технологии напрямую зависит от квалификации разработчика и требований к интерфейсу. Для быстрого запуска в учетной системе отлично подойдет динамический табличный документ, а для создания визуального шедевра — связка 1С с современными JS-библиотеками визуализации графов через Поле HTML-документа.