Microsoft. Elemento de interface Common.Grid

O Grid elemento interface de usuário (UI) exibe uma coleção tabular de linhas. Linhas podem ser adicionadas ou editadas abrindo blades que retornam dados de linha.

Exemplo de UI

O Grid elemento gera uma tabela com botões de comando para adicionar, editar e excluir linhas.

Captura de tela da Microsoft. Elemento de interface 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
}

Saída de exemplo

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

Remarks

  • label.summary é usado em resumos e textos de acessibilidade.
  • label.addition e label.delete fornecer rótulos de comando.
  • defaultValue é um array de objetos linha, ou uma expressão que avalia um array.
  • addBlade define a lâmina aberta para formar uma linha. name, parameterse outputItem são necessários.
  • editBlade define a lâmina aberta para editar uma linha existente. É necessário quando constraints.canEditRows é true.
  • constraints.rows.count.min e constraints.rows.count.max definir limites de contagem de linhas.
  • constraints.columns define as colunas da tabela. Uma readonly coluna usa text; uma input coluna usa element.
  • constraints.width pode ser Small, Medium, ou Full.
  • Para formulários públicos de especificação de templates, use Microsoft.Common.EditableGrid a menos que seu host suporte as lâminas de adição e edição referenciadas por Microsoft.Common.Grid.

Próximas Etapas 

  • Last updated on