Исходный код вики Редактор шаблона формы
Редактировал(а) admin 2026/09/03 16:54
Скрыть последних авторов
| author | version | line-number | content |
|---|---|---|---|
 |
6.1 | 1 | С версии 20.54 Платформы НЕЙРОСС добавлен простой редактор шаблона пользовательской формы. |
| |
2.2 | 2 | |
| |
3.2 | 3 | {{info}} |
| |
6.1 | 4 | Общие сведения о настройке шаблонов форм приведены в разделе ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome]]]. Ниже даны сведения об использовании редактора готовых HTML- и JSX-шаблонов форм. |
| |
3.2 | 5 | {{/info}} |
| 6 | |||
| |
2.2 | 7 | == Общие сведения == |
| 8 | |||
| |
6.1 | 9 | Платформа НЕЙРОСС обеспечивает возможность настройки произвольного шаблона ввода данных пропуска и владельца буквально для каждой группы пропусков. При этом, так как пропуск может принадлежать нескольким группам пропусков одновременно, данные одного и того же пропуска и владельца могут отображаться в разных группах по-разному. Путём ограничения доступа операторов к группам пропусков вы можете ограничивать оператору также доступ к персональным данным: для каждой группы настроить отображение только тех данных, доступ к которым необходим конкретному оператору для выполнения его должностных функций, скрыв все остальные. |
| |
3.1 | 10 | |
| |
5.10 | 11 | Редактирование JSON-шаблонов форм осуществляется с помощью встроенного Конструктора форм ~[[[Конструктор форм>>doc:neyross.setup.access-control.input-forms.form-builder.WebHome]]]. |
| |
4.1 | 12 | |
| 13 | Редактирование HTML- и JSX-шаблонов форм ранее осуществлялось только с помощью внешних редакторов. Форму требовалось скачать, отредактировать и загрузить повторно. | ||
| 14 | |||
| |
4.2 | 15 | Теперь достаточно открыть встроенный редактор, внести требуемые изменения и сохранить шаблон. Также с помощью функции предпросмотра вы можете верифицировать изменения сразу в процессе редактирования шаблона. Если редактор кажется достаточно сложным, вы всегда можете обратиться к специалистам компании ИТРИУМ за консультацией и выполнением таких работ под заказ. |
| 16 | |||
| |
6.1 | 17 | (% class="box" %) |
| 18 | ((( | ||
| 19 | Редактор шаблонов HTML и JSX-форм доступен с версии 20.54 Платформы НЕЙРОСС. Поддержка формата JSX доступна с версии 20.53. | ||
| 20 | ))) | ||
| |
4.3 | 21 | |
| |
6.1 | 22 | == {{id name="Редакторшаблонаформы-Окноредактора"/}}Окно редактора == |
| 23 | |||
| |
4.3 | 24 | Чтобы открыть редактор шаблона формы: |
| 25 | |||
| |
6.1 | 26 | 1. Выберите группу пропусков, для которой настроен HTML- или JSX-шаблон формы, требующий редактирования. |
| |
5.2 | 27 | 1. ((( |
| 28 | Перейдите к вкладке **Настройки группы**. Для настройки шаблона формы владельца пропуска перейдите к вкладке **Форма ввода: Владелец пропуска**. Для настройки формы пропуска перейдите к вкладке **Форма ввода: Пропуск**. | ||
| 29 | ))) | ||
| 30 | 1. ((( | ||
| |
6.1 | 31 | Убедитесь, что выбран тип **Пользовательская форма** и загружен HTML- или JSX-шаблон. Нажмите на кнопку **Редактировать шаблон**. |
| |
5.2 | 32 | ))) |
| |
6.1 | 33 | |
| 34 | {{info}} | ||
| 35 | Кнопка **Редактировать шаблон** доступна только для пользовательских HTML- и JSX-шаблонов. Для шаблона, созданного конструктором форм, используйте кнопку **Открыть конструктор** ~[[[Конструктор форм>>doc:neyross.setup.access-control.input-forms.form-builder.WebHome]]]. Если шаблон ещё не загружен, сначала загрузите файл ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]]. | ||
| 36 | {{/info}} | ||
| 37 | |||
| 38 | Откроется окно **Редактирование шаблона** с именем текущего файла шаблона в заголовке. | ||
| 39 | |||
| |
7.2 | 40 | [[image:s_form_redactor_template.png||height="449" width="900"]] |
| |
6.1 | 41 | |
| 42 | 1. **Исходный код шаблона**: текстовый редактор с подсветкой синтаксиса. Здесь отображается HTML-разметка, стили CSS и скрипт сопоставления полей. Изменения вносятся непосредственно в код. | ||
| 43 | 1. **Предварительный просмотр**: живое отображение формы по текущему содержимому редактора. Позволяет сразу оценить внешний вид, состав и порядок полей. | ||
| |
7.2 | 44 | 1. **Кнопки управления шаблоном:** |
| 45 | 11. **Применить**: обновить предварительный просмотр по текущему коду, не закрывая окно и не записывая шаблон в настройки группы. | ||
| 46 | 11. **Отмена**: закрыть окно без сохранения изменений. | ||
| 47 | 11. **Сохранить**: записать шаблон для выбранной группы пропусков и закрыть окно редактора. | ||
| |
6.1 | 48 | |
| 49 | {{info}} | ||
| 50 | **ПОДСКАЗКА** | ||
| 51 | |||
| |
7.3 | 52 | Перед нажатием **Сохранить** всегда проверяйте результат в области предварительного просмотра. Если после правки кода форма отображается некорректно, нажмите **Отмена** и откройте редактор повторно — в настройках группы останется предыдущая версия шаблона. |
| |
6.1 | 53 | {{/info}} |
| 54 | |||
| 55 | == {{id name="Редакторшаблонаформы-Порядокработы"/}}Порядок работы == | ||
| 56 | |||
| 57 | Запустите АРМ НЕЙРОСС Доступ и авторизуйтесь с учётной записью пользователя с правами администрирования раздела **Персонал** ~[[[Управление пользователями>>doc:neyross.setup.users.WebHome]]]. | ||
| 58 | |||
| 59 | В разделе **Персонал** в блоке **Группы** выделите группу пропусков, настройки которой требуется изменить. | ||
| 60 | |||
| 61 | {{info}} | ||
| 62 | Настройки форм ввода наследуются дочерними группами. Чтобы изменить шаблон для всей системы, выделите корневую группу **Все**. | ||
| 63 | {{/info}} | ||
| 64 | |||
| 65 | Перейдите к вкладке **Настройки группы** > **Форма ввода: Владелец пропуска** или **Форма ввода: Пропуск**. | ||
| 66 | |||
| 67 | Откройте редактор по кнопке **Редактировать шаблон**. | ||
| 68 | |||
| 69 | Внесите изменения в исходный код: | ||
| 70 | |||
| 71 | * оформление — в блоке ##<style>## (цвета, отступы, размеры фотографии, ширина подписей); | ||
| |
7.2 | 72 | * состав и порядок полей — в HTML-разметке, конструкциями вида ##~{~{ #DATA.ключ }}##; |
| |
7.4 | 73 | * подписи, обязательность и тип поля — в функции ##exportDataMapping## шаблона. |
| |
6.1 | 74 | |
| 75 | Нажмите **Применить** и проверьте форму справа. | ||
| 76 | |||
| 77 | Если результат верный, нажмите **Сохранить**. Форма отобразится в блоке значений по умолчанию вкладки настройки группы. | ||
| 78 | |||
| 79 | {{info}} | ||
| 80 | Значения, заданные в блоке значений по умолчанию, имеют более высокий приоритет над значениями, заданными в шаблоне ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome||anchor="Настройкаформвводаданных-Настройкашаблонаизначенийпоумолчанию"]]]. | ||
| 81 | {{/info}} | ||
| 82 | |||
| 83 | == {{id name="Редакторшаблонаформы-СоставHTMLшаблона"/}}Состав HTML-шаблона == | ||
| 84 | |||
| 85 | Типовой HTML-шаблон формы состоит из трёх частей. | ||
| 86 | |||
| 87 | === Разметка === | ||
| 88 | |||
| |
7.2 | 89 | В теле документа поля формы задаются плейсхолдерами ##~{~{ #DATA.ключ }}##. Ключ должен совпадать со значением **key** в таблице сопоставления. Порядок плейсхолдеров в разметке определяет порядок полей на форме. |
| |
6.1 | 90 | |
| 91 | Пример фрагмента стандартной формы владельца пропуска: | ||
| 92 | |||
| 93 | {{code language="html"}} | ||
| 94 | <div class="card"> | ||
| 95 | <div class="input-group"> | ||
| 96 | {{ #DATA.surname }} | ||
| 97 | {{ #DATA.name }} | ||
| 98 | {{ #DATA.patronymic }} | ||
| 99 | {{ #DATA.document_number }} | ||
| 100 | {{ #DATA.organization }} | ||
| 101 | {{ #DATA.division }} | ||
| 102 | {{ #DATA.post }} | ||
| 103 | {{ #DATA.clock_number }} | ||
| 104 | <div class="document-control-link"> | ||
| 105 | <label>Документы:</label> | ||
| 106 | {{ #DATA.docs }} | ||
| 107 | </div> | ||
| 108 | </div> | ||
| 109 | <div class="img-control">{{ #DATA.photo }}</div> | ||
| 110 | </div> | ||
| 111 | <div class="extras"> | ||
| 112 | {{ #DATA.extra }} | ||
| 113 | </div> | ||
| 114 | {{/code}} | ||
| 115 | |||
| 116 | Вокруг плейсхолдеров допускается произвольная HTML-разметка: заголовки, подсказки оператору, группировка полей, логотип организации. | ||
| 117 | |||
| 118 | === Оформление === | ||
| 119 | |||
| 120 | Стили задаются в теге ##<style>##. Через CSS можно изменить фон формы, цвет и размер подписей, ширину колонки меток, размеры области фотографии, отступы. | ||
| 121 | |||
| 122 | Пример: цвет фона формы и акцентный цвет подписей. | ||
| 123 | |||
| 124 | {{code language="css"}} | ||
| 125 | body { | ||
| 126 | background: #f4f7fa; | ||
| 127 | color: #333333; | ||
| 128 | font-family: Roboto, Arial, sans-serif; | ||
| 129 | } | ||
| 130 | .input-group label { | ||
| 131 | color: #100943; | ||
| 132 | } | ||
| 133 | {{/code}} | ||
| 134 | |||
| 135 | === Сопоставление полей === | ||
| 136 | |||
| 137 | Скрипт шаблона сообщает Платформе НЕЙРОСС, какие поля выводить и куда записывать введённые данные. Используется функция ##exportDataMapping##. | ||
| 138 | |||
| 139 | |=Свойство|=Назначение | ||
| |
7.2 | 140 | |**key**|Имя плейсхолдера в разметке (##~{~{ #DATA.key }}##) |
| |
6.1 | 141 | |**propertyPath**|Путь к свойству владельца или пропуска в данных Платформы НЕЙРОСС |
| 142 | |**type**|Тип элемента ввода: ##text##, ##hintedText##, ##textarea##, ##uploadImg##, ##docControl## и др. | ||
| 143 | |**label**|Подпись поля, которую видит оператор | ||
| 144 | |**required**|Признак обязательности заполнения | ||
| 145 | |**default**|Значение по умолчанию в шаблоне | ||
| 146 | |||
| 147 | {{error}} | ||
| 148 | **ВАЖНО** | ||
| 149 | |||
| 150 | Не изменяйте **key** и **propertyPath** без необходимости: от них зависит, в какое свойство владельца или пропуска будут записаны данные. Ошибочный путь приведёт к тому, что поле перестанет сохраняться или начнёт записывать значение «не туда». | ||
| 151 | |||
| 152 | Список стандартных свойств приведён в разделе ~[[[Свойства владельца и пропуска>>doc:neyross.arm-access.passes.pass-holder-props.WebHome]]]. Пользовательские свойства добавляются отдельно ~[[[Добавление пользовательских свойств>>doc:neyross.setup.access-control.custom-props.WebHome]]]. | ||
| 153 | {{/error}} | ||
| 154 | |||
| 155 | == {{id name="Редакторшаблонаформы-Типовыеизменения"/}}Типовые изменения == | ||
| 156 | |||
| 157 | === Изменить подпись поля === | ||
| 158 | |||
| 159 | Найдите объект поля в ##exportDataMapping## и измените значение **label**. Например, вместо «Доп. информация» можно указать «Дополнительные сведения»: | ||
| 160 | |||
| 161 | {{code language="js"}} | ||
| 162 | { | ||
| 163 | key: 'extra', | ||
| 164 | propertyPath: ['properties', 'extra'], | ||
| 165 | type: 'textarea', | ||
| 166 | label: 'Дополнительные сведения' | ||
| 167 | } | ||
| 168 | {{/code}} | ||
| 169 | |||
| 170 | Нажмите **Применить** — новая подпись отобразится в предварительном просмотре. | ||
| 171 | |||
| 172 | === Изменить порядок полей === | ||
| 173 | |||
| |
7.2 | 174 | Переставьте строки плейсхолдеров ##~{~{ #DATA.ключ }}## в HTML-разметке. Порядок объектов в ##exportDataMapping## на внешний вид формы не влияет. |
| |
6.1 | 175 | |
| 176 | === Скрыть поле === | ||
| 177 | |||
| 178 | Удалите соответствующий плейсхолдер из разметки. Объект в ##exportDataMapping## можно оставить: поле перестанет отображаться в форме, данные в базе при этом не удаляются. При необходимости поле можно снова вывести в форме или в таблице пропусков ~[[[Настройка таблицы пропусков>>doc:neyross.setup.access-control.pass-table.WebHome]]]. | ||
| 179 | |||
| 180 | {{info}} | ||
| 181 | Не удаляйте обязательные для оформления пропуска поля (как правило, **Фамилия** и **Имя**), если оператор должен создавать владельца в этой группе. | ||
| 182 | {{/info}} | ||
| 183 | |||
| 184 | === Сделать поле обязательным === | ||
| 185 | |||
| 186 | В объекте поля укажите ##required: true##. На форме у подписи появится признак обязательности. | ||
| 187 | |||
| 188 | === Добавить изображение или логотип === | ||
| 189 | |||
| |
7.5 | 190 | Для оформления формы в корпоративном стиле загрузите изображение в файловое хранилище и укажите ссылку в CSS или в разметке. Подробности и пример ссылки приведены в разделе ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]]. При использовании CSV-файла изображения достаточно вставить код csv прямо в код шаблона. |
| |
6.1 | 191 | |
| 192 | {{info}} | ||
| 193 | **ПОДСКАЗКА** | ||
| 194 | |||
| 195 | Файловое хранилище позволяет заменить файл изображения без изменения ссылки в шаблоне. Достаточно загрузить новую версию поверх прежней. | ||
| 196 | {{/info}} | ||
| 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 | * задают рамку области фотографии тем же акцентным цветом; | ||
| |
7.6 | 216 | * меняют стандартные имена полей, например: «Доп. информация» в «Дополнительные сведения». |
| |
6.1 | 217 | |
| 218 | Набор полей и ##exportDataMapping## при этом остаются прежними: меняется только оформление. | ||
| 219 | |||
| |
8.2 | 220 | [[image:template_editor_itrium_preview.png]] |
| |
6.1 | 221 | |
| 222 | //Пример формы владельца пропуска, оформленной в корпоративном стиле ИТРИУМ// | ||
| 223 | |||
| 224 | {{info}} | ||
| 225 | Готовый HTML-файл такого шаблона можно вставить в редактор целиком (заменить содержимое) и нажать **Применить**. Если форма отображается корректно, нажмите **Сохранить**. При необходимости разработки более сложного JSX-шаблона (валидация, расчёт срока действия, несколько идентификаторов) обратитесь к специалистам компании ИТРИУМ. | ||
| 226 | {{/info}} | ||
| 227 | |||
| |
8.3 | 228 | (% class="wikigeneratedid" %) |
| |
9.1 | 229 | Код шаблона из примера приведен ниже. Вы можете сохранить код в файле формата HTML и загрузить его ~[[[Готовый шаблон формы>>doc:neyross.setup.access-control.input-forms.form-template.WebHome]]] или вставить напрямую в редакторе. |
| |
8.2 | 230 | |
| |
8.5 | 231 | {{code}} |
| 232 | <!DOCTYPE html> | ||
| 233 | <html> | ||
| 234 | <head> | ||
| 235 | <title>Форма редактирования владельца пропуска</title> | ||
| 236 | </head> | ||
| 237 | <body> | ||
| 238 | <header class="form-header"> | ||
| 239 | <div class="form-header__brand"> | ||
| 240 | <svg class="form-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 50" aria-hidden="true"> | ||
| 241 | <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"/> | ||
| 242 | <polygon fill="#0098d4" points="23.01 23.05 34.5 29.71 46 23.05 28.45 12.95 28.45 19.93"/> | ||
| 243 | <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"/> | ||
| 244 | <polygon fill="#0098d4" points="16.96 26.54 16.96 13.27 5.44 6.66 5.44 26.91 11.53 23.42"/> | ||
| 245 | <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"/> | ||
| 246 | <polygon fill="#0098d4" points="23.01 30.07 11.53 36.69 11.53 50 29.06 39.85 23.01 36.36"/> | ||
| 247 | <polygon fill="#09c" points="16.96 26.54 23.01 23.05 23.01 30.07"/> | ||
| 248 | </svg> | ||
| 249 | <div class="form-header__text"> | ||
| 250 | <div class="form-header__product">НЕЙРОСС</div> | ||
| 251 | <div class="form-header__title">Владелец пропуска</div> | ||
| 252 | </div> | ||
| 253 | </div> | ||
| 254 | <div class="form-header__hint">Поля со звёздочкой обязательны для заполнения</div> | ||
| 255 | </header> | ||
| |
8.4 | 256 | |
| |
8.5 | 257 | <div class="card"> |
| 258 | <div class="input-group"> | ||
| 259 | <div class="section-title">Личные данные</div> | ||
| 260 | {{ #DATA.surname }} | ||
| 261 | {{ #DATA.name }} | ||
| 262 | {{ #DATA.patronymic }} | ||
| 263 | {{ #DATA.document_number }} | ||
| 264 | <div class="section-title">Место работы</div> | ||
| 265 | {{ #DATA.organization }} | ||
| 266 | {{ #DATA.division }} | ||
| 267 | {{ #DATA.post }} | ||
| 268 | {{ #DATA.clock_number }} | ||
| 269 | <div class="document-control-link"> | ||
| 270 | <label> | ||
| 271 | Документы: | ||
| 272 | </label> | ||
| 273 | {{ #DATA.docs }} | ||
| 274 | </div> | ||
| 275 | </div> | ||
| 276 | <div class="img-control">{{ #DATA.photo }}</div> | ||
| 277 | </div> | ||
| 278 | <div class="extras"> | ||
| 279 | {{ #DATA.extra }} | ||
| 280 | </div> | ||
| 281 | <style> | ||
| 282 | * { | ||
| 283 | box-sizing: border-box; | ||
| 284 | } | ||
| 285 | body { | ||
| 286 | display: flex; | ||
| 287 | flex-direction: column; | ||
| 288 | margin: 0; | ||
| 289 | background: #f4f7fa; | ||
| 290 | color: #333333; | ||
| 291 | font-family: Roboto, Arial, Helvetica, sans-serif; | ||
| 292 | } | ||
| 293 | .form-header { | ||
| 294 | display: flex; | ||
| 295 | align-items: center; | ||
| 296 | justify-content: space-between; | ||
| 297 | background: #100943; | ||
| 298 | color: #ffffff; | ||
| 299 | padding: 10px 14px; | ||
| 300 | border-bottom: 3px solid #00B4F0; | ||
| 301 | flex-shrink: 0; | ||
| 302 | } | ||
| 303 | .form-header__brand { | ||
| 304 | display: flex; | ||
| 305 | align-items: center; | ||
| 306 | gap: 10px; | ||
| 307 | } | ||
| 308 | .form-header__logo { | ||
| 309 | width: 28px; | ||
| 310 | height: 30px; | ||
| 311 | flex-shrink: 0; | ||
| 312 | } | ||
| 313 | .form-header__product { | ||
| 314 | font-size: 10px; | ||
| 315 | letter-spacing: 0.18em; | ||
| 316 | text-transform: uppercase; | ||
| 317 | color: #00B4F0; | ||
| 318 | line-height: 1.2; | ||
| 319 | } | ||
| 320 | .form-header__title { | ||
| 321 | font-size: 15px; | ||
| 322 | font-weight: 500; | ||
| 323 | line-height: 1.2; | ||
| 324 | } | ||
| 325 | .form-header__hint { | ||
| 326 | font-size: 11px; | ||
| 327 | color: #b9c4d6; | ||
| 328 | } | ||
| 329 | .section-title { | ||
| 330 | font-size: 11px; | ||
| 331 | font-weight: 500; | ||
| 332 | letter-spacing: 0.08em; | ||
| 333 | text-transform: uppercase; | ||
| 334 | color: #00B4F0; | ||
| 335 | padding: 8px 0 4px !important; | ||
| 336 | border-bottom: 1px solid #e4eaf0; | ||
| 337 | margin-bottom: 4px; | ||
| 338 | } | ||
| 339 | .img-control { | ||
| 340 | margin-left: auto; | ||
| 341 | } | ||
| 342 | div[data-input-key="photo"] { | ||
| 343 | padding-top: 1px; | ||
| 344 | height: 100%; | ||
| 345 | } | ||
| 346 | .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 { | ||
| 351 | max-width: 159px; | ||
| 352 | min-width: 159px; | ||
| 353 | height: 212px; | ||
| 354 | object-fit: contain; | ||
| 355 | outline: 1px dashed #00B4F0; | ||
| 356 | background: #ffffff; | ||
| 357 | } | ||
| 358 | .card { | ||
| 359 | display: flex; | ||
| 360 | padding: 14px 14px 8px; | ||
| 361 | padding-bottom: 0; | ||
| 362 | flex-shrink: 0; | ||
| 363 | background: #ffffff; | ||
| 364 | border: 1px solid #e4eaf0; | ||
| 365 | margin: 10px 10px 0; | ||
| 366 | } | ||
| 367 | .input-group { | ||
| 368 | display: flex; | ||
| 369 | flex-direction: column; | ||
| 370 | justify-content: space-between; | ||
| 371 | flex-grow: 1; | ||
| 372 | padding-right: 10px; | ||
| 373 | } | ||
| 374 | .input-group > div { | ||
| 375 | display: flex; | ||
| 376 | 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 { | ||
| 383 | min-width: 135px; | ||
| 384 | max-width: 135px; | ||
| 385 | color: #100943; | ||
| 386 | } | ||
| 387 | .input-group > div > * { | ||
| 388 | flex-grow: 1; | ||
| 389 | } | ||
| 390 | .input-group .card-reader { | ||
| 391 | width: 100%; | ||
| 392 | } | ||
| 393 | .input-group label { | ||
| 394 | display: block; | ||
| 395 | line-height: 25px; | ||
| 396 | } | ||
| 397 | .input-group input, | ||
| 398 | .input-group select, | ||
| 399 | .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 { | ||
| 410 | line-height: 25px; | ||
| 411 | padding-left: 5px; | ||
| 412 | color: #00B4F0; | ||
| 413 | } | ||
| 414 | .extras { | ||
| 415 | padding: 8px 14px 12px; | ||
| 416 | display: flex; | ||
| 417 | flex-grow: 1; | ||
| 418 | background: #ffffff; | ||
| 419 | border: 1px solid #e4eaf0; | ||
| 420 | border-top: none; | ||
| 421 | margin: 0 10px 10px; | ||
| 422 | border-left: 3px solid #00B4F0; | ||
| 423 | } | ||
| 424 | .extras label { | ||
| 425 | display: block; | ||
| 426 | height: 30px; | ||
| 427 | line-height: 30px; | ||
| 428 | color: #100943; | ||
| 429 | } | ||
| 430 | .extras > div { | ||
| 431 | width: 100%; | ||
| 432 | } | ||
| 433 | .extras textarea { | ||
| 434 | width: 100%; | ||
| 435 | min-height: 70px; | ||
| 436 | height: calc(100% - 40px); | ||
| 437 | border: 1px solid #d6dce3; | ||
| 438 | color: #333333; | ||
| 439 | } | ||
| 440 | .extras textarea:focus { | ||
| 441 | outline: none; | ||
| 442 | border-color: #00B4F0; | ||
| 443 | } | ||
| 444 | </style> | ||
| 445 | <script> | ||
| 446 | function safeClosure() { | ||
| 447 | return { | ||
| 448 | execute: function () { | ||
| 449 | console.log('executed, when template is ready'); | ||
| 450 | }, | ||
| 451 | exportDataMapping: function() { | ||
| 452 | return [ | ||
| 453 | { | ||
| 454 | key: 'photo', | ||
| 455 | propertyPath: ['photo'], | ||
| 456 | type: 'uploadImg', | ||
| 457 | default: null | ||
| 458 | }, | ||
| 459 | { | ||
| 460 | key: 'surname', | ||
| 461 | propertyPath: ['surname'], | ||
| 462 | type: 'text', | ||
| 463 | label: 'Фамилия', | ||
| 464 | required: true | ||
| 465 | }, | ||
| 466 | { | ||
| 467 | key: 'name', | ||
| 468 | propertyPath: ['name'], | ||
| 469 | type: 'text', | ||
| 470 | label: 'Имя', | ||
| 471 | required: true | ||
| 472 | }, | ||
| 473 | { | ||
| 474 | key: 'patronymic', | ||
| 475 | propertyPath: ['patronymic'], | ||
| 476 | type: 'text', | ||
| 477 | label: 'Отчество' | ||
| 478 | }, | ||
| 479 | { | ||
| 480 | key: 'organization', | ||
| 481 | propertyPath: ['organization'], | ||
| 482 | type: 'hintedText', | ||
| 483 | label: 'Организация' | ||
| 484 | }, | ||
| 485 | { | ||
| 486 | key: 'document_number', | ||
| 487 | propertyPath: ['document_number'], | ||
| 488 | type: 'text', | ||
| 489 | label: '№ документа', | ||
| 490 | required: true | ||
| 491 | }, | ||
| 492 | { | ||
| 493 | key: 'division', | ||
| 494 | propertyPath: ['division'], | ||
| 495 | type: 'hintedText', | ||
| 496 | label: 'Подразделение' | ||
| 497 | }, | ||
| 498 | { | ||
| 499 | key: 'post', | ||
| 500 | propertyPath: ['post'], | ||
| 501 | type: 'hintedText', | ||
| 502 | label: 'Должность', | ||
| 503 | default: '' | ||
| 504 | }, | ||
| 505 | { | ||
| 506 | key: 'clock_number', | ||
| 507 | propertyPath: ['clock_number'], | ||
| 508 | type: 'text', | ||
| 509 | label: 'Табельный номер' | ||
| 510 | }, | ||
| 511 | { | ||
| 512 | key: 'extra', | ||
| 513 | propertyPath: ['properties', 'extra'], | ||
| 514 | type: 'textarea', | ||
| 515 | label: 'Дополнительные сведения' | ||
| 516 | }, | ||
| 517 | { | ||
| 518 | key: 'docs', | ||
| 519 | propertyPath: ['properties', 'documents'], | ||
| 520 | type: 'docControl', | ||
| 521 | host: null, | ||
| 522 | port: null | ||
| 523 | }, | ||
| 524 | ]; | ||
| 525 | }, | ||
| 526 | } | ||
| 527 | }; | ||
| 528 | window.exportDataMapping = safeClosure().exportDataMapping; | ||
| 529 | window.templateReady = safeClosure().execute; | ||
| 530 | </script> | ||
| 531 | </body> | ||
| 532 | </html> | ||
| 533 | |||
| 534 | {{/code}} | ||
| 535 | |||
| |
6.1 | 536 | == {{id name="Редакторшаблонаформы-Возвраткпредыдущейверсии"/}}Возврат к предыдущей версии == |
| 537 | |||
| 538 | Если сохранённый шаблон вас не устраивает: | ||
| 539 | |||
| 540 | * откройте редактор повторно и верните прежний код, если он сохранён у вас в файле; | ||
| 541 | * либо в блоке типа формы переключитесь к значению **Стандартная форма** — будет восстановлен предустановленный шаблон; | ||
| 542 | * либо включите наследование от родительской группы. | ||
| 543 | |||
| 544 | Порядок возврата к стандартному или наследуемому шаблону приведён в разделе ~[[[Настройка форм ввода данных>>doc:neyross.setup.access-control.input-forms.WebHome||anchor="Настройкаформвводаданных-Удалениешаблона"]]]. |