Список с возможностью множественного выбора (MultipleChoiceDictionary)

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

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

Компонент позволяет создавать список с возможностью множественного выбора

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

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

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

В услуге

Рисунок1.png

Рисунок2.png

Рисунок3.png

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

Рисунок4.png

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

ВКУ		JSON
№	В конструкторе	Атрибут	Тип	Описание
1	Идентификатор компонента	id	string	Уникальный идентификатор компонента в JSON
2	Имя компонента	name	string	Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3	Заголовок компонента	label	string	Название поля. Описывает, что пользователю необходимо выбрать из списка
4	Компонент обязателен для заполнения	required	boolean	Принуждает пользователя к взаимодействию с компонентом
5	Способ заполнения данными	vkuDictType	string	Позволяет выбрать способ заполнения данными: Внешний справочник — значения списка будут сформированы из загруженного справочника Ручной ввод — позволяет вручную задать список значений Генерация годов — позволяет сгенерировать необходимый диапазон годов для выбора Динамическое создание данных из linkedValues — значения будут формироваться с помощью LinkedValues
6	Название элемента	label	string	Позволяет задать наименование элемента в списке
7	Идентификатор элемента	code	string	Значение, которое передаётся в черновик при выборе элемента
8	Недоступен для выбора	disable	boolean, string	Позволяет запретить пользователю выбрать элемент списка
9	Зависимости с ранее введёнными данными	ref	array	Массив объектов, в элементах которых описываются зависимости и правила отображения полей
10	Валидация выбранных значений	validation	array	Позволяет настроить обязательность выбора минимум одного значения в компоненте на экране с несколькими компонентами
11	Проверять выбранное значение на backend для исключения подмены	vkuValidationSwitchOn	boolean	По умолчанию принимает значение true. В значении false позволяет отключить валидацию выбранного значения на backend. Используется для больших справочников
12	Отображение компонента в повторяющихся блоках RepeatableFields	onlyFirstScreen	boolean	Можно выбрать отображение только в первом блоке или наоборот во всех блоках, кроме первого. Если не выбрать значение из списка, то компонент будет отображаться во всех повторяющихся блоках RepeatableFields
13	Заголовок модального окна	modalHeader	string	Позволяет задать заголовок модального окна выбора элементов
14	Подсказка под компонентом вместо надписи «Необязательно»	customUnrecLabel	string	Позволяет создать подсказку под компонентом вместо надписи «Необязательно»
15	Компонент инициирует цикл	isCycled	boolean	Позволяет инициировать цикл из повторяющегося набора экранов для выбранных элементов списка
16	Модальные окна с пояснениями	clarifications	object, array	Позволяет раскрыть блок «Настроить модальное окно с пояснением вручную» или сделать список ссылок на пояснительные переходы
17	Настроить модальное окно с пояснением вручную	acceptableTypes	additionalProperties	Позволяет настроить модальные окна
18	Настройка формирования health-метрик	healthList	array	Позволяет задать список событий компонента, по которым будут формироваться health-запросы
19	Ссылки на значения атрибутов для подстановки в отображаемый текст	refs	array, objects	Ссылки на значения компонентов, которые необходимо отобразить
20	Вычисляемые аргументы компонента (linkedValues)	linkedValues	array	Атрибуты компонента, позволяющие реализовать сложный функционал
21	Идентификатор подсказки suggest	suggestionId	string	Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными

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

{

"visited": true,

"value": {

"list":[

{

"originalItem":{

"value":"112",

"title":"БЕЛАРУСЬ",

"isLeaf":true,

"children":[],

"attributes":[],

"attributeValues":{}

"id":"112",

"text":"БЕЛАРУСЬ"

{

"originalItem":{

"value":"643",

"title":"РОССИЯ",

"isLeaf":true,

"children":[],

"attributes":[],

"attributeValues":{}

"id":"643",

"text":"РОССИЯ"

}

"amount":2

"disabled": false

}

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

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

Рисунок5.png

Также данный компонент может использоваться для формирования списка элементов, состоящих из годов. Для этого необходимо в настройке компонента выбрать способ заполнения дынными «Генерация годов». На примере ниже показано, как формируется список по отношению к текущему году

Рисунок6.png

Рисунок7.png

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