Циклические экраны в ВКУ

Общая информация

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

Классическим примером применения циклического экрана является сбор данных, где в начале вводится список сотрудников (например, ФИО), а далее для каждого сотрудника необходимо внести одни и те же сведения (например, паспортные данные с прикреплением фотографии или ввод данных о компаниях и их учредителях)

В рамках ВКУ элементом, инициализирующим цикл, может являться один из двух компонентов:

• RepeatableFields — компонент предназначен для ввода набора повторяющихся атрибутов
• ChildrenList — компонент, предназначенный для выбора одного или нескольких детей, указанных в ЛК пользователя или вручную

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

Так выглядит пример цикла в ВКУ. Экраны:

• s2 – инициализирующий цикл экран
• s4 – первый экран цикла
• s7 – последний экран цикла

Как подключить циклические экраны

Для подключения циклических экранов к услуге необходимо выполнить следующие действия:

1. Создать инициализирующий экран (Экран для повторяющегося набора компонентов с компонентом RepeatableFields или Экран со сложным компонентом с компонентом ChildrenList)
2. Выставить в созданном компоненте чекбокс «Элементы списка будут обрабатываться в цикле?»
3. Добавить вложенный компонент StringInput внутри инициирующего компонента, который необходимо скрыть. Данное поле будет использоваться для хранения индекса итерации
4. Создать отдельные экраны с необходимыми компонентами, которые будут находиться в цикле
5. Настроить правила перехода для созданных циклических экранов (cycledScreenRules)

Шаблон цикла с использованием RepeatableFields

Шаблон цикла с использованием ChildrenList

Реализация цикла с помощью компонента RepeatableFields

1. Создать экран для повторяющегося набора компонентов с компонентом RepeatableFields и вложенным StringInput, который будет использоваться для хранения данных. Добавить ещё какой-нибудь компонент, который будет использован на клон-панели. От количества клонированных блоков будет зависеть число итераций внутри цикла
   
2. Для компонента RepeatableFields выставить галочку в чекбоксе «Элементы списка будут обрабатываться в цикле?»
   
3. Зайти в расширенную настройку компонента StringInput на экране для повторяющегося набора компонентов. Выставить галочку в поле «Скрывать поле?» и в блоке «Название поля, в которое записать ответ пользователя» добавить новое поле с именем «id»
   
4. Создать экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
   • cоставной экран (CUSTOM)
   • экран со сложным компонентом (UNIQUE)
   • экран отображения информации (INFO)
5. После того, как необходимые экраны для цикла созданы — нужно настроить правила перехода для циклических экранов. Соответствующая настройка производится в «Блоки JSON» → «cycledScreenRules»
   
   

Содержимое блока cycledScreenRules

Важно! Для того, чтобы закончить цикл и инициализировать выход из него, у последнего экрана цикла следующий экран должен быть указан как «null», то есть «nextDisplay»: null. Экран, который должен следовать после цикла, не может быть финальным

Шаблон цикла с использованием RepeatableFields

Реализация цикла с помощью компонента ChildrenList

1. Создать экран со сложным компонентом и добавить компонент ChildrenList
2. В настройке компонента добавить галочку в чекбоксе «Включить цикличность компонента?»
   
3. Добавить следующие вложенные компоненты:
   
4. В расширенной настройке всех компонентов в блоке «Название поля, в которое записать ответ пользователя», обязательно должно быть указано следующее имя:
   • для компонента Id — StringInput(hidden): «id»
   • для компонента FirstName — StringInput: «firstName»
   • для компонента LastName — StringInput = «lastName»
   • для компонента SecondName — StringInput: «secondName»
   • для компонента BirthDate — DateInpu: «birthDate»
   • для компонента Gender — RadioInput: «gender»
   • для компонента NewChild — RadioInput(hidden): «isNew»
5. Компонент Gender (RadioInput) должен содержать в себе следующий массив с элементами:
   
6. Компонент NewChild (RadioInput) должен содержать следующий массив с элементами:
   
7. Создаём экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
   • cоставной экран (CUSTOM)
   • экран со сложным компонентом (UNIQUE)
   • экран отображения информации (INFO)
8. После того, как необходимые экраны для цикла созданы, нужно настроить правила перехода для циклических экранов. Соответствующая настройка производится в «Блоки JSON» → «cycledScreenRules»
   
   
   

Содержимое блока cycledScreenRules

Экран s1 — инициирующий цикл экран с ChildrenList;

Экран s3 – последний экран цикла

Важно! Для того, чтобы закончить цикл и инициализировать выход из него, у последнего экрана цикла следующий экран должен быть указан как «null», то есть «nextDisplay»: null. Экран, который должен следовать после цикла, не может быть финальным

Шаблон цикла с использованием ChildrenList

Использование компонентов загрузки в цикле

При использовании компонентов загрузки фото или файлозагрузчиков (PhotoUploadComponent или FileUploadComponent) требуется уникальная загрузка фото или файлов на каждой итерации. В расширенных настройках компонента необходимо выставить галочку в чекбоксе «Компонент используется на циклических экранах?»

В случае если галочка не выставлена, то на второй итерации цикла пользователь обнаружит, что фото уже загружено. Это будет фото с предыдущей итерации