Microsoft.Common.EditableGrid UI-element

Artikel
05/21/2024

Een besturingselement voor het verzamelen van invoer in tabelvorm. Alle velden in het raster kunnen worden bewerkt en het aantal rijen kan variëren.

Ui-voorbeeld

Schermopname van het element Microsoft.Common.EditableGrid UI met bewerkbare velden en verschillende rijen.

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

Voorbeelduitvoer

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

Opmerkingen

De enige geldige besturingselementen in de matrix kolommen zijn het tekstvak, optionsgroup en de vervolgkeuzelijst.
De $rowIndex variabele is alleen geldig in expressies die zijn opgenomen in onderliggende elementen van de kolommen van het raster. Het is een geheel getal dat de relatieve rijindex van het element vertegenwoordigt en het aantal begint met één en met één. Zoals wordt weergegeven in de sectie van "columns": het schema, wordt deze $rowIndex gebruikt voor validatie.
Wanneer validaties worden uitgevoerd met behulp van de $rowIndex variabele, is het mogelijk om de waarde van de huidige rij op te halen door de last() en take() opdrachten te combineren.

Voorbeeld:

last(take(<reference_to_grid>, $rowIndex))
De label eigenschap wordt niet weergegeven als onderdeel van het besturingselement, maar wordt weergegeven in het uiteindelijke tabbladoverzicht.
De ariaLabel eigenschap is het toegankelijkheidslabel voor het raster. Geef nuttige tekst op voor gebruikers die schermlezers gebruiken.
De constraints.width eigenschap wordt gebruikt om de totale breedte van het raster in te stellen. De opties zijn Volledig, Gemiddeld, Klein. De standaardwaarde is Vol.
De width eigenschap voor onderliggende kolommen bepaalt de kolombreedte. Breedten worden opgegeven met behulp van breukeenheden, zoals 3fr, waarbij de totale ruimte wordt toegewezen aan kolommen die evenredig zijn met hun eenheden. Als er geen kolombreedte is opgegeven, is de standaardwaarde 1fr.

Volgende stappen

Zie Aan de slag met CreateUiDefinition voor een inleiding tot het maken van UI-definities.
Zie CreateUiDefinition-elementen voor een beschrijving van algemene eigenschappen in UI-elementen.

Delen via