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

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

Общие сведения о настройке шаблонов форм приведены в разделе ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome]]]. Ниже даны сведения об использовании редактора готовых HTML- и JSX-шаблонов форм.

5

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

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

10

11

Редактирование JSON-шаблонов форм осуществляется с помощью встроенного Конструктора форм ~[[[Конструктор форм>>doc:neyross.setup.access-control.input-forms.form-builder.WebHome]]].

12

13

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

14

15

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

(% class="box" %)

(((

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

20

)))

21

22

== {{id name="Редакторшаблонаформы-Окноредактора"/}}Окно редактора ==

23

24

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

25

26

1. Выберите группу пропусков, для которой настроен HTML- или JSX-шаблон формы, требующий редактирования.

27

1. (((

28

Перейдите к вкладке **Настройки группы**. Для настройки шаблона формы владельца пропуска перейдите к вкладке **Форма ввода: Владелец пропуска**. Для настройки формы пропуска перейдите к вкладке **Форма ввода: Пропуск**.

29

)))

30

1. (((

31

Убедитесь, что выбран тип **Пользовательская форма** и загружен HTML- или JSX-шаблон. Нажмите на кнопку **Редактировать шаблон**.

)))

Кнопка **Редактировать шаблон** доступна только для пользовательских HTML- и JSX-шаблонов. Для шаблона, созданного конструктором форм, используйте кнопку **Открыть конструктор** ~[[[Конструктор форм>>doc:neyross.setup.access-control.input-forms.form-builder.WebHome]]]. Если шаблон ещё не загружен, сначала загрузите файл ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]].

36

37

38

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

39

40

[[image:s_form_redactor_template.png||height="449" width="900"]]

41

42

1. **Исходный код шаблона**: текстовый редактор с подсветкой синтаксиса. Здесь отображается HTML-разметка, стили CSS и скрипт сопоставления полей. Изменения вносятся непосредственно в код.

43

1. **Предварительный просмотр**: живое отображение формы по текущему содержимому редактора. Позволяет сразу оценить внешний вид, состав и порядок полей.

44

1. **Кнопки управления шаблоном:**

45

11. **Применить**: обновить предварительный просмотр по текущему коду, не закрывая окно и не записывая шаблон в настройки группы.

46

11. **Отмена**: закрыть окно без сохранения изменений.

47

11. **Сохранить**: записать шаблон для выбранной группы пропусков и закрыть окно редактора.

**ПОДСКАЗКА**

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

53

54

55

== {{id name="Редакторшаблонаформы-Порядокработы"/}}Порядок работы ==

56

57

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

58

59

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

60

61

62

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

63

64

65

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

66

67

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

68

69

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

70

71

* оформление — в блоке ##<style>## (цвета, отступы, размеры фотографии, ширина подписей);

72

* состав и порядок полей — в HTML-разметке, конструкциями вида ##~{~{ #DATA.ключ }}##;

73

* подписи, обязательность и тип поля — в функции ##exportDataMapping## шаблона.

74

75

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

76

77

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

78

79

80

Значения, заданные в блоке значений по умолчанию, имеют более высокий приоритет над значениями, заданными в шаблоне ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome||anchor="Настройкаформвводаданных-Настройкашаблонаизначенийпоумолчанию"]]].

81

82

83

== {{id name="Редакторшаблонаформы-СоставHTMLшаблона"/}}Состав HTML-шаблона ==

84

85

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

=== Разметка ===

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

90

91

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

<label>Документы:</label>

</div>

</div>

<div class="img-control">{{ #DATA.photo }}</div>

</div>

</div>

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

=== Оформление ===

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

121

122

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

body {

background: #f4f7fa;

color: #333333;

font-family: Roboto, Arial, sans-serif;

}

.input-group label {

color: #100943;

}

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

136

137

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

138

139

|=Свойство|=Назначение

140

|**key**|Имя плейсхолдера в разметке (##~{~{ #DATA.key }}##)

141

|**propertyPath**|Путь к свойству владельца или пропуска в данных Платформы НЕЙРОСС

142

|**type**|Тип элемента ввода: ##text##, ##hintedText##, ##textarea##, ##uploadImg##, ##docControl## и др.

143

|**label**|Подпись поля, которую видит оператор

144

|**required**|Признак обязательности заполнения

145

|**default**|Значение по умолчанию в шаблоне

**ВАЖНО**

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

151

152

Список стандартных свойств приведён в разделе ~[[[Свойства владельца и пропуска>>doc:neyross.arm-access.passes.pass-holder-props.WebHome]]]. Пользовательские свойства добавляются отдельно ~[[[Добавление пользовательских свойств>>doc:neyross.setup.access-control.custom-props.WebHome]]].

153

154

155

== {{id name="Редакторшаблонаформы-Типовыеизменения"/}}Типовые изменения ==

156

157

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

158

159

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

{

key: 'extra',

propertyPath: ['properties', 'extra'],

165

type: 'textarea',

166

label: 'Дополнительные сведения'

}

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

171

172

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

173

174

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

=== Скрыть поле ===

Удалите соответствующий плейсхолдер из разметки. Объект в ##exportDataMapping## можно оставить: поле перестанет отображаться в форме, данные в базе при этом не удаляются. При необходимости поле можно снова вывести в форме или в таблице пропусков ~[[[Настройка таблицы пропусков>>doc:neyross.setup.access-control.pass-table.WebHome]]].

179

180

181

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

182

183

184

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

185

186

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

187

188

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

189

190

Для оформления формы в корпоративном стиле загрузите изображение в файловое хранилище и укажите ссылку в CSS или в разметке. Подробности и пример ссылки приведены в разделе ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]]. При использовании CSV-файла изображения достаточно вставить код csv прямо в код шаблона.

**ПОДСКАЗКА**

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

196

197

198

== {{id name="Редакторшаблонаформы-Примероформления"/}}Пример оформления формы в корпоративном стиле ==

199

200

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

201

202

Ниже — ориентир по цветам сайта [[itrium.ru>>https://www.itrium.ru]]:

203

204

|=Элемент|=Цвет|=Назначение в форме

205

|Акцент ИТРИУМ|#00B4F0|ссылки, рамка фокуса, декоративная полоса заголовка

206

|Тёмно-синий|#100943|заголовок формы, цвет подписей

207

|Текст|#333333|основной текст

208

|Фон|#F4F7FA|фон области формы

209

210

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

211

212

* добавляют шапку формы с названием («Владелец пропуска») и тонкой акцентной полосой цвета #00B4F0;

213

* задают шрифт Roboto / Arial, увеличивают внутренние отступы карточки;

214

* окрашивают подписи полей в #100943, ссылку **добавить документ** — в #00B4F0;

215

* задают рамку области фотографии тем же акцентным цветом;

216

* меняют стандартные имена полей, например: «Доп. информация» в «Дополнительные сведения».

217

218

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

219

220

[[image:template_editor_itrium_preview.png]]

221

222

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

223

224

225

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

226

227

228

(% class="wikigeneratedid" %)

229

Код шаблона из примера приведен ниже. Вы можете сохранить код в файле формата HTML и загрузить его ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]] или вставить напрямую в редакторе.

<!DOCTYPE html>

<html>

<head>

<title>Форма редактирования владельца пропуска</title>

</head>

<body>

</svg>

<div class="form-header__product">НЕЙРОСС</div>

251

<div class="form-header__title">Владелец пропуска</div>

252

</div>

253

</div>

254

<div class="form-header__hint">Поля со звёздочкой обязательны для заполнения</div>

</header>

<div class="section-title">Личные данные</div>

<div class="section-title">Место работы</div>

<label>

Документы:

</label>

</div>

</div>

<div class="img-control">{{ #DATA.photo }}</div>

</div>

</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;

301

flex-shrink: 0;

302

}

303

.form-header__brand {

display: flex;

align-items: center;

gap: 10px;

}

.form-header__logo {

width: 28px;

height: 30px;

flex-shrink: 0;

}

.form-header__product {

314

font-size: 10px;

315

letter-spacing: 0.18em;

316

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;

333

text-transform: uppercase;

334

color: #00B4F0;

335

padding: 8px 0 4px !important;

336

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 {

347

height: 100%;

348

}

349

.img-control .upload-img-wrapper__loader,

350

.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;

370

justify-content: space-between;

flex-grow: 1;

padding-right: 10px;

}

.input-group > div {

display: flex;

justify-content: space-between;

377

padding-bottom: 4px;

378

}

379

div[data-input-key="card_number"] {

380

padding-bottom: 0px;

381

}

382

.input-group > div > label {

min-width: 135px;

max-width: 135px;

color: #100943;

}

.input-group > div > * {

388

flex-grow: 1;

389

}

390

.input-group .card-reader {

width: 100%;

}

.input-group label {

display: block;

line-height: 25px;

}

.input-group input,

.input-group select,

.input-group textarea {

400

border: 1px solid #d6dce3;

401

color: #333333;

402

}

403

.input-group input:focus,

404

.input-group select:focus,

405

.input-group textarea:focus {

406

outline: none;

407

border-color: #00B4F0;

408

}

409

.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;

420

border-top: none;

421

margin: 0 10px 10px;

422

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);

437

border: 1px solid #d6dce3;

438

color: #333333;

439

}

440

.extras textarea:focus {

441

outline: none;

442

border-color: #00B4F0;

}

</style>

function safeClosure() {

447

return {

448

execute: function () {

449

console.log('executed, when template is ready');

450

},

451

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',

487

propertyPath: ['document_number'],

488

type: 'text',

489

label: '№ документа',

required: true

},

{

key: 'division',

propertyPath: ['division'],

495

type: 'hintedText',

496

label: 'Подразделение'

},

{

key: 'post',

propertyPath: ['post'],

type: 'hintedText',

label: 'Должность',

default: ''

},

{

key: 'clock_number',

propertyPath: ['clock_number'],

508

type: 'text',

509

label: 'Табельный номер'

},

{

key: 'extra',

propertyPath: ['properties', 'extra'],

514

type: 'textarea',

515

label: 'Дополнительные сведения'

},

{

key: 'docs',

propertyPath: ['properties', 'documents'],

type: 'docControl',

host: null,

port: null

},

];

},

}

};

window.exportDataMapping = safeClosure().exportDataMapping;

529

window.templateReady = safeClosure().execute;

</script>

</body>

</html>

== {{id name="Редакторшаблонаформы-Возвраткпредыдущейверсии"/}}Возврат к предыдущей версии ==

537

538

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

539

540

* откройте редактор повторно и верните прежний код, если он сохранён у вас в файле;

541

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

542

* либо включите наследование от родительской группы.

543

544

Порядок возврата к стандартному или наследуемому шаблону приведён в разделе ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome||anchor="Настройкаформвводаданных-Удалениешаблона"]]].

Исходный код вики Редактор шаблона формы