Войти
Назад

Компонент выпадающего списка (DropDown)

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

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

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

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

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

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

В услуге

Рисунок1.png

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

Рисунок2.png

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

ВКУ JSON
№ В конструкторе Атрибут Тип Описание
1 Идентификатор компонента id string Уникальный идентификатор компонента в JSON
2 Имя компонента name string Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3 Заголовок компонента label string Название поля. Описывает, что пользователю необходимо выбрать в отображаемое ему поле
4 Компонент обязателен для заполнения required boolean Принуждает пользователя к взаимодействию с компонентом
5 Способ заполнения данными vkuDictType string Позволяет выбрать варианты заполнения данных:
  • ручной ввод
  • генерация годов
  • динамическое создание данных из LinkedValues
6 Название элемента properties string Позволяет задать названия элементов, которые будут доступны для выбора пользователю
7 Идентификатор элемента code string Значение, которое передаётся в черновик при выборе элемента
8 Недоступен для выбора disable string Позволяет запретить пользователю выбрать элемент списка
9 Отображение элемента в зависимости от пола пользователя gender string Позволяет настроить гендерность для значения
10 Индекс значения, выбираемого в компоненте по умолчанию defaultIndex integer, string Позволяет выбрать по умолчанию одно из значений списка
11 Название поля, в которое запишется ведённое значение на циклических экранах fields array Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле
12 Только для чтения testReadOnly string Атрибут предназначен для отключения возможности пользователю выбирать значение
13 Отображение компонента в повторяющихся блоках RepeatableFields onlyFirstScreen boolean Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент DropDown будет отображаться во всех блоках компонента RepeatableFields
14 Возможность сброса, выбранного из справочника значений isClearable boolean Возможность сброса выбранного из справочника значения. Если указать true, то будет отображаться крестик для сброса выбранного значения
15 Подсказка под компонентом labelHint string Серый текст, который отображается под компонентом
16 Пример значения в поле placeholder string Введённое значение отобразится в строке в качестве примера
17 Зависимости с ранее ведёнными данными ref rray Массив объектов, в элементах которых описываются зависимости и правила отображения полей
18 Валидация validation array Если на экране есть несколько компонентов и необходимо, чтобы пользователь указал хотя бы один
19 Модальное окно с пояснениями clarifications object Позволяет раскрыть блок «Настройка пояснительных переходов в компонентах» или сделать список ссылок на пояснительные переходы
20 Настроить модальное окно с пояснением вручную acceptableTypes additionalProperties Позволяет настроить модальные окна
21 Настройка формирования health-метрик healthList array Позволяет задать список событий компонента, по которым будут формироваться health-запросы
22 Вычисляемые аргументы компонента (LinkedValues) attrs object Атрибуты компонента, позволяющие реализовать сложный функционал
23 Идентификатор подсказки suggest suggestionId string Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными
24 Идентификаторы компонентов, для которых чистить кэш clearCacheForComponentIds array Если ответ на текущий компонент отличается от того, что указан в cachedAnswers, при наличии, то будут удалены все cachedValues, указанные в этом поле

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

{

"visited": true,

"value": "Загранпаспорт"

}

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

Компонент используется в случаях, когда пользователю необходимо выбрать один вариант из конечного списка. Можно настроить формирование значений в зависимости от ответа на другой компонент, например, QuestionScr. Далее необходимо создать пустой экран типа Redirect с компонентом ValueCalculator, в котором будет описываться формирование выпадающего списка

Пример JSON

{
    "createOrder": false,
    "skipValidation": false,
    "sendAnalytics": false,
    "linkedValues": [
        {
            "version": 1,
            "argument": "kolvo",
            "jsonLogic": {
                "if": [
                    {
                        "==": [
                            "answer.sc1.value",
                            1
                        ]
                    },
                    "[{"title":"Значение 1","code":"1"}]",
                    {
                        "==": [
                            "answer.sc1.value",
                            2
                        ]
                    },
                    "[{"title":"Значение 1","code":"1"}, {"title":"Значение 2","code":"2"}]"
                ]
            },
            "jsonSource": false
        }
    ],
    "checkForDuplicate": false,
    "value": null,
    "required": true,
    "attrs": {}
}
 

Настройки компонента DropDown должны выглядеть следующим образом:

Рисунок3.png

Рисунок4.png


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