Войти

Выпадающий список со строкой поиска (Lookup)

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

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

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

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

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

В услуге

lookup1.png

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

lookup3.png
lookup4.png

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

ВКУ

JSON

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

Атрибут

Тип

Описание

1

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

id

string

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

2

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

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

3

Заголовок компонента

label

string

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

4

Поле является обязательным для заполнения?

required

boolean

Принуждает к взаимодействию с компонентом

5

Дополнительные атрибуты

5.1

Отображение компонента в повторяющихся блоках (RepeatableFields)

Настраивается каким образом компонент будет отображаться в RepeatableFields

5.2

Описание валидации компонента

validation

array

Если добавлено условие для нескольких элементов, то позволяет сделать обязательным заполнение хотя бы одного из них

5.3

Включение отображения крестика справа

isClearable

boolean

При развернутом списке и выбранном значении отображается крестик справа

5.4

Подсказка для поля, отображается под строкой выбора значения

hint

string

Текст, который отображается под компонентом

5.5

Включить валидацию выбранного значения на бэке

validation SwitchOn

boolean

Включение валидации на бэке

5.6

Название загружаемого словаря

dictionaryType

string

Указывается  название справочника, данные которого нужно загрузить

6

Маппинг параметров

6.1

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

idPath

string

Атрибут справочника

6.2

Путь до параметра, значение которого будет отображаться в выпадающем списке *

textPath

string

Указывается путь до параметра, значение которого нужно отображать в выпадающем списке

6.3

URL загружаемого словаря

dictionaryUrlType

string

Имя используемого API для предоставления справочника. Примеры:

«dictionary»

«nsiSuggest»

«lkApi»

«childrenClubsApi»

6.4

Включение pull-режима при вызове методов NSI-справочника

isPullMode

boolean

Атрибут включает pull-режим для запросов к справочнику. pull-режим необходимо включать при вызове тяжелых справочников

7

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

parent RefItemValue

string

Код родительского элемента

8

Поля, выбираемые из словаря

select Attributes

array

9

Параметры сортировки

9.1

Имя атрибута, по которому будут сортироваться элементы справочника

attribute Name

string

Указывается имя атрибута, по которому будут сортироваться элементы справочника

9.2

Порядок сортировки

Sort Direction

string

Указывается каким образом нужно осуществить сортировку (по возрастанию, по убыванию)

10

Количество элементов на странице

pageSize

string

Размер страницы. Если атрибут не задан, то по умолчанию подставляется 10000. То есть все элементы справочника разбиваются на страницы, в каждой странице 10000 элементов

Укажите 0, чтобы отобразить все элементы справочника

11

Номер страницы

pageNum

integer

Номер необходимой страницы. Элементы этой страницы будут отображены в выпадающем списке.

12

Эталонное значение в поле для ввода

Текст, который отображается внутри поля

13

Значение с каким индексом в списке показывать по умолчанию

defaultIndex

number

Указывается атрибут/индекс значения, которое будет отображаться в поле по умолчанию

14

Значение из списка, заданное по умолчанию

lookupDefaultValue

string

Указывается значение из списка, которое будет отображаться в поле по умолчанию

15

Отображать лоадер на месте лупы при загрузке справочника?

searchIconForcedShowing

boolean

Указывается, если нужно вместо лупы отображать лоадер

16

Развернуть список со значениями при открытии страницы?

focusOnInitAndStartSearch

boolean

Указывается, если нужно, чтобы при открытии страницы список со значениями был автоматически развернут

17

Фильтрация по выбранному словарю

17.1

Наименование атрибута фильтрации

attributeName/key

string

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

17.2

Тип фильтрации

condition

string

Указывается по какому критерию, условию нужно осуществить фильтрацию

17.3

Брать ли результаты со значением null

17.4

Тип получения значения для фильтра

valuetype

string

Тип значения

18

Название атрибута, по которому происходит фильтрация

attributeName

string

Вторичная фильтрация. Производится на фронте из тех значений, что вернул бэк при первичной фильтрации

19

Список значений справочника

Указываются значения из справочника, которые необходимо исключить или  показать на форме

20

Исключить из списка только заданные значения? Иначе - включить в список только заданные значения

Исключаются значения, указанные в списке значений справочника

21

Функционал для интерактивного справочника

Поиск по справочнику производится по значению, введённому в поле

21.1

Количество отображаемых значений справочника на странице

pageSize

string

Указывается количество значений справочника, отображаемых на странице

21.2

Поля, выбираемые из словаря

22

Настройка фильтрации по выбранному словарю для интерактивного поиска

dictionaryFilter

object

22.1

Наименование атрибута фильтрации

attributeName/key

string

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

22.2

Тип фильтрации

condition

string

Указывается по какому критерию, условию нужно осуществить фильтрацию

22.3

Тип получения значения для фильтра

valuetype

string

Тип значения

24

Ссылки на значения атрибутов для подстановки в отображаемый текст

25

URL вызываемого сервиса

url

string

Задается url, для запроса справочника (задавать вплоть до пути dictionary) Если значение url пустое, то запрос осуществляется по currentUrl

26

Пояснительные переходы

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

27

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


Настройка модальных окон (поп-апов)

28

Настройка формирования health-метрик

healthList

array of objects

29

Идентификатор подсказки/саджеста/suggest

Подробнее в статье

30

Вычисляемые аргументы компонента (linkedValues)

attrs

object


Атрибуты компонента, позволяющие реализовать сложный функционал

31

Идентификаторы компонентов, для которых чистить кэш

clearCacheForComponentIds

array

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

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

{
value: "{"originalItem":{"value":"3","parentValue":null,"title":" ","isLeaf":true,"children":
[],"attributes":[{"name":"CODE","type":"DECIMAL","value":{"asString":null,"asLong":null,"
asDecimal":3,"asDateTime":null,"asDate":null,"asBoolean":null,"typeOfValue":"DECIMAL","value":
3},"valueAsOfType":3},{"name":"TITLE","type":"STRING","value":{"asString":" ","asLong":
null,"asDecimal":null,"asDateTime":null,"asDate":null,"asBoolean":null,"typeOfValue":"STRING","
value":" "},"valueAsOfType":" "},{"name":"ACTIVE","type":"STRING","value":{"asString":"
Y","asLong":null,"asDecimal":null,"asDateTime":null,"asDate":null,"asBoolean":null,"
typeOfValue":"STRING","value":"Y"},"valueAsOfType":"Y"},{"name":"autokey","type":"STRING",
"value":{"asString":"CONC_LIC_TYPE_3","asLong":null,"asDecimal":null,"asDateTime":null,"
asDate":null,"asBoolean":null,"typeOfValue":"STRING","value":"CONC_LIC_TYPE_3"},"valueAsOfType":
"CONC_LIC_TYPE_3"}],"source":null,"attributeValues":{"CODE":3,"TITLE":" ","autokey":"
CONC_LIC_TYPE_3","ACTIVE":"Y"}},"id":"3","text":" "}"
visited: true
}

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

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

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