O objetivo deste documento é demostrar como alterar o layout de campo(s) de um Metadados.
Depois de gerado um Projeto de Metadados, para que o tamanho de cada campo seja modificado, altere as propriedades “SizeConstraintsType” para Custom e With e Heigh da MaxSize, conforme o desejado.
Exemplo: Utilizaremos o formulário abaixo como exemplo.
![](/download/attachments/271411899/image2017-2-7%2018%3A8%3A12.png?version=1&modificationDate=1486501702000&api=v2&effects=drop-shadow)
Informações |
---|
|
Deck of Cards |
---|
| Card |
---|
default | true |
---|
id | Processo |
---|
label | Editando SizeConstraintsType |
---|
| Selecione a tela do Metadados e clique em "Definir Leiaute". ![](/download/attachments/271411899/image2017-2-7%2017%3A43%3A9.png?version=1&modificationDate=1486500198000&api=v2)
No formulário seguinte selecione a aba “Árvore de Organização”. Escolha a campo desejado e altera o valor propriedade “SizeConstraintsType” para “Custom”. ![](/download/attachments/271411899/image2017-2-7%2017%3A50%3A45.png?version=1&modificationDate=1486500655000&api=v2)
|
Card |
---|
default | true |
---|
id | Processo |
---|
label | Editando MaxSize |
---|
| Selecione a tela do Metadados e clique em "Definir Leiaute". ![](/download/attachments/271411899/image2017-2-7%2017%3A43%3A9.png?version=1&modificationDate=1486500198000&api=v2)
No formulário seguinte selecione a aba “Árvore de Organização”. Escolha a campo desejado e expanda a propriedade “MaxSize”. Nas sub-propriedades "Width" e "Height" atribua os valores desejados. ![](/download/attachments/271411899/image2017-2-7%2018%3A18%3A15.png?version=1&modificationDate=1486502304000&api=v2)
|
Card |
---|
default | true |
---|
id | Processo |
---|
label | Resultado |
---|
| Confirme que o campo teve a sua largura alterada. ![](/download/attachments/271411899/image2017-2-7%2018%3A20%3A7.png?version=1&modificationDate=1486502417000&api=v2)
|
|
|
Algumas propriedades dos componentes da tela de metadados tem o valor herdado de acordo com o componente pai.
![](/download/attachments/271411899/image2017-3-2%2014%3A33%3A31.png?version=1&modificationDate=1488476034000&api=v2&effects=drop-shadow)
No exemplo acima o componente Coligada é único para preencher toda a tela horizontalmente. Portanto, ao tentar diminuir o valor do width não será aplicado, uma vez que é necessário que esse componente preencha toda a linha horizontal.
Podemos posicionar os componentes lado a lado ou simplesmente coloca-los acima ou abaixo de outro componente. Para isso basta apenas selecionar o componente e arrastá-lo. Veja os exemplos a seguir:
Informações |
---|
|
Deck of Cards |
---|
| Card |
---|
id | Acima |
---|
label | Acima |
---|
title | Acima |
---|
| Posicionando o componente Cliente acima do componente Coligada. ![](/download/attachments/271411899/image2017-3-2%2014%3A36%3A33.png?version=1&modificationDate=1488476216000&api=v2)
|
Card |
---|
id | Abaixo |
---|
label | Abaixo |
---|
title | Abaixo |
---|
| Posicionando o componente Cliente abaixo do componente Coligada. ![](/download/attachments/271411899/image2017-3-2%2014%3A37%3A3.png?version=1&modificationDate=1488476246000&api=v2)
|
Card |
---|
id | Ao lado direito |
---|
label | Ao lado direito |
---|
title | Ao lado direito |
---|
| Posicionando o componente Cliente ao lado direito do componente Coligada. ![](/download/attachments/271411899/image2017-3-2%2014%3A38%3A41.png?version=1&modificationDate=1488476344000&api=v2) |
Card |
---|
id | Ao lado esquerdo |
---|
label | Ao lado esquerdo |
---|
title | Ao lado esquerdo |
---|
| Posicionando o componente Cliente a esquerda do componente Coligada. ![](/download/attachments/271411899/image2017-3-2%2014%3A39%3A21.png?version=1&modificationDate=1488476384000&api=v2) |
|
|
Desse modo, considerando o posicionamento do componente Cliente ao lado do componente Coligada vamos ter o seguinte resultado visualmente.
![](/download/attachments/271411899/image2017-3-2%2014%3A39%3A48.png?version=1&modificationDate=1488476411000&api=v2&effects=drop-shadow)
Nesse caso, temos dois componentes para preencher um espaço horizontalmente. Assim podemos alterar o valor Width de um componente e o restante da tela será preenchido pelo outro componente.
Informações |
---|
|
Deck of Cards |
---|
| Card |
---|
id | Exemplo 1 - Editando o valor Width |
---|
label | Exemplo 1 - Editando o valor Width |
---|
title | Exemplo 1 - Editando o valor Width |
---|
| ![](/download/attachments/271411899/image2017-3-2%2014%3A40%3A5.png?version=1&modificationDate=1488476428000&api=v2)
|
Card |
---|
id | Exemplo 2 - Editando o valor Width |
---|
label | Exemplo 2 - Editando o valor Width |
---|
title | Exemplo 2 - Editando o valor Width |
---|
| ![](/download/attachments/271411899/image2017-3-2%2014%3A40%3A19.png?version=1&modificationDate=1488476442000&api=v2)
|
|
|
Ilustrando o exemplo ao alterar a propriedade Height do campo observação, que é do tipo memorando, e pode ter esse valor alterado. Mas nem todos os componentes podem ter o valor height alterado.
Informações |
---|
|
Deck of Cards |
---|
| Card |
---|
id | Exemplo 1 - Editando o valor Height |
---|
label | Exemplo 1 - Editando o valor Height |
---|
title | Exemplo 1 - Editando o valor Height |
---|
| ![](/download/attachments/271411899/image2017-3-2%2014%3A41%3A45.png?version=1&modificationDate=1488476528000&api=v2)
|
Card |
---|
id | Exemplo 2 - Editando o valor Height |
---|
label | Exemplo 2 - Editando o valor Height |
---|
title | Exemplo 2 - Editando o valor Height |
---|
| ![](/download/attachments/271411899/image2017-3-2%2014%3A41%3A57.png?version=1&modificationDate=1488476541000&api=v2)
|
|
|
Os componentes podem ser ocultos ou exibidos, de acordo com a necessidade. Assim sendo, não necessariamente um componente cadastrado no projeto aparecerá inicialmente na visão de inclusão do formulário.
Podemos ocultar ou exibir os campos movendo os entre a aba principal e a aba de Itens Ocultado. Veja os exemplos a seguir:
Informações |
---|
|
O componente TESTE na imagem abaixo, está oculto e não aparece no formulário. Image Added Image Added
- Agora, caso arrastemos o campo para o layout principal, dessa forma:
Image Added
- Podemos notar que automaticamente o formulário passa a exibir o campo:
Image Added
|