Compartir a través de

Elemento de la interfaz de usuario Microsoft.Common.EditableGrid

  • Artículo

Se trata de un control para recopilar datos tabulares. Todos los campos de la cuadrícula son editables y el número de filas puede variar.

Ejemplo de interfaz de usuario

Captura de pantalla del elemento de interfaz de usuario Microsoft.Common.EditableGrid con campos editables y filas variables.

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

Salida de ejemplo

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

Observaciones

  • Los únicos controles válidos dentro de la matriz de columnas son TextBox, OptionsGroupy DropDown.

  • La variable $rowIndex solo es válida en expresiones incluidas en elementos secundarios de las columnas de la cuadrícula. Se trata de un entero que representa el índice de fila relativa del elemento; y el recuento comienza en uno y se incrementa en uno. Tal como se muestra en la sección "columns": del esquema, el valor $rowIndex se utiliza con fines de validación.

  • Cuando las validaciones se realizan mediante la variable $rowIndex, es posible obtener el valor de la fila actual mediante la combinación de los comandos last() y take().

    Por ejemplo:

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

  • La propiedad label no aparece como parte del control, pero se muestra en el resumen de la pestaña final.

  • La propiedad ariaLabel es la etiqueta de accesibilidad de la cuadrícula. Especifique texto útil para los usuarios que utilizan lectores de pantalla.

  • La propiedad constraints.width se utiliza para establecer el ancho global de la cuadrícula. Las opciones son Full (Completa), Medium (Media) y Small (Pequeña). El valor predeterminado es Full (Completa).

  • La propiedad width de los elementos secundarios de las columnas determina el ancho de columna. Los anchos se especifican mediante unidades fraccionarias, como 3fr; y el espacio total se asigna a las columnas de forma proporcional con respecto a las unidades. Si no se especifica un ancho de columna, el valor predeterminado es 1fr.

Pasos siguientes