Войти

Компонент для объединения повторяющегося набора компонентов (RepeatableFields)

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

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

Новый блок полей добавляется по нажатию на кнопку «Добавить ещё данные».

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

Поддерживаемые экраны

Компонент может быть задействован на экране типа:

Внешний вид компонента

В услуге

>В конструкторе

repeatablefileds.jpg

Структура компонента RepeatableFields

ВКУ

JSON

 

В конструкторе

Атрибут

Тип

Описание

1

Идентификатор компонента

id

string

Уникальный идентификатор компонента в JSON

2

Удобочитаемое имя компонента

   

Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера – сгенерированные идентификаторы, s – экран, c – компонент

3

Наименование кнопки для добавления нового блока

label

string

Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле

4

Атрибуты компонента

Блок атрибутов компонента 

4.1

Заголовок блока

screenCaption

string

Заголовок, отображаемый в начале каждого блока. По умолчанию отсутствует. Для того, чтобы рядом с заголовком блока показать порядковый номер блока, нужно указать <b class='counter'>*Имя заголовка*</b>

4.2

Минимальное количество блоков

minOccures

string/number

По умолчанию, если атрибут не задан, на экране отображается 1 блок 

Если минимальное количество блоков = максимальному количеству блоков, то кнопка «Добавить ещё данные» неактивна, удалить блоки возможности нет 

Если минимальное количество блоков > максимального количества блоков, то отображается количество блоков, указанных в поле «Максимальное количество блоков», кнопка «Добавить ещё данные» неактивна, удалить блоки возможности нет 

Важно! Согласно редакционной политике – всегда необходимо отображать одну клон-панель, все остальные добавляются вручную

4.3
Максимальное количество блоков repeatAmount string/number Максимальное количество блоков ограничивается значением, заданным в этом атрибуте. По умолчанию, если атрибут не задан – 20 блоков 
При достижении максимального количества блоков на экране, кнопка «Добавить ещё данные» становится неактивна

5

Может ли пользователь удалить первый блок

canDeleteFirstScreen 

boolean

Если значение false – то нельзя удалить первый блок (нет крестика), при этом на экране должно быть блоков больше, чем задано в «Минимальное количество блоков» (если количество блоков = минимальному количество блоков, то и так нельзя удалить блоки) 

Значение по умолчанию (если атрибут не задан) – true (можно удалить первый блок, если на экране кол-во блоков > минимального количество блоков) 

Важно! Согласно редакционной политике, клон-панели должны иметь крестик всегда, если добавляется ещё один блок, при добавлении второго и последующих блоков у первого блока появляется крестик для удаления

6

Правила проверки введенных данных на уникальность

uniqueBy

object

Объект, описывающий правила проверки уникальность введённых данных

7

Правило проверки введенных данных на уникальность

В данном блоке задается конкретное правило на уникальность. Подробнее указано в блоке «Варианты использования»

8

Идентификаторы компонентов, значения которых должны быть уникальными


8.1

Идентификатор компонента

fieldId

Идентификатор компонента, уникальность которого нужно проверять

8.2

Сообщение об ошибке, которое выводится при неуникальности значения

errorMsg

Сообщение об ошибке, которое выводится при неуникальности значения

9

Кастомный текст над основным блоком компонента

disclaimer

object

Дисклеймер
9.1 Заголовок title string
9.2 Текст description string Текст дисклеймера, может быть с html тегами
9.3 Цвет "значка" type string Цвет полоски у дисклеймера, по умолчанию красный также может быть в значении warn (жёлтый), info (серый), advice (голубой) 
Важно! Согласно редакционной политике рекомендуется использовать жёлтый цвет дисклеймера
9.4 Пояснительные переходы


10
Настройка пояснительных переходов в компоненте

Создание модального окна (поп-ап)
11 Элементы списка будут обрабатываться в цикле? iscycled boolean Указывает, что по выбранным или введённым сведениям будет организован цикл
12 Ссылки для подстановки значений в отображаемый текст

Описывает массив объектов представляющих собой ссылки на компоненты и их поля, отображающиеся ранее, в рамках взаимодействия с пользователем по текущей услуге. Служит для отображения ранее введённых данных
12.1 Ключ

Аргумент, который будет содержать значение из компонента
12.2 Компонент


Указывается из какого компонента брать данные
12.3
Атрибут компонента


12.4 Преобразование


12.5 Формат


13 Настройка формирования health-метрик healthList array of objects
14 Вычисляемые аргументы компонента (linkedValues) attrs object Атрибуты компонента, позволяющие реализовать сложный функционал
15
Идентификаторы компонентов, для которых чистить кэш
cacheRepeatableFieldsAnswersLocally

true – включение механизма сохранения данных, введённых пользователем в локальный кэш устройства пользователя (Local Storage). По умолчанию выключено (false)
15.1

refs
object
Ссылки на значения компонентов с предыдущих экранов

Атрибут isCycled (Элементы списка будут обрабатываться в цикле?) в значении true используется в том случае, если компонент RepeatableFields является инициализирующий экраном для цикла

Пример JSON структуры компонента передаваемой в DTO

{

    "visited": true,

    "value": [

                {

                      "CadastralNumber": "34:54:6546545:454566666",

                      "CadastralNumberLabel": ""

                },

                {

                      "CadastralNumber": "54:55:4545454:546464545",

                      "CadastralNumberLabel": ""

                }

]

}

Варианты использования

При эксплуатации компонента RepeatableFields может возникнуть необходимость в исключении ввода повторяющихся сведений на разных клон-панелях. Для реализации этого компонент поддерживает механизм проверки уникальности вводимой информации в клон-панелях.

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

  1. В блоке «Правила проверки введенных данных на уникальность» добавить перечень необходимых полей, которые будут проверяться на уникальность. К каждому полю или группе полей можно задать свое сообщение об ошибке.
  2. В блоке «Кастомный текст над основным блоком компонента» задать дисклеймер, отображаемый при нарушении правил уникальности, заданных в блоке «Правила проверки введенных данных на уникальность».

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

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