# Montar e organizar a tela de cadastro
### Montar tela de cadastro
É necessário montar a estrutura da tela do formulário, com os grupos de informações e os campos.
#### Barra Horizontal
##### Confirmar Alterações
Sai da montagem da tela, salva a tela com as configurações atuais.
##### Fechar e Cancelar
Sai da montagem da tela, descartando as alterações.
##### Simular em Tela em outras Resoluções
Ao clicar em um dos 4 botões, você consegue ver como ficará a tela nas seguintes resoluções:
- Monitor
- Laptop
- Tablet
- Celular
##### Limpar Tela
Remove todos as estruturas da tela.
Na montagem da tela, existem 3 estruturas que podem ser utilizadas:
#### Montagem da Tela
##### Grupo de Informações
Cada [grupo de informação](http://wiki.agilityflow.io/books/manual-de-customiza%C3%A7%C3%A3o/page/divis%C3%A3o-e-agrupamento-dos-campos "Divisão e agrupamento dos campos") criado no formulário estará disponível para ser usado como estrutura na tela. Esses grupos, quando adicionados na tela, funcionam como uma caixa que ajudam a separar os campos de outros grupos. Além disso, esse grupo pode ser fechado ou aberto pelo usuário, facilitando quando existe uma grande quantidade de campos no formulário.
No exemplo abaixo, é possível ver um formulário simples de cadastro de clientes, onde os grupos de informações estão adicionados como estruturas da tela.
Clicando no ícone  no canto superior direito do grupo de informações, recolhe o grupo de informações. Clicando no ícone  ocorre a expansão.
Entretanto, a inclusão dos grupos de informações como estruturas na tela é opcional. Abaixo, o mesmo formulário do exemplo acima, sem a inclusão dos grupos de informações.
Para adicionar um grupo de informações, basta arrastar para a área desejada da tela.
##### Diagramação (Colunas)
A tela do formulário é separada em colunas. Caso não seja adicionada nenhuma coluna, o padrão é ter uma coluna só. A tela é dividida em 12 unidades fictícias de medidas. Quando se adicionam colunas, é possível definir o tamanho de cada uma, de forma que a soma de todas nunca ultrapasse 12. Portanto, é possível adicionar um máximo de 12 colunas, cada uma com o tamanho 1.
O sistema sugere por padrão, as seguintes opções de quantidade de colunas e tamanho:
- 1 col: 12
- 2 col: 6 6
- 2 col: 8 4
- 2 col: 9 3
- 3 col: 4 4 4
- 3 col: 2 6 4
- 3 col: 6 4 2
- 4 col: 3 3 3 3
Ao adicionar qualquer uma das estruturas, é possível movê-la na tela usando o ícone . Para apagar, use o. Caso queira duplicar a estrutura com o aspecto idêntico, clique em .
Para alterar a quantidade de colunas dessa estrutura, clique em . Isso vai abrir uma tela onde é possível distribuir as 12 unidades entre as colunas, assim como adicionar ou remover colunas.
É possível incluir um grupo de informação dentro de uma coluna, assim como também é possível dividir um grupo de informação com colunas. Além disso, é possível incluir um grupo de informação dentro de outro, assim como uma coluna dentro de outra.
##### Campos
Os campos estão disponíveis para serem incluídos logo abaixo da diagramação, e estão separados pelos respectivos grupos de informação.
Tanto os grupos de informações como as colunas, servem como estruturas de tela, onde os campos vão ser incluídos. Não é possível incluir os campos fora dessas estruturas.
Ao expandir um dos grupos, são exibidos os campos que pertencem a esse grupo. Basta arrastar o campo para o local desejado na tela.
Note que, mesmo incluído na tela, um campo pode não ser exibido devido as [regras de visibilidade](http://wiki.agilityflow.io/books/manual-de-customiza%C3%A7%C3%A3o/page/regras-de-visibilidade-e-desativa%C3%A7%C3%A3o "Regras de Visibilidade e Desativação").