Войти
Назад

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

link
Скопировать прямую ссылку на статью

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

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

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

image1.png

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

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

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

Циклические экраны группируются и располагаются на сером фоне с отображением линий правил перехода на графе

image2_1.png

На боковой панели циклические экраны также объединены в группу

image3.png

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

  • s_init — инициирующий цикл экран
  • s1 — первый экран цикла
  • s4 — финальный экран цикла

Как собрать цикл

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

  1. Создать инициирующий экран: Экран для повторяющегося набора компонентов с компонентом RepeatableFields или Экран со сложным компонентом с компонентом ChildrenList
  2. Активировать в созданном компоненте чек-бокс «Компонент инициирует цикл»
  3. Добавить вложенный компонент StringInput внутри инициирующего компонента, который необходимо скрыть. Данное поле будет использоваться для хранения индекса итерации id
  4. Создать отдельные экраны с необходимыми компонентами, которые будут находиться в цикле
  5. Настроить правила перехода для созданных циклических экранов. Для исходящего правила с инициирующего экрана цикла на первый экран цикла активировать чек-бокс «Сделать правилом цикла», для исходящего правила с финального экрана цикла активировать чек-бокс «Финальный экран цикла»

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

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

  1. Создать экран для повторяющегося набора компонентов и добавить компонент RepeatableFields
  2. В настройках компонента RepeatableFields активировать чек-бокс «Компонент инициирует цикл»
    3. image4.png
  3. Создать вложенный компонент StringInput для хранения индекса итерации
    4. image5.png
  4. Активировать чек-бокс «Скрыть поле» в настройках компонента StringInput
    5. image6.png
  5. В блоке «Название поля, в которое запишется введённое значение на циклических экранах» добавить новое поле со значением "id"
    6. image7.png
  6. Добавить необходимые вложенные компоненты в компонент RepeatableFields
  7. Создать экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
  8. Создать правило перехода с инициирующего экрана на первый экран цикла, активировав в настройках правила перехода чек-бокс «Сделать правилом цикла»
    9. image8.png
  9. Настроить правила перехода между циклическими экранами. Принципы настройки условий циклических правил не отличаются от обычных
    Примеры настройки правил перехода между экранами

    Циклические правила перехода могут использовать только циклические экраны или экраны без правил перехода. Такие правила отображаются на панели в отдельных разделах: «Исходящие цикла» и «Входящие цикла»

    10. image9.png

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

image10.png

Финальных экранов в цикле может быть более одного в зависимости от количества сценариев, в таком случае для каждого такого экрана необходимо создать исходящее правило перехода с активированным чек-боксом «Финальный экран цикла». Экранов без исходящих правил перехода в цикле не должно быть

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

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

  1. Создать экран со сложным компонентом и добавить компонент ChildrenList
  2. В настройках компонента ChildrenList активировать чек-бокс «Компонент инициирует цикл»
    3. image11.png
  3. Добавить следующие вложенные компоненты
    4. image12.png
  4. В расширенной настройке всех вложенных компонентов в блоке «Название поля, в которое запишется введённое значение на циклических экранах» обязательно указать значения, приведённые в таблице ниже

    Название компонента

    Тип компонента

    Скрытие

    Название, в которое запишется введённое значение на циклических экранах

    Id 

    StringInput

    +

    id

    firstName 

    StringInput

    -

    firstName

    lastName 

    StringInput

    -

    lastName

    secondName 

    StringInput

    -

    secondName

    birthDate 

    DateInput

    -

    birthDate

    gender 

    RadioInput

    -

    gender

    NewChild 

    RadioInput

    +

    isNew

    svid

    StringInput

    +

    type

  5. В настройках компонента gender (RadioInput) задать следующий массив с элементами:
    6. image13.png
  6. В настройках компонента NewChild (RadioInput) задать следующий массив с элементами:
    7. image14.png
  7. Создать экраны с необходимыми компонентами для сбора информации, которые будут участвовать в цикле. Такими экранами могут быть:
  8. Создать правило перехода с инициирующего экрана на первый экран цикла, активировав в настройках правила перехода чек-бокс «Сделать правилом цикла»
    9. image15.png
  9. Настроить правила перехода между циклическими экранами. Принципы настройки условий циклических правил не отличаются от обычных
    Примеры настройки правил перехода между экранами

    Циклические правила перехода могут использовать только циклические экраны или экраны без правил перехода. Такие правила отображаются на панели в отдельных разделах: «Исходящие цикла» и «Входящие цикла»

    10. image16.png

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

image10.png

Финальных экранов в цикле может быть более одного в зависимости от количества сценариев, в таком случае для каждого такого экрана необходимо создать исходящее правило перехода с активированным чек-боксом «Финальный экран цикла». Экранов без исходящих правил перехода в цикле не должно быть

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

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

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

image18.png

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

Авторизуйтесь, чтобы оставить комментарий к статье