Organizando dados no formulário

Agora que temos uma grande quantidade de campos no formulário, vamos agrupá-los e organizá-los para melhorar a experiência do usuário, aplicando um pouco de User Experience (UX).

Para isso, temos que ter em mente que a mesma aplicação será utilizada tanto no desktop quanto em um smartphone.

De posse dessas informações devemos organizar os campos por grupo de informação para que o design seja motivado pela usabilidade, organizando de forma hierárquica de acordo com sua importância, reduzindo assim o esforço cognitivo na leitura da tela.

---

Configuração no Builder

1. Definir títulos para os grupos

Passos para a criação de 3 títulos agrupadores:

• Abra a subseção Tela (Lista Principal) da etapa Saída;
• Acione o ícone de Inserir da seção Formulário Principal (MAIN_FORM);
• Selecione a opção - Título;
• Repita os dois passos anteriores por 3 vezes;
• Modifique os textos Título para:
  1. Identificação da Loja
  2. Localização
  3. Informações de Operação
• Arraste o título Identificação da Loja para a primeira posição da lista
• Arraste o título Localização acima do campo CEP
• Arraste o título Informações de Operação acima do campo Inauguração
• Acione o botão Construir.

---

Resultado no Application

Esta é a tela de detalhes da aplicação antes da definição de títulos:

Agora podemos visualizar a modificação:

---

2. Agrupar campos

Vamos agrupar os campos de vínculo forte para reduzir espaço ocupado em tela e facilitar a leitura:

• Abra a subseção Tela (Lista Principal) da etapa Saída;
• Agrupar campos Endereço e Número:
  • Acione o ícone de Configurações do campo ENDERECO;
  • Mude a Descrição do campo para Endereço / Nº;
  • Acione o botão OK;
  • Acione o ícone de Configurações do campo NUMERO;
  • Mude a configuração Agrupar para Sim;
  • Acione o botão OK.
• Agrupar campos Cidade e UF:
  • Acione o ícone de Configurações do campo CIDADE;
  • Mude a Descrição do campo para Cidade / UF;
  • Acione o botão OK;
  • Acione o ícone de Configurações do campo UF;
  • Mude a configuração Agrupar para Sim;
  • Acione o botão OK.
• Acione o botão Construir.

Resultado no Application

Agora podemos visualizar a organização em grupos de campos:

---

3. Criar seções

Agora vamos substituir o título Informações de Operação por uma seção configurada como Tab

• Abra a subseção Tela (Lista Principal) da etapa Saída;
• Acione o ícone Painel/Tab localizado no canto superior direito;
• Arraste o campo INALGURACAO para dentro da nova seção Seção 1;
• Arraste o campo ANIVERSARIO_I para dentro da nova seção Seção 1;
• Arraste o campo ANIVERSARIO_F para dentro da nova seção Seção 1;
• Acione o ícone de Configurações da seção Seção 1;
• Mude a Descrição do campo para Informações de Operação;
• Mude a configuração Layout para Tab;
• Acione o botão Fechar;
• Acione o ícone de Configurações da seção Formulário Principal;
• Mude a Descrição do campo para Loja;
• Mude a configuração Layout para Tab;
• Acione o botão OK;
• Acione o botão Construir.

Resultado no Application

Agora podemos visualizar a divisão das Tabs: