Criar uma gestão dinâmica de dados na aplicação Qodly: Criar, adicionar, editar e eliminar

Na nossa série sobre 4D Qodly Pro, exploramos como mostrar dados usando um datatable. Hoje, vamos dar o próximo passo: aprender como adicionar, editar e apagar registos. Estas operações são essenciais para criar aplicações dinâmicas e interativas.

Para demonstrar estas funcionalidades, vamos continuar com a nossa aplicação de gestão de avaliação de desempenho. O objetivo é conceber uma tela que permita aos utilizadores adicionar ou modificar informações sobre os empregados. Este projeto está disponível no GitHub para referência.

Aplicação de avaliação de desempenho

Adicionando botões de criação e edição

Ao lado do datatable, adicionamos dois botões: Criar e Editar.

Existem duas opções para apresentar o formulário de introdução de dados:

• Exibição de formulário em linha: Mostra o formulário de entrada de dados ao lado da base de dados quando o utilizador clicar nos botões “Criar” ou “Editar”. O formulário pode ser ativado ou desativado utilizando estados. Os estados condicionais ou não condicionais fornecem flexibilidade e dedicaremos um blogue futuro a este tópico. Por enquanto, se estiver ansioso para aprender sobre estados, consulte esta documentação de visão geral do estado e este blogue Interfaces de usuário dinâmicas com estados de página.
• Exibição de caixa de diálogo modal: Abra o formulário em uma caixa de diálogo modal quando o usuário clicar nos botões “Criar” ou “Editar”. Esta é a abordagem que escolhemos para este tutorial.

Criar uma caixa de diálogo

Para criar uma caixa de diálogo, clique no botão de caixa de diálogo na barra superior.

Tem várias propriedades disponíveis para personalizar a sua caixa de diálogo:

• Sobreposição: Ativa uma sobreposição de tela quando definida como verdadeira.
• Arrastável: Permite o reposicionamento orientado pelo utilizador. Apresenta um ícone de movimento personalizável.
• Fechável: Integra uma função de fecho, acionável através do botão ou clicando fora da caixa de diálogo.
• Animado: Implementa um efeito de cintilação de abertura para dar ênfase visual.

 

Para mais pormenores, consulte a documentação da caixa de diálogo.

Criando um formulário de entrada de dados

Vamos agora criar um formulário de introdução de dados para recolher informações sobre os empregados. Este formulário permitirá que os utilizadores criem ou atualizem entradas na base de dados.

Vinculação do formulário à fonte de dados

Para relembrar, no blogue anterior, criámos uma tabela de dados ligada à fonte de dados employees e ligámos o elemento selecionado à fonte de dados “theEmployee”. Esta fonte de dados “theEmployee” preencherá o formulário de introdução de dados.

Adicionar campos de entrada

Para campos básicos como o nome, apelido, e-mail e emprego, utilizamos o componente de introdução de texto.

Exemplo: Configurar o campo Firstname

• Arraste um componente Text Input para o formulário.
• Defina a propriedade Qodly source para “theEmployee.Firstname”.

 

Repita este processo para os outros campos, ligando-os aos atributos apropriados de “theEmployee”.

Configuração de campos de texto longos

Para campos de texto mais longos, como a descrição, também usamos o componente Entrada de texto, mas configuramo-lo como uma Área de texto:

• Arraste um componente Entrada de texto para o formulário.
• Altere a propriedade Type para Text Area.
• Defina a fonte Qodly para “theEmployee.Description”.

 

Menus pendentes para departamentos e gestores

Para campos como os de departamento e gestor, utilizamos o componente Select Box, que permite aos utilizadores selecionar valores predefinidos.

• Crie a fonte de dados: “department” do tipo entidade,
• Arraste um componente Select Box,
• Defina “theEmployee.Departement” como a fonte Qodly e “department” como o elemento selecionado.

 

• Defina a propriedade de marcador de posição com o texto “Department”,
• Arraste um componente de entrada de texto para dentro da caixa de seleção,
• Associe a entrada de texto à fonte “$This.Name”.

 

Caixa de seleção com aspecto Switch

Para um campo booleano como “isActive”, utilizamos o componente Check box. Para ter um visual moderno, usamos o visual Switch.

• Coloque um componente Check Box no formulário,
• Altere a propriedade Variant para Switch,
• Defina a fonte Qodly para “theEmployee.isActive”.

 

Gerir ações

O 4D Qodly Pro simplifica a criação, o salvamento e a exclusão de registros fornecendo ações padrão embutidas, similares àquelas em 4D.

Exemplo: Ação Salvar

• Adicione um botão e rotule-o como Salvar.
• No painel Events (Eventos), sob a ação On Click (Ao clicar), clique em Add Standard Action (Adicionar ação padrão).
• Insira a fonte de dados (neste caso, theEmployee) e selecione a ação Save.
• Active a caixa de verificação Fornecer feedback para personalizar o tratamento de mensagens de erro inesperadas, determinando o que será apresentado aos utilizadores finais.

 

Funções personalizadas para lógica comercial

Para além das ações padrão, é possível chamar funções personalizadas para operações como criar, eliminar ou guardar registos. Por exemplo:

• Validar dados antes de os guardar.
• Efetuar cálculos para preencher campos adicionais.

 

Nesta aplicação, mantivemos as coisas simples, baseando-nos nas ações padrão. Pode explorar todas as possibilidades das ações padrão na documentação da Qodly.

Atualizar a base de dados após actualizações

Depois de adicionar ou editar um registo, é importante atualizar a base de dados para refletir as alterações. Isto é facilmente conseguido com a ação Recarregar.

Para atualizar a base de dados depois de guardar:

• Adicione a ação Recarregar à fonte de dados dos empregados ligada ao datatable.
• Atribua esta ação ao botão Guardar juntamente com a ação Guardar.

Abrir e fechar a caixa de diálogo modal

Para melhorar a interação do utilizador, associe as ações de diálogo adequadas à caixa de diálogo modal:

• Nos botões Editar e Criar, adicione a ação Abrir a caixa de diálogo.

 

• Dentro da caixa de diálogo, nos botões Guardar e Cancelar, adicione a ação Fechar caixa de diálogo.

 

Próximos passos

Parabéns! Dispõe agora de um sistema totalmente funcional para adicionar, editar e eliminar dados. Para explorar melhor a vasta gama de componentes disponíveis para criar páginas Qodly, consulte a documentação completa sobre os componentes Qodly.

Deixe-nos saber as suas ideias e partilhe o seu progresso no fórum 4D. Fique atento ao nosso próximo blog, onde discutiremos estados para controlar dinamicamente sua UI.