Elemento da IU Microsoft.Common.EditableGrid
Um controlo para recolher entradas tabulares. Todos os campos dentro da grelha são editáveis e o número de linhas pode variar.
Exemplo de IU
Esquema
{
"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
}
}
}
]
}
}
Saída de exemplo
{
"colName": "contoso",
"colGender": "female",
"colContactPreference": "email"
}
Observações
Os únicos controlos válidos na matriz de colunas são a Caixa de Texto, o OptionsGroup e o DropDown.
A
$rowIndex
variável só é válida em expressões contidas em subordinados das colunas da grelha. É um número inteiro que representa o índice de linha relativa do elemento e a contagem começa num e incrementa um. Conforme mostrado na secção do"columns":
esquema, o$rowIndex
é utilizado para validação.Quando as validações são efetuadas com a
$rowIndex
variável , é possível obter o valor da linha atual ao combinar oslast()
comandos etake()
.Por exemplo:
last(take(<reference_to_grid>, $rowIndex))
A
label
propriedade não aparece como parte do controlo, mas é apresentada no resumo final do separador.A
ariaLabel
propriedade é a etiqueta de acessibilidade da grelha. Especifique texto útil para os utilizadores que utilizam leitores de ecrã.A
constraints.width
propriedade é utilizada para definir a largura geral da grelha. As opções são Completo, Médio, Pequeno. A predefinição é Completa.A
width
propriedade em subordinados de colunas determina a largura da coluna. As larguras são especificadas através de unidades fracionárias, como 3fr, com o espaço total a ser atribuído a colunas proporcionais às respetivas unidades. Se não for especificada nenhuma largura de coluna, a predefinição é 1fr.
Passos seguintes
- Para obter uma introdução à criação de definições de IU, veja Introdução ao CreateUiDefinition.
- Para obter uma descrição das propriedades comuns nos elementos da IU, veja CreateUiDefinition elements (Elementos CreateUiDefinition).