Общая информация
При реализации услуг в ВКУ иногда возникает необходимость в обработке однообразного набора полей в виде повторяющейся последовательности экранов для каждого элемента массива. Реализовать такую обработку в рамках ВКУ позволяет механизм циклических экранов, то есть описанный определенным образом набор экранов
Классическим примером применения циклического экрана является сбор данных, где в начале вводится список сотрудников (например, ФИО), а далее для каждого сотрудника необходимо внести одни и те же сведения (например, паспортные данные с прикреплением фотографии или ввод данных о компаниях и их учредителях)
В рамках ВКУ элементом, инициализирующим цикл, может являться один из двух компонентов:
- RepeatableFields — компонент предназначен для ввода набора повторяющихся атрибутов
- ChildrenList — компонент, предназначенный для выбора одного или нескольких детей, указанных в ЛК пользователя или вручную
Данные компоненты обеспечивают создание единообразного массива данных, для каждого элемента, которого впоследствии может быть организован цикл из повторяющегося набора экранов
Так выглядит пример цикла в ВКУ. Экраны:
- s2 – инициализирующий цикл экран
- s4 – первый экран цикла
- s7 – последний экран цикла
Как подключить циклические экраны
Для подключения циклических экранов к услуге необходимо выполнить следующие действия:
- Создать инициализирующий экран (Экран для повторяющегося набора компонентов с компонентом RepeatableFields или Экран со сложным компонентом с компонентом ChildrenList)
- Выставить в созданном компоненте чекбокс «Элементы списка будут обрабатываться в цикле?»
- Добавить вложенный компонент StringInput внутри инициирующего компонента, который необходимо скрыть. Данное поле будет использоваться для хранения индекса итерации
- Создать отдельные экраны с необходимыми компонентами, которые будут находиться в цикле
- Настроить правила перехода для созданных циклических экранов (cycledScreenRules)
Шаблон цикла с использованием RepeatableFields
Шаблон цикла с использованием ChildrenList
Реализация цикла с помощью компонента RepeatableFields
- Создать экран для повторяющегося набора компонентов с компонентом RepeatableFields и вложенным StringInput, который будет использоваться для хранения данных. Добавить ещё какой-нибудь компонент, который будет использован на клон-панели. От количества клонированных блоков будет зависеть число итераций внутри цикла
- Для компонента RepeatableFields выставить галочку в чекбоксе «Элементы списка будут обрабатываться в цикле?»
- Зайти в расширенную настройку компонента StringInput на экране для повторяющегося набора компонентов. Выставить галочку в поле «Скрывать поле?» и в блоке «Название поля, в которое записать ответ пользователя» добавить новое поле с именем «id»
- Создать экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
- После того, как необходимые экраны для цикла созданы — нужно настроить правила перехода для циклических экранов. Соответствующая настройка производится в «Блоки JSON» → «cycledScreenRules»
Содержимое блока cycledScreenRules
{ "s4": [ { "conditions": [ { "fieldType": null, "predicate": null, "args": null, "field": "c5", "protectedField": null, "variable": null, "visited": true, "value": null } ], "nextDisplay": "s7" } ], "s7": [ { "conditions": [ { "fieldType": null, "predicate": null, "args": null, "field": "c12", "protectedField": null, "variable": null, "visited": true, "value": null } ], "nextDisplay": null } ], "s2": [ { "conditions": [ { "fieldType": null, "predicate": null, "args": null, "field": "c2", "protectedField": null, "variable": null, "visited": true, "value": null } ], "nextDisplay": "s4" } ] } |
Важно! Для того, чтобы закончить цикл и инициализировать выход из него, у последнего экрана цикла следующий экран должен быть указан как «null», то есть «nextDisplay»: null. Экран, который должен следовать после цикла, не может быть финальным
Шаблон цикла с использованием RepeatableFields
Реализация цикла с помощью компонента ChildrenList
- Создать экран со сложным компонентом и добавить компонент ChildrenList
- В настройке компонента добавить галочку в чекбоксе «Включить цикличность компонента?»
- Добавить следующие вложенные компоненты:
- В расширенной настройке всех компонентов в блоке «Название поля, в которое записать ответ пользователя», обязательно должно быть указано следующее имя:
- для компонента Id — StringInput(hidden): «id»
- для компонента FirstName — StringInput: «firstName»
- для компонента LastName — StringInput = «lastName»
- для компонента SecondName — StringInput: «secondName»
- для компонента BirthDate — DateInpu: «birthDate»
- для компонента Gender — RadioInput: «gender»
- для компонента NewChild — RadioInput(hidden): «isNew»
- Компонент Gender (RadioInput) должен содержать в себе следующий массив с элементами:
- Компонент NewChild (RadioInput) должен содержать следующий массив с элементами:
- Создаём экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
- После того, как необходимые экраны для цикла созданы, нужно настроить правила перехода для циклических экранов. Соответствующая настройка производится в «Блоки JSON» → «cycledScreenRules»
Содержимое блока cycledScreenRules
{ "s3": [ { "conditions": [], "nextDisplay": null } ], "s1": [ { "conditions": [], "nextDisplay": "s3" } ] } |
Экран s1 — инициирующий цикл экран с ChildrenList;
Экран s3 – последний экран цикла
Важно! Для того, чтобы закончить цикл и инициализировать выход из него, у последнего экрана цикла следующий экран должен быть указан как «null», то есть «nextDisplay»: null. Экран, который должен следовать после цикла, не может быть финальным
Шаблон цикла с использованием ChildrenList
Использование компонентов загрузки в цикле
При использовании компонентов загрузки фото или файлозагрузчиков (PhotoUploadComponent или FileUploadComponent) требуется уникальная загрузка фото или файлов на каждой итерации. В расширенных настройках компонента необходимо выставить галочку в чекбоксе «Компонент используется на циклических экранах?»
В случае если галочка не выставлена, то на второй итерации цикла пользователь обнаружит, что фото уже загружено. Это будет фото с предыдущей итерации