Поделиться через


Элемент пользовательского интерфейса Microsoft.Common.DropDown

Элемент управления для выбора с раскрывающимся списком. Вы можете разрешить выбор только одного элемента или нескольких элементов. Вы также можете при желании включить описание к элементам.

Пример элемента пользовательского интерфейса

Элемент DropDown имеет различные параметры, определяющие его внешний вид на портале.

Если для выбора разрешен только один элемент, элемент управления выглядит следующим образом:

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с включенным одним выделением.

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

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с одним выделением и описанием элементов.

Когда включен множественный выбор, элемент управления добавляет параметр Выбрать все и флажки для выбора более одного элемента:

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с включенным несколькими выборами, включая параметр Select all.

Описания могут быть включены с включенным множественным выбором.

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с поддержкой нескольких выборов и описаниями элементов.

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

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с включенным несколькими выборами и фильтрацией.

Схема

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": ["Value two"],
  "toolTip": "",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

Пример полученных результатов

"two"

Замечания

  • Используйте multiselect, чтобы указать, могут ли пользователи выбирать более одного элемента.
  • По умолчанию selectAll имеет значение true, если включен множественный выбор.
  • Свойство filter позволяет пользователям выполнять поиск по длинному списку вариантов.
  • Метка для constraints.allowedValues — это отображаемый текст элемента. Его значение — это выходное значение при выборе элемента.
  • Если указано, значение по умолчанию должно быть меткой в constraints.allowedValues. Если не указано, выбирается первый элемент в constraints.allowedValues. Значение по умолчанию — NULL.
  • В constraints.allowedValues должен содержаться по крайней мере один элемент.
  • Чтобы эмулировать значение, которое не требуется, добавьте элемент с меткой и значением "" (пустая строка) в constraints.allowedValues.
  • Свойство defaultDescription используется для элементов, у которых нет описания.
  • Свойство placeholder представляет собой текст справки, который исчезает, когда пользователь начинает редактирование. Если placeholder и defaultValue определены оба, defaultValue имеет приоритет и отображается.

Пример

В следующем примере defaultValue определяется с помощью значений allowedValues вместо меток. Значение по умолчанию может содержать несколько значений при multiselect включении.

Снимок экрана: элемент пользовательского интерфейса Microsoft.Common.DropDown с поддержкой нескольких выборов и несколькими значениями по умолчанию.

{
  "name": "element1",
  "type": "Microsoft.Common.DropDown",
  "label": "Example drop down",
  "placeholder": "",
  "defaultValue": [{"value": "one"}, {"value": "two"}],
  "toolTip": "Multiple values can be selected",
  "multiselect": true,
  "selectAll": true,
  "filter": true,
  "filterPlaceholder": "Filter items ...",
  "multiLine": true,
  "defaultDescription": "A value for selection",
  "constraints": {
    "allowedValues": [
      {
        "label": "Value one",
        "description": "The value to select for option 1.",
        "value": "one"
      },
      {
        "label": "Value two",
        "description": "The value to select for option 2.",
        "value": "two"
      }
    ],
    "required": true
  },
  "visible": true
}

Следующие шаги

  • Общие сведения о создании определений пользовательского интерфейса см. в статье Начало работы с CreateUiDefinition.
  • Дополнительные сведения об общих свойствах элементов пользовательского интерфейса см. в статье Элементы CreateUiDefinition.