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

С версии 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

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="Настройкаформвводаданных-Удалениешаблона"]]].

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