Редактор шаблона формы

Редактировал(а) admin 2026/09/03 16:54

Управление
- Копировать
Действия
Просмотр

С версии 20.54 Платформы НЕЙРОСС добавлен простой редактор шаблона пользовательской формы.

Общие сведения о настройке шаблонов форм приведены в разделе [Настройка форм ввода данных]. Ниже даны сведения об использовании редактора готовых HTML- и JSX-шаблонов форм.

Общие сведения

Платформа НЕЙРОСС обеспечивает возможность настройки произвольного шаблона ввода данных пропуска и владельца буквально для каждой группы пропусков. При этом, так как пропуск может принадлежать нескольким группам пропусков одновременно, данные одного и того же пропуска и владельца могут отображаться в разных группах по-разному. Путём ограничения доступа операторов к группам пропусков вы можете ограничивать оператору также доступ к персональным данным: для каждой группы настроить отображение только тех данных, доступ к которым необходим конкретному оператору для выполнения его должностных функций, скрыв все остальные.

Редактирование JSON-шаблонов форм осуществляется с помощью встроенного Конструктора форм [Конструктор форм].

Редактирование HTML- и JSX-шаблонов форм ранее осуществлялось только с помощью внешних редакторов. Форму требовалось скачать, отредактировать и загрузить повторно.

Теперь достаточно открыть встроенный редактор, внести требуемые изменения и сохранить шаблон. Также с помощью функции предпросмотра вы можете верифицировать изменения сразу в процессе редактирования шаблона. Если редактор кажется достаточно сложным, вы всегда можете обратиться к специалистам компании ИТРИУМ за консультацией и выполнением таких работ под заказ.

Редактор шаблонов HTML и JSX-форм доступен с версии 20.54 Платформы НЕЙРОСС. Поддержка формата JSX доступна с версии 20.53.

Окно редактора

Чтобы открыть редактор шаблона формы:

Выберите группу пропусков, для которой настроен HTML- или JSX-шаблон формы, требующий редактирования.
Перейдите к вкладке Настройки группы. Для настройки шаблона формы владельца пропуска перейдите к вкладке Форма ввода: Владелец пропуска. Для настройки формы пропуска перейдите к вкладке Форма ввода: Пропуск.
Убедитесь, что выбран тип Пользовательская форма и загружен HTML- или JSX-шаблон. Нажмите на кнопку Редактировать шаблон.

Кнопка Редактировать шаблон доступна только для пользовательских HTML- и JSX-шаблонов. Для шаблона, созданного конструктором форм, используйте кнопку Открыть конструктор [Конструктор форм]. Если шаблон ещё не загружен, сначала загрузите файл [Готовый шаблон формы].

Откроется окно Редактирование шаблона с именем текущего файла шаблона в заголовке.

Исходный код шаблона: текстовый редактор с подсветкой синтаксиса. Здесь отображается HTML-разметка, стили CSS и скрипт сопоставления полей. Изменения вносятся непосредственно в код.
Предварительный просмотр: живое отображение формы по текущему содержимому редактора. Позволяет сразу оценить внешний вид, состав и порядок полей.
Кнопки управления шаблоном:
1. Применить: обновить предварительный просмотр по текущему коду, не закрывая окно и не записывая шаблон в настройки группы.
2. Отмена: закрыть окно без сохранения изменений.
3. Сохранить: записать шаблон для выбранной группы пропусков и закрыть окно редактора.

ПОДСКАЗКА

Перед нажатием Сохранить всегда проверяйте результат в области предварительного просмотра. Если после правки кода форма отображается некорректно, нажмите Отмена и откройте редактор повторно — в настройках группы останется предыдущая версия шаблона.

Порядок работы

Запустите АРМ НЕЙРОСС Доступ и авторизуйтесь с учётной записью пользователя с правами администрирования раздела Персонал [Управление пользователями].

В разделе Персонал в блоке Группы выделите группу пропусков, настройки которой требуется изменить.

Настройки форм ввода наследуются дочерними группами. Чтобы изменить шаблон для всей системы, выделите корневую группу Все.

Перейдите к вкладке Настройки группы > Форма ввода: Владелец пропуска или Форма ввода: Пропуск.

Откройте редактор по кнопке Редактировать шаблон.

Внесите изменения в исходный код:

оформление — в блоке <style> (цвета, отступы, размеры фотографии, ширина подписей);
состав и порядок полей — в HTML-разметке, конструкциями вида {{ #DATA.ключ }};
подписи, обязательность и тип поля — в функции exportDataMapping шаблона.

Нажмите Применить и проверьте форму справа.

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

Значения, заданные в блоке значений по умолчанию, имеют более высокий приоритет над значениями, заданными в шаблоне [Настройка форм ввода данных].

Состав HTML-шаблона

Типовой HTML-шаблон формы состоит из трёх частей.

Разметка

В теле документа поля формы задаются плейсхолдерами {{ #DATA.ключ }}. Ключ должен совпадать со значением key в таблице сопоставления. Порядок плейсхолдеров в разметке определяет порядок полей на форме.

Пример фрагмента стандартной формы владельца пропуска:

<div class="card">
    <div class="input-group">
        {{ #DATA.surname }}
        {{ #DATA.name }}
        {{ #DATA.patronymic }}
        {{ #DATA.document_number }}
        {{ #DATA.organization }}
        {{ #DATA.division }}
        {{ #DATA.post }}
        {{ #DATA.clock_number }}
        <div class="document-control-link">
            <label>Документы:</label>
            {{ #DATA.docs }}
        </div>
    </div>
    <div class="img-control">{{ #DATA.photo }}</div>
</div>
<div class="extras">
    {{ #DATA.extra }}
</div>

Вокруг плейсхолдеров допускается произвольная HTML-разметка: заголовки, подсказки оператору, группировка полей, логотип организации.

Оформление

Стили задаются в теге <style>. Через CSS можно изменить фон формы, цвет и размер подписей, ширину колонки меток, размеры области фотографии, отступы.

Пример: цвет фона формы и акцентный цвет подписей.

body {
   background: #f4f7fa;
   color: #333333;
   font-family: Roboto, Arial, sans-serif;
}
.input-group label {
   color: #100943;
}

Сопоставление полей

Скрипт шаблона сообщает Платформе НЕЙРОСС, какие поля выводить и куда записывать введённые данные. Используется функция exportDataMapping.

Свойство	Назначение
key	Имя плейсхолдера в разметке ({{ #DATA.key }})
propertyPath	Путь к свойству владельца или пропуска в данных Платформы НЕЙРОСС
type	Тип элемента ввода: text, hintedText, textarea, uploadImg, docControl и др.
label	Подпись поля, которую видит оператор
required	Признак обязательности заполнения
default	Значение по умолчанию в шаблоне

ВАЖНО

Не изменяйте key и propertyPath без необходимости: от них зависит, в какое свойство владельца или пропуска будут записаны данные. Ошибочный путь приведёт к тому, что поле перестанет сохраняться или начнёт записывать значение «не туда».

Список стандартных свойств приведён в разделе [Свойства владельца и пропуска]. Пользовательские свойства добавляются отдельно [Добавление пользовательских свойств].

Типовые изменения

Изменить подпись поля

Найдите объект поля в exportDataMapping и измените значение label. Например, вместо «Доп. информация» можно указать «Дополнительные сведения»:

{
    key: 'extra',
    propertyPath: ['properties', 'extra'],
    type: 'textarea',
    label: 'Дополнительные сведения'
}

Нажмите Применить — новая подпись отобразится в предварительном просмотре.

Изменить порядок полей

Переставьте строки плейсхолдеров {{ #DATA.ключ }} в HTML-разметке. Порядок объектов в exportDataMapping на внешний вид формы не влияет.

Скрыть поле

Удалите соответствующий плейсхолдер из разметки. Объект в exportDataMapping можно оставить: поле перестанет отображаться в форме, данные в базе при этом не удаляются. При необходимости поле можно снова вывести в форме или в таблице пропусков [Настройка таблицы пропусков].

Не удаляйте обязательные для оформления пропуска поля (как правило, Фамилия и Имя), если оператор должен создавать владельца в этой группе.

Сделать поле обязательным

В объекте поля укажите required: true. На форме у подписи появится признак обязательности.

Добавить изображение или логотип

Для оформления формы в корпоративном стиле загрузите изображение в файловое хранилище и укажите ссылку в CSS или в разметке. Подробности и пример ссылки приведены в разделе [Готовый шаблон формы]. При использовании CSV-файла изображения достаточно вставить код csv прямо в код шаблона.

ПОДСКАЗКА

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

Пример оформления формы в корпоративном стиле

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

Ниже — ориентир по цветам сайта itrium.ru:

Элемент	Цвет	Назначение в форме
Акцент ИТРИУМ	#00B4F0	ссылки, рамка фокуса, декоративная полоса заголовка
Тёмно-синий	#100943	заголовок формы, цвет подписей
Текст	#333333	основной текст
Фон	#F4F7FA	фон области формы

Что обычно меняют для «фирменного» вида:

добавляют шапку формы с названием («Владелец пропуска») и тонкой акцентной полосой цвета #00B4F0;
задают шрифт Roboto / Arial, увеличивают внутренние отступы карточки;
окрашивают подписи полей в #100943, ссылку добавить документ — в #00B4F0;
задают рамку области фотографии тем же акцентным цветом;
меняют стандартные имена полей, например: «Доп. информация» в «Дополнительные сведения».

Набор полей и exportDataMapping при этом остаются прежними: меняется только оформление.

Пример формы владельца пропуска, оформленной в корпоративном стиле ИТРИУМ

Готовый HTML-файл такого шаблона можно вставить в редактор целиком (заменить содержимое) и нажать Применить. Если форма отображается корректно, нажмите Сохранить. При необходимости разработки более сложного JSX-шаблона (валидация, расчёт срока действия, несколько идентификаторов) обратитесь к специалистам компании ИТРИУМ.

Код шаблона из примера приведен ниже. Вы можете сохранить код в файле формата HTML и загрузить его [Готовый шаблон формы] или вставить напрямую в редакторе.

<!DOCTYPE html>
<html>
   <head>
       <title>Форма редактирования владельца пропуска</title>
   </head>
   <body>
       <header class="form-header">
           <div class="form-header__brand">
               <svg class="form-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 50" aria-hidden="true">
                   <polygon fill="#3cf" points="46 23.05 34.5 16.44 23.01 23.05 23.01 36.36 34.5 42.98 46 36.36"/>
                   <polygon fill="#0098d4" points="23.01 23.05 34.5 29.71 46 23.05 28.45 12.95 28.45 19.93"/>
                   <polygon fill="#3cf" points="5.44 6.66 5.44 19.93 16.96 26.54 28.45 19.93 28.45 6.66 16.96 0"/>
                   <polygon fill="#0098d4" points="16.96 26.54 16.96 13.27 5.44 6.66 5.44 26.91 11.53 23.42"/>
                   <polygon fill="#3cf" points="11.49 50 23.01 43.34 23.01 30.07 11.49 23.42 0 30.07 0 43.34"/>
                   <polygon fill="#0098d4" points="23.01 30.07 11.53 36.69 11.53 50 29.06 39.85 23.01 36.36"/>
                   <polygon fill="#09c" points="16.96 26.54 23.01 23.05 23.01 30.07"/>
               </svg>
               <div class="form-header__text">
                   <div class="form-header__product">НЕЙРОСС</div>
                   <div class="form-header__title">Владелец пропуска</div>
               </div>
           </div>
           <div class="form-header__hint">Поля со звёздочкой обязательны для заполнения</div>
       </header>

       <div class="card">
           <div class="input-group">
               <div class="section-title">Личные данные</div>
                {{ #DATA.surname }}
                {{ #DATA.name }}
                {{ #DATA.patronymic }}
                {{ #DATA.document_number }}
               <div class="section-title">Место работы</div>
                {{ #DATA.organization }}
                {{ #DATA.division }}
                {{ #DATA.post }}
                {{ #DATA.clock_number }}
               <div class="document-control-link">
                   <label>
                        Документы:
                   </label>
                    {{ #DATA.docs }}
               </div>
           </div>
           <div class="img-control">{{ #DATA.photo }}</div>
       </div>
       <div class="extras">
                {{ #DATA.extra }}
       </div>
       <style>
           * {
               box-sizing: border-box;
            }
           body {
               display: flex;
               flex-direction: column;
               margin: 0;
               background: #f4f7fa;
               color: #333333;
               font-family: Roboto, Arial, Helvetica, sans-serif;
            }
            .form-header {
               display: flex;
               align-items: center;
               justify-content: space-between;
               background: #100943;
               color: #ffffff;
               padding: 10px 14px;
               border-bottom: 3px solid #00B4F0;
               flex-shrink: 0;
            }
            .form-header__brand {
               display: flex;
               align-items: center;
               gap: 10px;
            }
            .form-header__logo {
               width: 28px;
               height: 30px;
               flex-shrink: 0;
            }
            .form-header__product {
               font-size: 10px;
               letter-spacing: 0.18em;
               text-transform: uppercase;
               color: #00B4F0;
               line-height: 1.2;
            }
            .form-header__title {
               font-size: 15px;
               font-weight: 500;
               line-height: 1.2;
            }
            .form-header__hint {
               font-size: 11px;
               color: #b9c4d6;
            }
            .section-title {
               font-size: 11px;
               font-weight: 500;
               letter-spacing: 0.08em;
               text-transform: uppercase;
               color: #00B4F0;
               padding: 8px 0 4px !important;
               border-bottom: 1px solid #e4eaf0;
               margin-bottom: 4px;
            }
            .img-control {
               margin-left: auto;
            }
           div[data-input-key="photo"] {
               padding-top: 1px;
               height: 100%;
            }
            .upload-img-wrapper {
               height: 100%;
            }
            .img-control .upload-img-wrapper__loader,
            .img-control .upload-img-wrapper img.upload-img-wrapper__preview {
               max-width: 159px;
               min-width: 159px;
               height: 212px;
               object-fit: contain;
               outline: 1px dashed #00B4F0;
               background: #ffffff;
            }
            .card {
               display: flex;
               padding: 14px 14px 8px;
               padding-bottom: 0;
               flex-shrink: 0;
               background: #ffffff;
               border: 1px solid #e4eaf0;
               margin: 10px 10px 0;
            }
            .input-group {
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               flex-grow: 1;
               padding-right: 10px;
            }
            .input-group > div {
               display: flex;
               justify-content: space-between;
               padding-bottom: 4px;
            }
           div[data-input-key="card_number"] {
               padding-bottom: 0px;
            }
            .input-group > div > label {
               min-width: 135px;
               max-width: 135px;
               color: #100943;
            }
            .input-group > div > * {
               flex-grow: 1;
            }
            .input-group .card-reader {
               width: 100%;
            }
            .input-group label {
               display: block;
               line-height: 25px;
            }
            .input-group input,
            .input-group select,
            .input-group textarea {
               border: 1px solid #d6dce3;
               color: #333333;
            }
            .input-group input:focus,
            .input-group select:focus,
            .input-group textarea:focus {
               outline: none;
               border-color: #00B4F0;
            }
            .document-control-link .form-link {
               line-height: 25px;
               padding-left: 5px;
               color: #00B4F0;
            }
            .extras {
               padding: 8px 14px 12px;
               display: flex;
               flex-grow: 1;
               background: #ffffff;
               border: 1px solid #e4eaf0;
               border-top: none;
               margin: 0 10px 10px;
               border-left: 3px solid #00B4F0;
            }
            .extras label {
               display: block;
               height: 30px;
               line-height: 30px;
               color: #100943;
            }
            .extras > div {
               width: 100%;
            }
            .extras textarea {
               width: 100%;
               min-height: 70px;
               height: calc(100% - 40px);
               border: 1px solid #d6dce3;
               color: #333333;
            }
            .extras textarea:focus {
               outline: none;
               border-color: #00B4F0;
            }
       </style>
       <script>
           function safeClosure() {
               return {
                   execute: function () {
                       console.log('executed, when template is ready');
                    },
                   exportDataMapping: function() {
                       return [
                            {
                               key: 'photo',
                               propertyPath: ['photo'],
                               type: 'uploadImg',
                               default: null
                            },
                            {
                               key: 'surname',
                               propertyPath: ['surname'],
                               type: 'text',
                               label: 'Фамилия',
                               required: true
                            },
                            {
                               key: 'name',
                               propertyPath: ['name'],
                               type: 'text',
                               label: 'Имя',
                               required: true
                            },
                            {
                               key: 'patronymic',
                               propertyPath: ['patronymic'],
                               type: 'text',
                               label: 'Отчество'
                            },
                            {
                               key: 'organization',
                               propertyPath: ['organization'],
                               type: 'hintedText',
                               label: 'Организация'
                            },
                            {
                               key: 'document_number',
                               propertyPath: ['document_number'],
                               type: 'text',
                               label: '№ документа',
                               required: true
                            },
                            {
                               key: 'division',
                               propertyPath: ['division'],
                               type: 'hintedText',
                               label: 'Подразделение'
                            },
                            {
                               key: 'post',
                               propertyPath: ['post'],
                               type: 'hintedText',
                               label: 'Должность',
                               default: ''
                            },
                            {
                               key: 'clock_number',
                               propertyPath: ['clock_number'],
                               type: 'text',
                               label: 'Табельный номер'
                            },
                            {
                               key: 'extra',
                               propertyPath: ['properties', 'extra'],
                               type: 'textarea',
                               label: 'Дополнительные сведения'
                            },
                            {
                               key: 'docs',
                               propertyPath: ['properties', 'documents'],
                               type: 'docControl',
                               host: null,
                               port: null
                            },
                        ];
                    },
                }
            };
           window.exportDataMapping = safeClosure().exportDataMapping;
           window.templateReady = safeClosure().execute;
       </script>
   </body>
</html>

Возврат к предыдущей версии

Если сохранённый шаблон вас не устраивает:

откройте редактор повторно и верните прежний код, если он сохранён у вас в файле;
либо в блоке типа формы переключитесь к значению Стандартная форма — будет восстановлен предустановленный шаблон;
либо включите наследование от родительской группы.

Порядок возврата к стандартному или наследуемому шаблону приведён в разделе [Настройка форм ввода данных].