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

Используйте следующий код в тексте:
<a href="Ссылка" target="_blank">Текст</a>

Реализация:
<li>Сведения о вашей деятельности <a id='docofright'>за последние 10 лет</a> <div class='block--description' data-hidden-id='docofright' hidden> Для этого вам могут понадобиться: аттестат о среднем образовании, диплом об окончании учебного заведения, копия трудовой книжки, военный билет, свидетельство о государственной регистрации ИП, адрес места проживания в те периоды, когда вы не работали и не учились <a id='docofright' class='block--description__link-close'> Свернуть</a> </div> </li>

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

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

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

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

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

Нет, гендер определяется с помощью глобальной переменной gender и текст формируется с помощью linkedValues

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

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

Подробнее с реализацией переходов для разных учётных записей можете ознакомиться в статье «Как определить тип Учетной Записи»

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

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

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

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

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

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

Актуальные экраны проверки данных с формулировками для модальных окон представлены в шаблонах:

• для организаций используйте шаблоны «Подтверждение персональных данных ЮЛ» и «Подтверждение юридического адреса»»
• для индивидуальных предпринимателей используйте шаблон «Подтверждение персональных данных ИП»

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

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

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

Пример:

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

Синяя кнопка внизу страницы — «Начать»

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

• для ФЛ: «За себя», «За другого человека», «За ИП», «За организацию»
• для ИП: «За себя как ИП», «За другого человека», «За другое ИП», «За организацию»
• для сотрудника ИП: «За ИП, у которого работаю», «За другого человека», «За другое ИП», «За организацию»
• для ЮЛ: «За свою организацию», «За другого человека», «За ИП», «За другую организацию»
• для сотрудника ЮЛ: «За организацию, в которой работаю», «За другого человека», «За ИП», «За другую организацию»

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

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

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

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

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

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

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

Блок «Что нужно для подачи заявления» оформляется в виде списка документов через буллиты в именительном падеже
Когда пишем «данные», а когда — «сведения о»:

• данные какого-то документа, персональные данные
• сведения о каком-то человеке, объекте

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

Да, в таком случае пункт прописывается без буллита, например:
<p>Ваши данные</p>

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

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

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

Блок используется, если заявление нужно подписать электронной подписью
Используется формулировка «Перед отправкой заявление нужно будет подписать…» и далее указывается допустимые типы подписей. Ознакомиться с шаблоном и статьёй про настройку блока

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

Синяя кнопка внизу страницы  —  «Перейти к заявлению»

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

В зависимости от учётной записи документы нужно будет называть:

• для ФЛ: «Ваши данные»
• для ЮЛ: «Данные вашей организации»
• для сотрудника ЮЛ: «Данные организации, в которой работаете»
• для ИП: «Данные ИП»
• для сотрудника ИП: «Данные ИП, у которого работаете»

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

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

В зависимости от вида документов, допустимых к загрузке, используется один из шаблонных экранов файлозагрузчика:

• для документов разных форматов используется шаблон «Загрузчик документа»
• для фото используется шаблон «Загрузчик фото»
• для доверенности используется шаблон «Загрузчик доверенности»
• для определённых страниц документа используется шаблон «Загрузчик документа с попапом Требования к снимкам»

Дополнительно реализацию загрузчиков можно посмотреть в шаблоне «Эталонная услуга»

До страницы решения необходимо сделать уточняющий квиз «Хотите загрузить …» с вариантами
ответа «Да/Нет». В подзаголовок добавить «Загрузка документа позволит ускорить рассмотрение заявления». При ответе «Да» отображать пункт на странице решения и делать загрузчик данного документа

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

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

Ограничения нет, при этом указанное в настройках число должны быть адекватным и реальным. При этом отметим, что сессия ЕСИА продлевается, когда пользователь нажимает кнопку «Продолжить». В случае, если пользователь будет добавлять много повторяющихся элементов на одном экране, авторизация закончится и все ввёденные данные не сохранятся

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

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

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

В зависимости от типа подписей, которые доступны в услуге, необходимо сформировать попап
Ознакомьтесь с актуальными формулировками всех типов подписаний в шаблоне «Эталонная услуга»
Обратите внимание, что подписи, которые описаны на странице решения, и подписи, которые по факту доступны при подписании, должны совпадать

На последнем экране перед финальным кнопка должна называться «Отправить заявление». Если в зависимости от сценария последний экран перед финальным меняется, то настроить нужно с помощью динамического отображения кнопок
Ознакомьтесь с шаблоном «Динамическое отображение кнопок» и шаблоном «Динамическое формирование кнопок с использованием ValueCalculator»

Адрес указывается всегда. В случае, если необходимо личное посещение ведомства, также добавляется ссылка на адрес (ссылка на нужную точку в Яндекс.Картах)

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

Блок «Что дальше» на финальном экране должен дублировать информацию из блока «Результат» на странице решения

Данный блок используется только если предусмотрено личное посещение ведомства. Документы, которые необходимо взять, оформляются в виде списка через буллиты. Если документ один – буллит не ставится

Синяя кнопка внизу страницы — «В личный кабинет»

Реализация:

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

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

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

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

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

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

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

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

Алгоритм проверки контрольного числа:

1. Для проверки контрольного числа требуется БИК
2. Составить 23-значное число из 3-х последних цифр БИК и расчетного счета
3. Вычислить сумму младших разрядов произведений цифр 23-значного числа на следующие коэффициенты — 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1, 3, 7, 1
4. Если младший разряд полученной суммы равен 0, то расчётный счет считается верным

1. Для обозначения важной информации используется синий дисклеймер (пояснение). Чаще всего используется в загрузчиках для проверки качества загружаемых документов
   Реализация:
   <h6 class='explanation-blue'>Название дисклеймера<span>Описание дисклеймера</span></h6>
   Актуальный дисклеймер можно найти в шаблоне «Загрузчик документа с попапом Требования к снимкам»
2. Для обозначения важной информации, которая может препятствовать получению услуги, используется жёлтый дисклеймер
   Реализация:
   <h6 class='disclaimer-elk-yellow'>Название дисклеймера<span>Описание дисклеймера</span></h6>
   

 В статье описано, как работать с простыми и сложными условиями для правил перехода 

При реализации услуг иногда возникает необходимость в обработке однообразного набора полей в виде повторяющейся последовательности экранов для каждого элемента массива. Реализовать такую обработку в рамках ВКУ позволяет механизм циклических экранов, то есть описанный определённым образом набор экранов. 

Примером применения циклического экрана является сбор данных, где в начале вводится список сотрудников (например, ФИО), а далее для каждого сотрудника необходимо внести одни и те же сведения (например, паспортные данные с прикреплением фотографии)
С реализацией циклических экранов можно ознакомиться в шаблоне «Цикл с клон-панелью»

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

Чтобы использовать справочник в ВКУ, он должен соответствовать определённым требованиям. Для загрузки и работы со справочниками используйте раздел «Справочники» в меню действий версии услуги 

Команда ВКУ не изменяет структуру справочника в продуктивной среде ЕПГУ после вывода услуги. Для обновления структуры справочника необходимо использовать новый справочник

Все актуальные шаблоны опубликованы в ВКУ в разделе «Шаблоны» → Вид Шаблона  —  «Шаблоны типовые». Воспользуйтесь поиском или с помощью «Метки шаблона» отсортируйте по теме