Microsoft.Common.EditableGrid UI 요소

테이블 형식 입력을 수집하기 위한 컨트롤입니다. 표 내의 모든 필드는 편집할 수 있으며 행 수는 다를 수 있습니다.

UI 샘플

스키마

{
  "name": "people",
  "type": "Microsoft.Common.EditableGrid",
  "ariaLabel": "Enter information per person",
  "label": "People",
  "constraints": {
    "width": "Full",
    "rows": {
      "count": {
        "min": 1,
        "max": 10
      }
    },
    "columns": [
      {
        "id": "colName",
        "header": "Name",
        "width": "1fr",
        "element": {
          "type": "Microsoft.Common.TextBox",
          "placeholder": "Full name",
          "constraints": {
            "required": true,
            "validations": [
              {
                "isValid": "[startsWith(last(take(steps('grid').people, $rowIndex)).colName, 'contoso')]",
                "message": "Must start with 'contoso'."
              },
              {
                "regex": "^[a-z0-9A-Z]{1,30}$",
                "message": "Only alphanumeric characters are allowed, and the value must be 1-30 characters long."
              }
            ]
          }
        }
      },
      {
        "id": "colGender",
        "header": "Gender",
        "width": "1fr",
        "element": {
          "name": "dropDown1",
          "type": "Microsoft.Common.DropDown",
          "placeholder": "Select a gender...",
          "constraints": {
            "allowedValues": [
              {
                "label": "Female",
                "value": "female"
              },
              {
                "label": "Male",
                "value": "male"
              },
              {
                "label": "Other",
                "value": "other"
              }
            ],
            "required": true
          }
        }
      },
      {
        "id": "colContactPreference",
        "header": "Contact preference",
        "width": "1fr",
        "element": {
          "type": "Microsoft.Common.OptionsGroup",
          "constraints": {
            "allowedValues": [
              {
                "label": "Email",
                "value": "email"
              },
              {
                "label": "Text",
                "value": "text"
              }
            ],
            "required": true
          }
        }
      }
    ]
  }
}

샘플 출력

{
  "colName": "contoso",
  "colGender": "female",
  "colContactPreference": "email"
}

설명

• 열 배열 내에서 유효한 컨트롤은 TextBox, OptionsGroup 및 DropDown뿐입니다.

• $rowIndex 변수는 그리드 열의 자식 요소에 포함된 언어 식에서만 유효합니다. 요소의 상대 행 인덱스를 나타내는 정수이며 개수는 1에서 시작하여 1씩 증가합니다. 스키마의 "columns": 섹션에 표시된 대로 $rowIndex는 유효성 검사에 사용됩니다.

• $rowIndex 변수를 사용하여 유효성 검사를 수행할 때 last() 및 take() 명령을 결합하여 현재 행의 값을 얻을 수 있습니다.

  예시:

  last(take(<reference_to_grid>, $rowIndex))

• label 속성은 컨트롤의 일부로 표시되지 않지만 최종 탭 요약에 표시됩니다.

• ariaLabel 속성은 그리드의 접근성 레이블입니다. 화면 읽기를 사용하는 사용자에게 유용한 텍스트를 지정합니다.

• constraints.width 속성은 그리드의 전체 너비를 설정하는 데 사용됩니다. 옵션은 전체, 중간, 작음입니다. 기본값은 전체입니다.

• 열의 자식 요소 width 속성은 열의 너비를 결정합니다. 너비는 3fr과 같은 소수 단위를 사용하여 지정되며 총 공간은 단위에 비례하여 열에 할당됩니다. 열 너비를 지정하지 않으면 기본값은 1fr입니다.

다음 단계

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