Editar | Versões | Fórum de Discussão
Prazos para Envio
Desenvolvendo Apps Low Code - Adicionando Produtos ao Carrinho
Este tópico é uma continuação do tópico anterior Desenvolvendo Apps Low Code - Adicionando Tabelas e Criando Novas Guias. Clique aqui para voltar e depois retorne a este tópico.
Neste tópico, vamos configurar uma ação para que, ao clicar no botão “Adicionar ao Carrinho”, uma nova linha seja adicionada na tabela de Pedidos.
Etapas desta Série
Veja abaixo as etapas desta série
- Introdução e Primeiros Passos na Plataforma Glide
- Configurando o Design das Telas
- Adicionando a Tela de Pedidos
- Adicionando Produtos ao Carrinho
- Criando Relacionamentos Entre Pedidos, Produtos e Clientes
Criando uma Ação para o Botão “Adicionar ao Carrinho”.
Retorne a visualização do aplicativo clicando no celuar ao topo.
Clique no botão no painel esquerdo e clique sobre a action “Show Notification”, no painel do lado direto.
Na tela “Configure Action”, clique novamente em “Show Notification” e depois em “+ create new action…” para criarmos uma nova ação para o botão.
Esse recurso permite criarmos visualmente os passos que serão executados quando o botão quando for clicado. Repare que, a ação configurada por padrão é a “Open Link” que abre um link no navegador no clique do botão. Vamos modificar essa ação. Clique em “Open Link”.
Na tela “Configure Action” que abrir, clique na ação “Open Link” e troque para a ação “Add Row”.
Selecione a tabela de “Pedidos”, onde adicionaremos uma linha referente ao produto que foi selecionado.
Para configurar o valor que vai entrar na coluna “Usuário”, clique nos três pontinhos na parte direita e selecione “User’s email addresses”
De forma análoga, selecione o valor “Row ID” do produto para entrar como valor da coluna “ID Produto” na tabela de pedidos:
Neste ponto, configuramos uma ação para fazer o seguinte:
“Toda vez que um usuário clicar no botão Adicionar ao Carrinho, adicione uma nova linha tabela de Pedidos tendo o email do usuário logado na coluna Usuário e o identificador do produto na coluna ID Produto.”
Para finalizar a ação, vamos emitir uma mensagem informando que o produto foi adicionado ao carrinho com sucesso. Posicione o cursos sobre a ação “Add Row” e clique no botão “+” para adicionarmos uma segunda ação que será executada após ela.
Na tela “COnfigure Action”, selecione a opção “Show Notification”
Agora, adicione uma mensagem de sucesso no campo “Message”.
Para finalizar, na parte direita da tela, forneça o nome da ação e clique no botão “Save”.
Agora, vamos testar a ação configurada para o botão “Adicionar ao Carrinho”. Clique uma vez nele, observe a mensagem que vai aparecer. Após isso, retorne a tabela de Pedidos e veja que foi adicionada uma linha a ela com o email do usuário logado e o identificador do produto selecionado!!
Caso você queira visualizar a tabela de pedidos no aplicativo, retorne para a visualização do aplicativo e clique no “+” na parte superior esquerda, ao lado de “Tabs”. Depois, clique em “New Tab”.
No painel direito, configure o campo “Source” para a tabela “Pedidos”, o label para “Carrinho” ou “Pedidos”. Mude também o “Tab Icon” para um mais adequado.
Repare que as informações referente aos pedidos cadastrados são listadas nessa tela.
Repare que os pedidos de todos os usuários são apresentados nessa tela, quando somente os pedidos de cada usuário é que deveriam ser mostrados. Nas próxima etapa, configuraremos a guia carrinho para mostrar somente os pedidos do usuário logado e permitir uma melhor visualização dessa tela.
No próximo tópico vamos melhorar essa visualização de pedidos e aprender como criar relacionamentos entre tabelas da nossa base de dados. Clique em “Próxima Etapa” e aprenda fazendo!