Microsoft.Common.EditableGrid UI 元素Microsoft.Common.EditableGrid UI element

用于收集表格输入的控件。A control for gathering tabular input. 网格中的所有字段都是可编辑的,行数可能会有所不同。All fields within the grid are editable and the number of rows may vary.

UI 示例UI sample

Microsoft.Common.EditableGrid

架构Schema

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

示例输出Sample output

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

备注Remarks

  • 列数组内的有效控件只有 TextBoxOptionsGroupDropDownThe only valid controls within the columns array are the TextBox, OptionsGroup, and DropDown.

  • $rowIndex 变量只在网格列的子级中包含的表达式中有效。The $rowIndex variable is only valid in expressions contained within children of the grid's columns. 它是一个整数,表示元素的相对行索引,计数从 1 开始,以 1 为增量递增。It's an integer that represents the element's relative row index and the count begins at one and increments by one. 如架构的 "columns": 部分所示,$rowIndex 用于验证。As shown in the schema's "columns": section, the $rowIndex is used for validation.

  • 在使用 $rowIndex 变量执行验证时,可以通过合并使用 last()take() 命令来获取当前行的值。When validations are performed using the $rowIndex variable, it's possible to get the current row's value by combining the last() and take() commands.

    例如:For example:

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

  • label 属性不会作为控件的一部分出现,而是会显示在最终的选项卡摘要上。The label property doesn't appear as part of the control but is displayed on the final tab summary.

  • ariaLabel 属性是网格的可访问性标签。The ariaLabel property is the accessibility label for the grid. 请为使用屏幕阅读器的用户指定有用的文本。Specify helpful text for users who use screen readers.

  • constraints.width 属性用于设置网格的整体宽度。The constraints.width property is used to set the overall width of the grid. 选项为“完全”、“中等”、“小型” 。The options are Full, Medium, Small. 默认值为“完整”。The default is Full.

  • 列的子级的 width 属性确定列的宽度。The width property on children of columns determines the column width. 宽度是使用分数单位(如“3fr”)指定的,而总空间则按各列的单位所占比例分配到各列。Widths are specified using fractional units such as 3fr, with total space being allotted to columns proportional to their units. 如果未指定列宽,则默认值为“1fr”。If no column width is specified, the default is 1fr.

后续步骤Next steps