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

С версии 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:attach:template_editor_wnd.png||width="900"]]

41

42

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

43

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

44

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

45

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

46

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

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

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

52

53

54

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

55

56

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

57

58

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

59

60

61

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

62

63

64

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

65

66

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

67

68

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

69

70

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

71

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

72

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

73

74

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

75

76

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

77

78

79

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

80

81

82

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

83

84

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

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

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

89

90

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

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

</div>

</div>

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

</div>

</div>

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

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

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

120

121

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

body {

background: #f4f7fa;

color: #333333;

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

}

.input-group label {

color: #100943;

}

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

135

136

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

137

138

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

139

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

140

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

141

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

142

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

143

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

144

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

**ВАЖНО**

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

150

151

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

152

153

154

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

155

156

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

157

158

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

{

key: 'extra',

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

164

type: 'textarea',

165

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

}

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

170

171

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

172

173

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

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

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

178

179

180

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

181

182

183

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

184

185

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

186

187

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

188

189

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

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

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

195

196

197

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

198

199

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

200

201

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

202

203

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

204

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

205

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

206

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

207

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

208

209

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

210

211

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

212

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

213

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

214

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

215

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

216

217

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

218

219

[[image:attach:template_editor_itrium_preview.png||width="700"]]

220

221

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

222

223

224

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

225

226

227

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

228

229

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

230

231

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

232

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

233

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

234

235

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

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