1. Apagar a visualização criada automaticamente

  • Passe o mouse sobre a view "Cliente" em Primary Navigation.
  • Clique em More (três pontinhos) e depois em Delete.
Figura 40 - Imagem da tela de configuração das visualizações
Fonte: Elaborada pelos autores, 2025.

2. Criar uma nova visualização no menu lateral

  • Vá até a parte chamada Menu Navigation e clique no botão "+" ao lado do título.
  • Vai aparecer uma janela. Clique no botão azul "Create a new view".
Figura 41 - Adicionando uma nova visualização para a tabela Cliente
Fonte: Elaborada pelos autores, 2025.

3. Configurar a nova visualização

Agora, você verá uma tela de configuração. Preencha assim:

  • View name (Nome da visualização): Clientes
  • For this data (Para estes dados): Cliente
  • View type (Tipo de visualização): Deck (que mostra uma lista em forma de cartões)

Depois disso, a nova tela "Clientes" vai aparecer no app, mesmo sem estar completamente configurada.

Figura 42 - Imagem da tela depois de configurar as colunas da tabela Cliente
Fonte: Elaborada pelos autores, 2025.

4. Adicionar um cliente fictício para testes

Crie um cliente de exemplo para ver como as informações aparecem no app. Isso ajuda a testar o funcionamento da tela como se você fosse um usuário.

O AppSheet já cria automaticamente um formulário para isso com base na tabela "Cliente".

Por enquanto, deixaremos o formulário como está. Vamos personalizá-lo mais adiante.

Figura 43 - Primeiras configurações da view Clientes
Fonte: Elaborada pelos autores, 2025.

5. Melhorar a aparência da tela de clientes

Agora podemos melhorar como as informações são mostradas.

Exemplo!

  • A foto do cliente já aparece bem posicionada.
  • No entanto, o nome está dividido: o nome aparece grande (como título principal) e o sobrenome aparece menor (como subtítulo).

Seria melhor mostrar o nome completo no título principal e a data de renovação no subtítulo. Também seria bom trocar os ícones automáticos por outros mais úteis, como enviar mensagem, ligar, ver no mapa, editar.

Figura 44 - Teste do formulário de criação de cliente sendo realizado e criação do primeiro cliente fictício para alimentar o banco de dados
Fonte: Elaborada pelos autores, 2025.

6. Criar colunas virtuais para organizar melhor as informações

Vamos criar colunas virtuais. Elas não estão na planilha original, mas o AppSheet calcula essas informações com base nas outras colunas.

a) Nome completo do cliente

  • Vá em Data > Cliente e clique no botão “+” para adicionar uma nova coluna virtual.
    • Column name (Nome da coluna): Nome_Completo (ou outro de sua escolha)
    • App formula: CONCATENATE([Nome_Cliente], " ", [Sobrenome_Cliente])
    • Clique em Save e depois em Done.
Figura 45 - Criando uma coluna virtual
Fonte: Elaborada pelos autores, 2025.

 

Figura 46 - Dando um nome a uma coluna virtual
Fonte: Elaborada pelos autores, 2025.

 

Figura 47 - Criando uma fórmula para concatenar duas colunas
Fonte: Elaborada pelos autores, 2025.

 

b) Data de renovação formatada

  • Crie outra coluna virtual com o nome que preferir.
    • App formula: CONCATENATE("Renovação: ", [Data_Renovacao])
    • Clique em Save e depois em Done.

 

c) Endereço completo

  • Crie mais uma coluna virtual com esta fórmula: CONCATENATE([Rua_Cliente], ", ", [Numero_Endereco_Cliente], ", ", [Bairro_Cliente], ", ", [Cidade_Cliente]). O tipo dessa coluna deve ser Address e as opções Show? e Geocoding enabled? devem ser selecionados, como mostra a figura 48.
Figura 48 - Habilitando a opção Geocoding enabled?
Fonte: Elaborada pelos autores, 2025.

 

d) Estado da renovação (com emojis)

  • Crie mais uma coluna virtual com esta fórmula:

7. Atualizar a visualização Clientes

Volte para a parte Views e clique na visualização Clientes.

  • Troque o campo Primary header (título principal) para mostrar a nova coluna do nome completo.
  • Troque o campo Secondary header (subtítulo) para mostrar a data de renovação formatada.
Figura 49 - Configurando Primary header e Secondary header
Fonte: Elaborada pelos autores, 2025.

8. Ajustar os ícones da tela

Ainda na mesma tela, vá na seção Actions:

  • Troque a opção de Automatic para Manua,
  • Remova os ícones de Delete e Compose Email,
  • Adicione o ícone de mapa (o View Map).

Agora, reorganize a ordem dos ícones a sua escolha, como mostrado na figura 50.

Figura 50 - Configurando os botões na opção Actions
Fonte: Elaborada pelos autores, 2025.

9. Agrupar os clientes por estado da renovação

  • Em Group by, clique em Add e depois escolha a coluna virtual que você criou contendo os estados da renovação.
Fonte 51 - Agrupando os clientes por estado da renovação
Fonte: Elaborada pelos autores, 2025.

Com isso, configuramos a tela que mostra a lista de clientes.

10. Personalizar o formulário de criação de cliente

Agora, personalizaremos o formulário de criação de cliente:

  1. No editor do AppSheet, vá até o menu lateral esquerdo,
  2. Clique na opção "Views" (Visualizações),
  3. Role a tela para baixo até encontrar uma seção chamada "System generated",
  4. Essa seção guarda as telas que o AppSheet criou automaticamente com base nos dados da sua planilha,
  5. Dentro de System generated, procure por uma visualização com o nome "Cliente_Form" (ou algo parecido com isso),
    Essa é a tela usada para adicionar ou editar clientes no app.
  6. Clique sobre Cliente_Form para abrir as configurações dessa tela.

 

  1. Na opção Column order, escolha Manual para poder editar as colunas que aparecem no formulário e em qual ordem. Dessa forma, manteremos as colunas, abaixo, exatamente na ordem em que estão, sendo mostradas a seguir:
    • Informacoes_Pessoais,
    • Texto Informativo 1,
    • Foto_Perfil_Cliente,
    • Nome_Cliente,
    • Sobrenome_Cliente,
    • CPF_Cliente,
    • Telefone_Cliente,
    • Email_Cliente,
    • Data_Renovacao,
    • Informacoes_Endereco,
    • Texto Informativo 2,
    • Rua_Cliente,
    • Numero_Endereco_Cliente,
    • Bairro_Cliente,
    • Cidade_Cliente

 

  1. Passe o mouse em CPF_Cliente e clique no símbolo de edição que aparecerá.
Figura 52 - Abrindo o modo de edição da coluna CPF_Cliente
Fonte: Elaborada pelos autores, 2025.

 

  1. Quando fizer isso, aparecerá uma janela. Em Display mode, escolha Label e, em seguida, em Done.
Figura 53 - Escolhendo o modo Label para a opção Display mode
Fonte: Elaborada pelos autores, 2025.

 

  1. Faça a mesma coisa para Numero_Endereco_Cliente e o formulário estará ajustado, como mostra a figura 54.
Figura 54 - Formulário de cadastro de cliente completo
Fonte: Elaborada pelos autores, 2025.

11. Tela que exibe detalhes de um cliente cadastrado

Agora, como última tela criada neste módulo, faremos a tela que exibe detalhes de um cliente cadastrado, seguindo os passos abaixo:

  1. Assim como fizemos com o formulário, no editor do AppSheet, vá até o menu lateral esquerdo;
  2. Clique na opção "Views", caso ela já não esteja selecionada;
  3. Role a tela para baixo até encontrar uma seção chamada "System generated";
  4. Dentro de System generated, procure por uma visualização com o nome "Cliente_Detail"; (ou algo parecido com isso). Nesse momento, sua tela estará como mostra a figura 55.
Figura 55 - Configuração da tela "Cliente_Detail"
Fonte: Elaborada pelos autores, 2025.

 

  1. Ative a opção Use Card Layout. Você notará que só com isso a tela já ficou com uma aparência mais agradável, mas, mesmo assim, precisaremos fazer mais algumas alterações na opção Header Layout, que apareceu assim que ativamos a opção Use Card Layout.
  2. Em Header Layout, clique no retângulo cinza que representa a disposição da imagem. Quando fizer isso, aparecerá Column to show e Image Fit. Como na tabela Cliente só possui um campo que armazena imagens, que seria a foto do cliente, pode manter a coluna que já aparece automaticamente em Column to show. Como a foto já está ajustada também, pode manter a opção Image Fit como está.
Figura 56 - Ativando "Use Card Layout"
Fonte: Elaborada pelos autores, 2025.

 

  1. Agora clique em Header goes here e com Column to show e certifique-se que a coluna selecionada seja Nome_Cliente;
  2. Depois clique em Subheader goes here e troque a coluna que estiver em Column to show para Sobrenome_Cliente;
  3. Clique em This is a long… e troque a coluna escolhida automaticamente pelo sistema por None;
  4. Clique no botão ACTION 1 e troque a ação que o sistema colocou em On Click por Call Phone (Telefone_Cliente);
  5. Em ACTION 2 e no botão em forma de coração, em On Click escolha None;

 

  1. No botão ao lado do de coração, escolha “View Map (nome da coluna que você criou com o endereço completo do cliente)”. Ao final dessas modificações, a tela de detalhes do cliente deve estar como mostra a figura 57.
Figura 57 - Modificação dos cabeçalhos e botões da tela de detalhes do cliente
Fonte: Elaborada pelos autores, 2025.

 

  1. Como você pode ver, ainda possui informações duplicadas na tela de detalhes. Para retirá-las, teremos que ir em Column order, selecionar Manual e eliminar todas as colunas que não forem Telefone_Cliente, Email_Cliente ou Data_Renovacao, como mostrado na figura 58.
Figura 58 - Finalização da tela "Cliente_Detail"
Fonte: Elaborada pelos autores, 2025.