Войти
Назад

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

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

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

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

В услуге Робота Макса компонент может принимать два вида. Первый вид (lookup) позволяет пользователю выбрать одно из значений в виде строки в загружаемом справочнике. Второй вид (cards) позволяет пользователю выбрать одно из значений в виде карточки с данными в загружаемом справочнике. Отображение зависит от настроек компонента

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

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

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

В услуге Робота Макса

В услуге.png

Вид Lookup

в услуге cards.png

Вид Cards

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

лукап1-8.png

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

ВКУ JSON
№ В конструкторе Атрибут Тип Описание
1 Идентификатор компонента id string Уникальный идентификатор компонента в JSON
2 Имя компонента name string Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3 Заголовок компонента label string Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле
4 Компонент обязателен для заполнения required boolean Принуждает пользователя к взаимодействию с компонентом
Дополнительные атрибуты
5 Код справочника dictionaryType string Название справочника, данные которого нужно загрузить
Маппинг параметров
6 Идентификатор параметра idPath string Атрибут справочника
7 Параметр, значение которого будет отображаться в выпадающем списке textPath string Путь до параметра, значение которого нужно отображать в выпадающем списке
8 URL загружаемого словаря dictionaryUrlType string Имя используемого API для предоставления справочника. Примеры:
  • dictionary
  • nsiSuggest
  • lkApi
  • childrenClubsApi
9 Включить pull-режим при вызове методов NSI-справочника isPullMode boolean Атрибут включает pull-режим для запросов к справочнику. Необходимо включать при вызове справочников с большим количеством атрибутов
Дополнительные опции при обращении к справочнику
10 Количество элементов на странице pageSize string Размер страницы, по умолчанию устанавливается значение 1000. Это означает, что все элементы справочника делятся на страницы по 1000 элементов каждая
11 Атрибуты, выбираемые из словаря selectAttributes array Перечень атрибутов справочника, которые запрашиваются из api/nsi/v1/dictionary/. Указывается для уменьшения объёма передаваемых данных и размера черновика
Параметры сортировки
12 Наименование атрибута, по которому будет происходить сортировка attribute Name string Имя атрибута, по которому будут сортироваться элементы справочника
13 Порядок сортировки sortDirection string Позволяет выбрать порядок сортировки:
  • По возрастанию
  • По убыванию
14 Ссылка на значение родителя для отбора по многоуровневому справочнику parentRefItemValue string Код родительского элемента. По умолчанию пустое значение
15 Фильтрация со сложной логикой dictionaryFilterV2 object Позволяет настроить динамическую фильтрацию со сложной логикой. Подробнее в статье
Фильтрация по выбранному словарю
16 Наименование атрибута фильтрации attributeName/key string Атрибут, по которому необходимо фильтровать справочник
17 Операция сравнения condition string Критерий или условие осуществления фильтрации
18 Источник значения для фильтра valuetype string Тип значения
19 Зависимости с ранее введёнными данными ref array of objects Массив объектов, в элементах которых описываются зависимости и правила отображения полей
20 Осуществлять интерактивный поиск searchProvider boolean Поиск по справочнику производится по значению, введённому в поле
21 Количество элементов на странице pageSize string Количество значений справочника, отображаемых на странице
Настройка фильтрации для полученных значений из справочника
22 Название атрибута, по которому происходит фильтрация attributeName string Вторичная фильтрация. Производится на frontend из тех значений, что вернул backend при первичной фильтрации
23 Список значений выбранного атрибута value array Указываются значения из справочника, которые необходимо исключить или показать на форме
24 Изменить заданные значения атрибута isExclude boolean Позволяет сформировать список только с заданными значениями или исключить их
25 Предустановка значения в справочнике vkuPreset string Позволяет выбрать предустановку значения в справочнике по заданному значению или индексу
26 Значение из справочника, которое будет выбрано по умолчанию lookupDefaultValue string Указывается значение из списка, которое будет отображаться в поле по умолчанию
27 Валидация выбранных значений validation array Если настройка добавлена для нескольких компонентов на одном экране, то позволяет сделать обязательным заполнение хотя бы одного из них. Компонент с данной настройкой должен быть необязательным для заполнения
28 Проверять выбранное значение на backend для исключения подмены validationSwitchOn boolean Атрибут позволяет исправить поломку компонента при больших справочниках
Атрибут, по которому проводится валидация на backend
29 Название атрибута, по которому производится валидация idName string Название атрибута из справочника
30 Тип атрибута idType string Тип атрибута, по которому по которому производится валидация. По умолчанию «asString»
31 Путь до значения в ответе справочника answerJsonPath string Путь к значению атрибута в ответе справочника. Указывается для случаев, когда ответ справочника не стандартен для nsi и уникальный атрибут хранится по пути originalItem.value, а не в attributes
32 Валидировать параметры фильтра на backend при заданных зависимостях с ранее введёнными данными dictionaryValidation object Включает валидацию на backend, которая проверяет, что выбранное в компоненте значение присутствует в справочнике. Если флаг не указан, то при валидации полученное значение сравнивается по полю ID в зависимостях с ранее введёнными данными
33 Только для чтения disabled string Атрибут предназначен для отключения возможности пользователю выбирать значение из справочника
34 Отображение компонента в повторяющихся блоках RepeatableFields onlyFirstScreen boolean Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент Lookup будет отображаться во всех блоках компонента RepeatableFields
35 Возможность сброса выбранного из справочника значения isClearable boolean Возможность сброса выбранного из справочника значения. Если указать true, то будет отображаться крестик для сброса выбранного значения
36 Подсказка, отображаемая под компонентом hint string Текст, который отображается под компонентом
37 Пример значения в поле placeholder string Введённое значение отобразится в строке в качестве примера
38 Отображать иконку загрузки вместо лупы при прогрузке справочника searchIconForcedShowing boolean Указывается, если нужно вместо лупы отображать иконку загрузки
39 Развернуть список со значениями при открытии страницы focusOnInitAndStartSearch boolean Указывается, если нужно, чтобы при открытии страницы список со значениями был автоматически развёрнут
40 Отображать иконку выпадающего списка вместо лупы showExpandCollapse boolean При значении true вместо лупы отображает иконку выпадающего списка,как в компоненте DropDown. По умолчанию принимает значение false
41 Модальные окна с пояснениями clarifications array of objects Позволяет раскрыть блок «Настроить модальное окно с пояснением вручную» или сделать список ссылок на пояснительные переходы
42 Настроить модальное окно с пояснением вручную acceptableTypes additionalProperties Позволяет настроить модальные окна
43 Настройка формирования health-метрик healthList array of objects Позволяет задать список событий компонента, по которым будут формироваться health-запросы
44 Ссылки на значения атрибутов для подстановки в отображаемый текст refs array of objects Ссылки на значения компонентов, которые необходимо отобразить
45 Вычисляемые аргументы компонента (linkedValues) linkedValues array of objects Атрибуты компонента, позволяющие реализовать сложный функционал
46 Идентификатор подсказки suggest suggestionId string Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными
47 Идентификаторы компонентов, для которых чистить кэш clearCacheForComponentIds array Если ответ на текущий компонент отличается от того, что указан в cachedAnswers, при наличии, то будут удалены все cachedValues, указанные в этом поле

Условия отображения LookUp как Cards для услуги Робота Макса

Чтобы компонент LookUp отображался пользователю как список карточек с данными (Cards), необходимо в компоненте LookUp в блоке "Вычисляемые аргументы" прописать аргумент с названием "cardsMode" и значением "true":

  1. Если параметр отсутствует или значение cardsMode == false, компонент отображается как "Loookup"
  2. Если значение cardsMode = true, компонент обрабатывается по логике компонента "Cards"

Пример настройки:

cardsMode.png

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

{

  "visited": true,

  "value": {

    "originalItem": {

      "value": "113028007415/66",

      "title": "Филиал ГКУ РЦСПН по г.Белебею РБ",

      "isLeaf": true,

      "children": [],

      "attributes": [

        {

          "name": "SHORT_TITLE",

          "type": "STRING",

          "value": {

            "asString": "Филиал ГКУ РЦСПН по г.Белебею РБ",

            "typeOfValue": "STRING",

            "value": "Филиал ГКУ РЦСПН по г.Белебею РБ"

          },

          "valueAsOfType": "Филиал ГКУ РЦСПН по г.Белебею РБ"

        },

        {

          "name": "ADDRESS",

          "type": "STRING",

          "value": {

            "asString": "452000, Республика Башкортостан, г. Белебей, ул. Революционеров 3",

            "typeOfValue": "STRING",

            "value": "452000, Республика Башкортостан, г. Белебей, ул. Революционеров 3"

          },

          "valueAsOfType": "452000, Республика Башкортостан, г. Белебей, ул. Революционеров 3"

        },

        {

          "name": "PHONE",

          "type": "STRING",

          "value": {

            "asString": "8(347)200-80-80",

            "typeOfValue": "STRING",

            "value": "8(347)200-80-80"

          },

          "valueAsOfType": "8(347)200-80-80"

        },

        {

          "name": "CODE",

          "type": "STRING",

          "value": {

            "asString": "113028007415/66",

            "typeOfValue": "STRING",

            "value": "113028007415/66"

          },

          "valueAsOfType": "113028007415/66"

        },

        {

          "name": "TITLE",

          "type": "STRING",

          "value": {

            "asString": "Филиал ГКУ РЦСПН по г.Белебею РБ",

            "typeOfValue": "STRING",

            "value": "Филиал ГКУ РЦСПН по г.Белебею РБ"

          },

          "valueAsOfType": "Филиал ГКУ РЦСПН по г.Белебею РБ"

        }

      ],

      "attributeValues": {

        "CODE": "113028007415/66",

        "TITLE": "Филиал ГКУ РЦСПН по г.Белебею РБ",

        "SHORT_TITLE": "Филиал ГКУ РЦСПН по г.Белебею РБ",

        "ADDRESS": "452000, Республика Башкортостан, г. Белебей, ул. Революционеров 3",

        "PHONE": "8(347)200-80-80"

      }

    },

    "id": "113028007415/66",

    "text": "Филиал ГКУ РЦСПН по г.Белебею РБ"

  }

}

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

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

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