С версии 20.54 Платформы НЕЙРОСС добавлен простой редактор шаблона пользовательской формы.
Общие сведения
Платформа НЕЙРОСС обеспечивает возможность настройки произвольного шаблона ввода данных пропуска и владельца буквально для каждой группы пропусков. При этом, так как пропуск может принадлежать нескольким группам пропусков одновременно, данные одного и того же пропуска и владельца могут отображаться в разных группах по-разному. Путём ограничения доступа операторов к группам пропусков вы можете ограничивать оператору также доступ к персональным данным: для каждой группы настроить отображение только тех данных, доступ к которым необходим конкретному оператору для выполнения его должностных функций, скрыв все остальные.
Редактирование JSON-шаблонов форм осуществляется с помощью встроенного Конструктора форм [Конструктор форм].
Редактирование HTML- и JSX-шаблонов форм ранее осуществлялось только с помощью внешних редакторов. Форму требовалось скачать, отредактировать и загрузить повторно.
Теперь достаточно открыть встроенный редактор, внести требуемые изменения и сохранить шаблон. Также с помощью функции предпросмотра вы можете верифицировать изменения сразу в процессе редактирования шаблона. Если редактор кажется достаточно сложным, вы всегда можете обратиться к специалистам компании ИТРИУМ за консультацией и выполнением таких работ под заказ.
Редактор шаблонов HTML и JSX-форм доступен с версии 20.54 Платформы НЕЙРОСС. Поддержка формата JSX доступна с версии 20.53.
Окно редактора
Чтобы открыть редактор шаблона формы:
- Выберите группу пропусков, для которой настроен HTML- или JSX-шаблон формы, требующий редактирования.
Перейдите к вкладке Настройки группы. Для настройки шаблона формы владельца пропуска перейдите к вкладке Форма ввода: Владелец пропуска. Для настройки формы пропуска перейдите к вкладке Форма ввода: Пропуск.
Убедитесь, что выбран тип Пользовательская форма и загружен HTML- или JSX-шаблон. Нажмите на кнопку Редактировать шаблон.
Откроется окно Редактирование шаблона с именем текущего файла шаблона в заголовке.
- Исходный код шаблона: текстовый редактор с подсветкой синтаксиса. Здесь отображается HTML-разметка, стили CSS и скрипт сопоставления полей. Изменения вносятся непосредственно в код.
- Предварительный просмотр: живое отображение формы по текущему содержимому редактора. Позволяет сразу оценить внешний вид, состав и порядок полей.
- Применить: обновить предварительный просмотр по текущему коду, не закрывая окно и не записывая шаблон в настройки группы.
- Отмена: закрыть окно без сохранения изменений.
- Сохранить: записать шаблон для выбранной группы пропусков и закрыть окно редактора.
Порядок работы
Запустите АРМ НЕЙРОСС Доступ и авторизуйтесь с учётной записью пользователя с правами администрирования раздела Персонал [Управление пользователями].
В разделе Персонал в блоке Группы выделите группу пропусков, настройки которой требуется изменить.
Перейдите к вкладке Настройки группы > Форма ввода: Владелец пропуска или Форма ввода: Пропуск.
Откройте редактор по кнопке Редактировать шаблон.
Внесите изменения в исходный код:
- оформление — в блоке <style> (цвета, отступы, размеры фотографии, ширина подписей);
- состав и порядок полей — в HTML-разметке, конструкциями вида {{ #DATA.ключ }};
- подписи, обязательность и тип поля — в функции exportDataMapping скрипта шаблона.
Нажмите Применить и проверьте форму справа.
Если результат верный, нажмите Сохранить. Форма отобразится в блоке значений по умолчанию вкладки настройки группы.
Состав HTML-шаблона
Типовой HTML-шаблон формы состоит из трёх частей.
Разметка
В теле документа поля формы задаются плейсхолдерами {{ #DATA.ключ }}. Ключ должен совпадать со значением key в таблице сопоставления. Порядок плейсхолдеров в разметке определяет порядок полей на форме.
Пример фрагмента стандартной формы владельца пропуска:
<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 можно изменить фон формы, цвет и размер подписей, ширину колонки меток, размеры области фотографии, отступы.
Пример: цвет фона формы и акцентный цвет подписей.
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 | Значение по умолчанию в шаблоне |
Типовые изменения
Изменить подпись поля
Найдите объект поля в exportDataMapping и измените значение label. Например, вместо «Доп. информация» можно указать «Дополнительные сведения»:
key: 'extra',
propertyPath: ['properties', 'extra'],
type: 'textarea',
label: 'Дополнительные сведения'
}
Нажмите Применить — новая подпись отобразится в предварительном просмотре.
Изменить порядок полей
Переставьте строки плейсхолдеров {{ #DATA.ключ }} в HTML-разметке. Порядок объектов в exportDataMapping на внешний вид формы не влияет.
Скрыть поле
Удалите соответствующий плейсхолдер из разметки. Объект в exportDataMapping можно оставить: поле перестанет отображаться в форме, данные в базе при этом не удаляются. При необходимости поле можно снова вывести в форме или в таблице пропусков [Настройка таблицы пропусков].
Сделать поле обязательным
В объекте поля укажите required: true. На форме у подписи появится признак обязательности.
Добавить изображение или логотип
Для оформления формы в корпоративном стиле загрузите изображение в файловое хранилище и укажите ссылку в CSS или в разметке. Подробности и пример ссылки приведены в разделе [Готовый шаблон формы].
Пример оформления формы в корпоративном стиле
Стандартный шаблон формы владельца функционален, но использует оформление браузера по умолчанию. Во встроенном редакторе можно привести форму к корпоративному стилю, не меняя набор полей и способ сохранения данных.
Ниже — ориентир по цветам сайта itrium.ru:
| Элемент | Цвет | Назначение в форме |
|---|---|---|
| Акцент ИТРИУМ | #00B4F0 | ссылки, рамка фокуса, декоративная полоса заголовка |
| Тёмно-синий | #100943 | заголовок формы, цвет подписей |
| Текст | #333333 | основной текст |
| Фон | #F4F7FA | фон области формы |
Что обычно меняют для «фирменного» вида:
- добавляют шапку формы с названием («Владелец пропуска») и тонкой акцентной полосой цвета #00B4F0;
- задают шрифт Roboto / Arial, увеличивают внутренние отступы карточки;
- окрашивают подписи полей в #100943, ссылку добавить документ — в #00B4F0;
- задают рамку области фотографии тем же акцентным цветом;
- переименовывают «Доп. информация» в «Дополнительные сведения».
Набор полей и exportDataMapping при этом остаются прежними: меняется только оформление.
Пример формы владельца пропуска, оформленной в корпоративном стиле ИТРИУМ
Возврат к предыдущей версии
Если сохранённый шаблон вас не устраивает:
- откройте редактор повторно и верните прежний код, если он сохранён у вас в файле;
- либо в блоке типа формы переключитесь к значению Стандартная форма — будет восстановлен предустановленный шаблон;
- либо включите наследование от родительской группы.
Порядок возврата к стандартному или наследуемому шаблону приведён в разделе [Настройка форм ввода данных].