Elemento Microsoft.Common.EditableGrid UI

  • Articolo

Controllo per la raccolta di input tabulari. Tutti i campi all'interno della griglia sono modificabili e il numero di righe può variare.

Esempio di interfaccia utente

Screenshot dell'elemento dell'interfaccia utente Microsoft.Common.EditableGrid con campi modificabili e righe variabili.

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

Output di esempio

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

Osservazioni:

  • Gli unici controlli validi all'interno della matrice di colonne sono TextBox, OptionsGroup e DropDown.

  • La $rowIndex variabile è valida solo nelle espressioni contenute negli elementi figlio delle colonne della griglia. Si tratta di un numero intero che rappresenta l'indice di riga relativo dell'elemento e il conteggio inizia a uno e incrementa di uno. Come illustrato nella sezione dello "columns": schema, $rowIndex viene usato per la convalida.

  • Quando le convalide vengono eseguite usando la $rowIndex variabile, è possibile ottenere il valore della riga corrente combinando i last() comandi e take() .

    Ad esempio:

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

  • La label proprietà non viene visualizzata come parte del controllo, ma viene visualizzata nel riepilogo della scheda finale.

  • La ariaLabel proprietà è l'etichetta di accessibilità per la griglia. Specificare testo utile per gli utenti che usano le utilità per la lettura dello schermo.

  • La constraints.width proprietà viene utilizzata per impostare la larghezza complessiva della griglia. Le opzioni sono Full, Medium, Small. Il valore predefinito è Full.

  • La width proprietà sugli elementi figlio delle colonne determina la larghezza della colonna. Le larghezze vengono specificate usando unità frazionarie, ad esempio 3fr, con spazio totale assegnato alle colonne proporzionali alle rispettive unità. Se non viene specificata alcuna larghezza di colonna, il valore predefinito è 1fr.

Passaggi successivi