Criar uma lista interactiva de dados com 4D Qodly Pro

No blogue desta semana, exploramos a criação de uma página dinâmica para apresentação de dados. Vamos concentrar-nos numa aplicação prática: construir um sistema para gerar relatórios anuais de desempenho para os funcionários. Este projeto está disponível para referência no GitHub.

O nosso objetivo é conceber uma interface de fácil utilização que apresente uma lista de empregados com opções para filtrar os resultados por departamento e estado de emprego.

Aplicação de avaliação de desempenho

Aqui está o resultado final:

Configurar as fontes da Qodly

Na seção Fontes da Qodly, vamos definir as diferentes fontes utilizadas pelos nossos componentes.

Neste exemplo, estamos a criar uma fonte intitulada “Empregados”, do tipo seleção de entidade, com base na classe de dados “Empregado”. O valor inicial é definido como todos os empregados.

Nota:

• As fontes agrupadas em “This.page” têm um escopo limitado à página atual. Utilize-as para tratamento de dados temporários ou específicos da página.
• As fontes agrupadas em “Namespaces” têm um escopo global, o que as torna adequadas para dados ou definições partilhadas em várias páginas.

Criando um Datatable

Com 4D Qodly Pro, pode utilizar componentes datatable ou matrix para apresentar efetivamente uma lista de dados. Neste exemplo, usamos o componente datatable, semelhante à caixa de listagem do tipo Coleção ou Seleção de Entidade em 4D.

O campo “Qodly source” permite-lhe atribuir uma seleção de entidade para preencher o datatable. O campo “Elemento selecionado” recupera a entidade selecionada, o que equivale ao “Item atual” na caixa de listagem.

Em seguida, na seção “Columns” (Colunas), podemos adicionar colunas e definir as suas expressões. Por exemplo, definimos uma coluna para “Firstname”, que é um atributo direto da classe de dados “Employee”, e “Department.Name”, que é um atributo relacionado.

Filtragem de dados

Nesta implementação, a lista de empregados pode ser filtrada com base no seu departamento ou no seu estado de empregado ativo.

Função loadEmployees()

No lado 4D, adicionamos uma função na classe “Employee” para retornar uma seleção de entidades de acordo com critérios de filtragem.

Aqui está um trecho de código:

exposed Function loadEmployees($departement: Object; $isActive: Boolean) : cs.EmployeeSelection
If ($departement#Null)
return This .query("ID_Departement = :1 AND isActive = :2"; $departement.ID; $isActive)
Else
return This .query("isActive = :1"; $isActive)
End if

 

Filtrar por estado ativo

Para implementar a filtragem por estado de emprego, criamos uma fonte Qodly de tipo booleano chamada “isActive”. Em seguida, adicionamos uma caixa de verificação ligada a esta fonte.

Para obter um aspeto semelhante a um interruptor, definimos a propriedade “Variant” como Switch.

Depois, a função “loadEmployees” é associada ao evento “On Change” da caixa de verificação.

Para mais informações sobre eventos, consulte a documentação sobre eventos da Qodly.

Filtrar por departamento

Para filtrar por departamento, usamos uma selectBox semelhante a um dropdown em 4D.

Criamos duas fontes de dados:

• “departamentos” do tipo seleção de entidade
• “departamento” do tipo entidade

 

Depois, adicionamos um componente selectBox, definindo “departments” como a fonte Qodly e “department” como o elemento selecionado.

Em seguida, dentro da selectBox, inserimos um componente de texto ligado à fonte “$This.Name”.

Por fim, no evento “On Change” da componente SelectBox, chamamos a função “loadEmployees” com os parâmetros “department” e “year”.

Pronto!

Estilizar o datatable

O passo final é adaptar o datatable às diretrizes de design da sua empresa ou à identidade visual da sua aplicação. Pode personalizá-lo:

• ajustando as propriedades do widget, como cores, bordas e outros estilos,
• ou aplicar uma classe CSS.

A utilização de uma classe CSS oferece a vantagem de manter um estilo consistente em todos os Datatables da sua aplicação, garantindo uma experiência de usuário coesa.

Em uma próxima postagem do blog, exploraremos as várias possibilidades de uso de CSS no Qodly Studio. Se não conseguir esperar, a classe CSS utilizada na aplicação de Avaliação de Desempenho chama-se “DataTable”.

Próximas etapas

Parabéns! Tem agora uma página funcional capaz de apresentar e filtrar os dados dos empregados. Este sistema interativo fornece uma base sólida para o tratamento dinâmico de dados em aplicações Qodly.

Para melhorar a sua compreensão das tabelas de dados e das suas ações, explore os seguintes recursos:

• Documentação sobre o componente datable,
• Documentação da ação,
• Veja o nosso vídeo sobre datatables.

 

Boa programação e até ao próximo blogue!