Общая информация
Иногда, на этапе разработки услуги разработчик не знает какое количество элементов может ввести пользователь. В этом случае используется компонент типа RepeatableFields, который реализует повторяющуюся последовательность набора компонентов, предназначенных для ввода данных.
Новый блок полей добавляется по нажатию на кнопку «Добавить ещё данные».
Данный компонент может использоваться, например, если необходимо указать несколько членов семьи, нескольких сотрудников организации, несколько товаров и т.д.
Поддерживаемые экраны
Компонент может быть задействован на экране типа:
Внешний вид компонента
В услуге
>В конструкторе
Структура компонента 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 может возникнуть необходимость в исключении ввода повторяющихся сведений на разных клон-панелях. Для реализации этого компонент поддерживает механизм проверки уникальности вводимой информации в клон-панелях.
Для реализации данного механизма необходимо:
- В блоке «Правила проверки введенных данных на уникальность» добавить перечень необходимых полей, которые будут проверяться на уникальность. К каждому полю или группе полей можно задать свое сообщение об ошибке.
- В блоке «Кастомный текст над основным блоком компонента» задать дисклеймер, отображаемый при нарушении правил уникальности, заданных в блоке «Правила проверки введенных данных на уникальность».
Важно! Для проверки уникальности должны быть выполнены оба требования!