Microsoft. Élément UI Common.Grid

L’élément Grid interface utilisateur (UI) affiche une collection tabulaire de lignes. Les lignes peuvent être ajoutées ou modifiées en ouvrant des lames qui retournent les données des lignes.

Exemple d’interface utilisateur

L’élément Grid affiche une table avec des boutons de commande pour ajouter, éditer et supprimer des lignes.

Capture d’écran de la Microsoft. Élément d’interface utilisateur Common.Grid.

Schema

{
  "name": "subnets",
  "type": "Microsoft.Common.Grid",
  "label": {
    "summary": "Subnets",
    "addition": "Add subnet",
    "delete": "Delete subnet",
    "ariaLabel": "Subnets"
  },
  "defaultValue": [
    {
      "name": "default",
      "addressPrefix": "10.0.0.0/24"
    }
  ],
  "addBlade": {
    "name": "SubnetBlade",
    "extension": "Microsoft_Azure_Network",
    "parameters": {},
    "outputItem": "subnet",
    "inContextPane": true
  },
  "editBlade": {
    "name": "SubnetBlade",
    "extension": "Microsoft_Azure_Network",
    "parameters": {
      "subnet": "[$item]"
    },
    "outputItem": "subnet",
    "inContextPane": true
  },
  "constraints": {
    "rows": {
      "count": {
        "min": 1,
        "max": 5
      }
    },
    "canEditRows": true,
    "columns": [
      {
        "id": "name",
        "header": "Name",
        "cellType": "readonly",
        "text": "[$item.name]"
      },
      {
        "id": "addressPrefix",
        "header": "Address prefix",
        "cellType": "readonly",
        "text": "[$item.addressPrefix]"
      }
    ],
    "width": "Full"
  },
  "visible": true
}

Exemple de résultat

[
  {
    "name": "default",
    "addressPrefix": "10.0.0.0/24"
  }
]

Remarks

  • label.summary est utilisé dans les résumés et les textes d’accessibilité.
  • label.addition et label.delete fournir des étiquettes de commande.
  • defaultValue est un tableau d’objets lignes, ou une expression qui s’évalue à un tableau.
  • addBlade définit la lame ouverte pour former une rangée. name, parameterset outputItem sont obligatoires.
  • editBlade définit la lame ouverte pour modifier une ligne existante. Il est requis lorsque constraints.canEditRows est true.
  • constraints.rows.count.min et constraints.rows.count.max fixer des limites de nombre de lignes.
  • constraints.columns définit les colonnes du tableau. Une readonly colonne utilise text; une input colonne utilise element.
  • constraints.width peut être Small, Mediumou Full.
  • Pour les formulaires publics de type de spécifications, utilisez Microsoft.Common.EditableGrid sauf si votre hôte supporte les lames d’ajout et d’édition référencées par Microsoft.Common.Grid.

Étapes suivantes

  • Last updated on