Microsoft.Common.DropDown UI 요소

드롭다운 목록을 포함하는 선택 컨트롤입니다. 단일 항목 또는 여러 항목을 선택할 수 있습니다. 항목에 대한 설명을 선택적으로 포함할 수도 있습니다.

UI 샘플

요소에는 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가 사용하도록 설정된 경우 기본값에는 여러 값이 포함될 수 있습니다.

{
  "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
}

다음 단계

• UI 정의 만들기에 대한 소개는 CreateUiDefinition 시작을 참조하세요.
• UI 요소의 공용 속성에 대한 설명은 CreateUiDefinition 요소를 참조하세요.