Общая информация
Позволяет выбрать одно значение из предложенных в выпадающем списке. Варианты вносятся разработчиком услуги вручную на этапе разработки услуги. Выбранный вариант записывается в черновик, на основании выбора пользователя можно строить зависимости с другими компонентами.
Поддерживаемые экраны
Компонент может быть задействован на экранах типа:
- Составной экран (CUSTOM);
- Экран для повторяющегося набора компонентов (REPEATEBLE).
Внешний вид компонента
В услуге
В конструкторе
Структура компонента DropDown
ВКУ |
JSON |
|||
№ |
В конструкторе |
Атрибут |
Тип |
Описание |
1 |
Идентификатор компонента |
id |
string |
Уникальный идентификатор компонента в JSON |
2 |
Удобочитаемое имя компонента |
Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент |
||
3 |
Заголовок компонента |
label |
string |
Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле |
4 |
Поле является обязательным для заполнения? |
Принуждает к взаимодействию с компонентом |
||
Атрибуты компонента |
||||
5 |
Текст внутри поля, если значение не выбрано |
placeholder |
string |
Добавляет текст-подсказку, отображаемый, пока не выбрано ни одно значение |
6 |
Включение отображения пустого значения с прочерком (первый пункт в выпадающем списке) |
isClearable |
boolean |
Если true, то первым элементом списка добавляет прочерк |
7 |
Подсказка под компонентом вместо надписи «Необязательно» |
customUnrecLabel |
string |
Подсказка под полем, вместо надписи «Необязательно» |
Настройки для генерации лет |
||||
8 |
Значение (‘Current’ или числовое значение года) |
value |
string |
Значение первого года для генерации лет |
9 |
Сколько лет добавить (отрицательное число для вычитания) |
add |
number |
Позволяет устанавливать первый год, путём добавления или отнятия от значения. Например, Current-3 будет генерировать первый год за 3 года до текущего |
10 |
Сколько лет от первого года сгенерировать (отрицательное число, если в обратную сторону) |
gen |
number |
Позволяет установить, сколько элементов списка будет сгенерированно относительно первого года и в какую сторону (возрастания или убывания) |
11 |
Сортировка лет в сгенерированном списке |
sort |
string |
Позволяет сортировать список годов по возрастанию или убыванию |
12 |
Значение по умолчанию пустое? (если нет — будет выбрано первое из списка) |
defaultEmpty |
boolean |
Если false, то по умолчанию в выпадающем списке будет выбран первый элемент |
13 |
Значение с каким индексом показывать по умолчанию? |
defaultIndex |
number |
Позволяет выбрать по умолчанию одно из значений списка |
14 |
Добавить виджет поиска |
localSearch |
boolean |
Если true, добавляет строку поиска по значениям выпадающего списка |
Элементы выпадающего списка |
||||
15 |
Текст элемента списка |
label |
string |
Текст, который будет отображаться пользователю в выпадающем списке |
16 |
Значение, сохраняемое для элемента |
code |
string |
Значение, которое передается в черновик при выборе элемента |
17 |
Убрать возможность выбора элемента |
disable |
bool |
Позволяет запретить пользователю выбрать элемент списка |
18 |
Если список должен фильтроваться по гендеру, то необходимо для каждого элемента выбрать гендер для отображения |
gender |
string |
Позволяет выбрать пол, для которого будет отображаться элемент списка |
19 |
Название поля, в которое записать ответ пользователя |
fields |
array |
Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле |
20 |
Установить зависимости с ранее введёнными данными |
array of objects |
Массив объектов, в элементах которых описываются зависимости и правила отображения полей |
|
21 |
Правила валидации |
validation |
array |
Если добавлено условие для нескольких элементов, то позволяет сделать обязательным заполнение хотя бы одного из них |
22 |
Пояснительные переходы |
Позволяет отобразить и использовать функционал создания модального окна или массив ссылок на ранее введённые данные |
||
23 |
Настройка пояснительных переходов в компоненте |
Настройка модальных окон |
||
24 |
Вычисляемые аргументы (linkedValues) |
attrs |
object |
Атрибуты компонента, позволяющие реализовать сложный функционал |
25 |
Идентификаторы компонентов, для которых чистить кэш |
clearCacheForComponentIds |
array |
true — включение механизма сохранения данных, введённых пользователем в локальный кэш устройства пользователя (Local Storage) По умолчанию выключено (false) |
Пример JSON структуры компонента передаваемой в DTO
{ "visited": true, "value": "Первый" } |
Вариант использования
Компонент используется в случаях, когда пользователю необходимо выбрать один вариант из конечного списка. Кроме того, подходит для выбора года из списка, в том числе относительно текущего года. Например, для выбора одного из последних пяти лет.