Оформление экранов

Используйте следующий код в тексте:

<a href="Ссылка" target="_blank">Текст</a>

Используйте следующий тег:

<p style='color:#66727F'>Ответьте на несколько вопросов и узнайте, что делать дальше</p>

Данную надпись необходимо добавлять в том случае, если после стартового экрана следуют Квизы. Для случаев, когда после стартового экрана следует Страница решения — данную надпись добавлять не нужно

Основные правила оформления списков в ВКУ:

• перед списком первого уровня не ставится двоеточие
• список первого уровня оформляется с помощью синих буллитов
• перед списком второго уровня ставится двоеточие
• списки второго уровня оформляются в виде синих черточек

Список первого уровня :

<ul>
<li>Список первого уровня:
<ul>
   <li>Список второго уровня</li>
   <li>Список второго уровня</li>
</ul>
</li>
<li>Список первого уровня</li>
</ul>

Список второго уровня:

<ul class="dashed">
   <li>Первый пункт</li>
   <li>Второй пункт</li>
   <li>Третий пункт</li>
</ul>

Реализация для выпадающего списка:

<div class="card-toggle">
  <input type="checkbox" id="card1">
  <label class="card-toggle-header" for="card1">
    <span class="card-toggle-label">
        <b>Название списка</b>
      </span>
  </label>
  <div class="card-toggle-content">
<p>Основной текст списка</p>
    <label class="close" for="card1">Свернуть</label>
  </div>
</div>

Реализация для спойлера:

<div class='html-spoiler'>
  <input class='html-spoiler__input' type='checkbox' id='spoilerId1'>
  <label class='html-spoiler__label' for='spoilerId1'>Заголовок спойлера</label>
  <div class='html-spoiler__content'>
    Контент спойлера
  </div>
</div>

Эти данные определяются автоматически в зависимости от учётной записи пользователя

Как определить тип учётной записи

Чтобы сделать поп-ап необходимо:

1. На выбранном экране в «Тексте подзаголовка» написать следующее:
   <a id='КЛЮЧ'>НАЗВАНИЕ ПОП-АПА</a></p>
2. В пояснительных переходах выбрать «Настройка пояснительных переходов в подзаголовке»
3. В «Ключе» указать наш КЛЮЧ, используя латинские буквы и цифры
4. В «Заголовке модального окна*» написать название нашего поп-апа
5. В «Тексте модального окна*» прописать текст поп-апа

Чтобы добавить поп-ап «Откуда эти данные..» необходимо:

1. В настройках компонента ConfirmLegalData в «Подсказке для поля*» написать следующее:
   <div class='divider mt-8 mb-24'></div><a id='key'>Откуда эти данные и как исправить ошибку</a>
2. В пояснительных переходах выбрать «Настройка пояснительных переходов в компоненте»
3. В «Ключе» указать наш КЛЮЧ, используя латинские буквы и цифры
4. В «Заголовке модального окна*» написать «Откуда эти данные и как исправить ошибку»
5. В «Тексте модального окна*» написать следующий текст:
   <p>Данные указаны вами при регистрации профиля ИП на Госуслугах. Они сверены с реестрами в ФНС</p>
<p>Если в данных ошибка, обратитесь <a href="https://service.nalog.ru/addrno.do" target="_blank">в налоговую инспекцию</a> по месту регистрации и <a href="https://service.nalog.ru/gosreg/intro.html?sfrd=24001" target="_blank">внесите изменения в ЕГРИП</a></p>
<p>Когда убедитесь, что данные в ЕГРИП исправлены, перейдите <a href="https://esia.gosuslugi.ru/login/" target="_blank">в личный кабинет</a> и нажмите «Обновить»</p>

Документы выделять жирным не нужно

Название документа не дублируем, нужно писать краткий и логичный заголовок, поясняющий, что будет в описании

В настройках экрана обязательно используем чек-бокс — «Стиль для первого экрана»

Пример

1. Что из себя представляет услуга 1—2 предложения. Основная идея — указать то, что может ожидать пользователя в ходе прохождения услуги
2. Кто может получить услугу, используя списки первого уровня с перечислением
3. Какие ограничения на получение услуги, используя списки первого уровня с перечислением
4. «Ответьте на несколько вопросов...», если далее следует Квиз

Данный экран должен следовать сразу после стартового экрана. Необходим, чтобы определить, кто проходит услугу и разделить услугу на несколько сценариев. Допустимые ответы — «За себя» и «За другого человека»

Максимальное количество ответов по регламенту — 6, однако, если ответы являются объёмными (от 3 и более строк) и не помещаются полностью на экране, то могут быть предложены различные варианты по решению ситуации

Существует три самых частых пути решения данного вопроса.

1. Сократить или перефразировать ответы (по возможности)
2. Реализовать с помощью компонента DropDown (выпадающий список)
3. Разбить на несколько квизов, связанных по смыслу

Квизы, которые влияют на сценарий услуги и комплект документов на Странице решения

Дефис используется внутри сложных слов, тире — можно заменить словом «это»

Да, для сценария Представителя необходимо указывать в заголовке, что информация на экране предназначена для получателя услуги. Для сценария Получателя услуги экраны названы с обращением к получателю. Пример: «К какой категории вы относитесь?/ К какой категории относится получатель услуги?»

В зависимости от учётной записи документы нужно будет называть «Ваши данные», «Данные организации» и «Данные ИП». На странице решения эти данные указываются первыми в списке

Для сценария представителя указываются «Сведения о получателе услуги» и «Фото или скан документов, подтверждающих полномочия представителя»

Нет, все ответы оформляются в Квизах в виде ответов на вопросы без использования радиокнопок

Нет, данные о гендере определяются автоматически. Это зависит от того, какой гендер указан в учетной записи пользователя. Для реализации зависимости необходимо использовать гендерно-зависимые экраны

Заголовок экрана должен быть «Вы проживаете на территории РФ?» ответы: «Да/Нет»

Корректными ответами являются: «Гражданин РФ/Иностранец/Лицо без гражданства»

«Сведения о...» используется, если нужно внести сведения о документе на формах ввода
«Скан или фото» используется, если нужно загрузить копию документа в загрузчике
Важно! Если нужны и сведения и копия, используем просто «Скан или фото»

Нет, в таких случаях нужно добавить ещё какой-нибудь документ. Например, «Сведения о месте жительства»

Необходимо применять «Стиль для страницы решения»

1. Слово «госпошлина» не пишем
2. Тысячи разделяются пробелом
3. Добавляется символ рубля
4. Указывается только одна стоимость, если она максимальная
5. Остальные данные офомрляются в поп-ап. Если диапазон, то также используется с поп-апом, а также пояснение для каждой стоимости. Для избежания таких сценариев — используйте квизы до страницы решения, чтобы указать максимальную стоимость

Все такие блоки должны быть в теге <h5>Имя блока </h5>

Всегда указываем что «Уведомление о … поступит/придёт в личный кабинет»

Документы такого типа следует называть отталкиваясь от ситуации

1. Скан — если необходим документ в формате pdf
2. Скан или фото — если необходимо просто загрузить какой-то документ в формате pdf, png, jpeg
3. Имя документа — в случае иных форматов

Необходимо их указывать отдельным буллитом в общем списке и применять поп-ап, в котором будет перечень таких документов

Реализация:

1. В настройке компонента InfoScr в расширенном режиме в блоке «Вычисляемые аргументы компонента (linkedValues)» — указать «Название аргумента» (к этому аргументу будет производиться обращение для вывода информации)
2. В поле «Компонент» — указать компонент на основе данных которого будет реализовано условие
3. В блоке «Выражение для вычисление», в поле «Условие when» — "true", в поле «Условие then» — набор документов <li>Документ 1</li> <li>Документ 2</li>
4. Условие для false оставляем пустым, если вариантов больше 2
5. Для отображения получившихся данных в поле «Текст компонента» — подтягиваем данные в формате <ul>${Название аргумента 1}${Название аргумента 2}</ul>

Для этого необходимо использовать блок в расширенной настройке компонента «Объединение полей в группу», в котором поля задаются строго по их очередности и ставится галочка «Отрисовка разделителя»

Для ИП и ФЛ: «Проверьте ваш номер телефона»/«Проверьте вашу электронную почту»
Для ЮЛ: «Проверьте телефон организации»/«Проверьте электронную почту организации»
Для ИП: «Проверьте телефон ИП»/«Проверьте электронную почту ИП»

В компоненте ConfirmPersonalUserPhone или ConfirmPersonalUserEmail задать имя в поле «Заголовок компонента»

Корректными лейблами являются «Номер телефона»/«Электронная почта»

Нет, вопросы допускаются только в заголовках Квизов

ConfirmAddress используется в случаях, когда необходимо проверить или подтвердить адрес из УЗ
Если необходимо ввести адрес вручную, то используется компонент AddressInput

Нет, реализуем с помощью уточняющих квизов

Такой список лучше скрывать от пользователя, но, если он необходим для понимания, нужно его блокировать.

1. Использовать компонент StringInput
2. В настройке компонента внести данные в поле «Значение по умолчанию» и выставить в поле «Только для чтения» — «Да»

Данный экран должен следовать сразу после подтверждения адреса или первым среди загрузчиков

На текущий момент все Input объединены в один для упрощения поддержки. Правила валидации могут не поддерживаться на отдельных, рекомендуется использовать StringInput

У каждой клон-панели должнен быть заголовок с порядковым номером, чтобы это реализовать необходимо в настройках компонента в области «Атрибуты компонента» в поле «Заголовок блока» использовать следующий код: <b class='counter'>*Имя заголовка*</b>

Для того, чтобы добавить крестик на компоненте — необходимо в настройке компонента RepeatableFields выставить галочку у поля «Может ли пользователь удалить первый блок?»

«Добавить ещё *имя элемента*»

Кнопка должна называться «Перейти к подписанию», в случае если квиз, то «Да/Нет, перейти к подписанию»

Нет, нельзя, потому что компоненты, находящиеся внутри повторяшки лежат в массиве

Реализация для россиянина

1. Используется «Сложное условие» с выбором «Значение атрибута из ЕСИА»
2. В поле «Значение атрибута из ЕСИА» указывается "citizenshipCode"
3. В поле «Тип данных» — «Строка»
4. Операция сравнения "equals"
5. В поле аргументы, значение — добавить "RUS"
6. Тип значения — "UserConst"

Для реализации необходимо

1. Использовать «Сложное условие» в условиях перехода
2. Тип справниваемого поля — «Значение атрибута из ЕСИА»
3. Значение атрибута из ЕСИА — "userRole"
4. Поле «Тип данных» — «Строка»
5. Поле «Операция сравнения» — "notEquals"
6. В блоке «Аргументы» в поле «Значение» — "true"
7. В поле «Тип значения» — "UserConst"

Использовать составной экран, добавить текст в поле в настройках компонента, установить галочку «Отобразить надпись под основным экраном» (счётчик будет на белой плашке)

В том случае, когда необходимо личное посещение

Необходимо применять «Стиль для финального экрана»

Основные правила провреки полей на корректность ввода

1. У каждого поля должна выводиться ошибка «Некорректные данные»
2. Для полей ФИО — использовать регулярное выражение ^[А-ЯЁ][а-яё]*$|^[А-ЯЁ][а-яё]*[- ][А-ЯЁixvlcIVXLC][а-яё]*[- ]?[ixvlcIVXLC]*
3. Для количественных полей — только числовая запись
4. Для полей адреса (случай когда нужно указать сперва на русском, а затем на английском) — возможность ввода либо кириллицы, либо латиницы
5. Для регулярных полей — использовать подсказку к полю, либо в подсказке указать формат, в котором ввести значение
6. Для номера телефона — маска ввода
7. Для сайта — валидация
8. Для полей серии и номера паспорта, кадастрового номера — маска ввода
9. Для полей ИНН, если ЮЛ — 10, если ИП — 12 символов
10. Для полей ОГРН/ОГРНИП — ограничение на ввод символов
11. Для полей даты, если есть какая-то зависимость одного значения от другого — необходима проверка. Чтобы реализовать зависимость в компоненте DateInput одной даты от другой (например период обучения) — необходимо в компоненте, в котором указывается дата окончания, добавить ограничение в блоке «Ограничения на вводимую дату (с условием)», указываем в поле «Условие сравнения с заданной датой» >=, в поле «Ссылка/Постоянная величина» ref, а в поле «Значение» имя компонента с дата начала