Crear una lista interactiva de datos con 4D Qodly Pro

En el blog de esta semana, exploraremos la creación de una página dinámica para mostrar datos. Nos centraremos en una aplicación práctica: la construcción de un sistema para generar informes anuales de rendimiento para los empleados. Este proyecto está disponible como referencia en GitHub.

Nuestro objetivo es diseñar una interfaz fácil de usar que muestre una lista de empleados con opciones para filtrar los resultados por departamento y situación laboral.

Aplicación de evaluación del rendimiento

Aquí está el resultado final:

Configuración de Qodly Sources

En la sección Qodly Sources, definiremos las diferentes fuentes utilizadas por nuestros componentes.

En este ejemplo, creamos una fuente titulada «employees», de tipo selección de entidad, basada en la clase de datos «Employee». El valor inicial se fija a todos los empleados.

Nota:

• Las fuentes agrupadas en «This.page» tienen un alcance limitado a la página actual. Utilícelas para manejar datos temporales o específicos de la página.
• Las fuentes agrupadas en «Namespaces» tienen un alcance global, lo que las hace adecuadas para datos o parámetros compartidos a través de múltiples páginas.

Creación de una tabla de datos

Con 4D Qodly Pro, puede utilizar componentesde tipo datos o matriz para presentar eficazmente una lista de datos. En este ejemplo, utilizamos el componente datatable, similar al listbox de tipo Collection o Entity Selection en 4D.

El campo «Qodly source» permite asignar una selección de entidades para llenar la tabla de datos. El campo «Selected Element» recupera la entidad seleccionada, que equivale al «Elemento actual» en el listbox.

A continuación, en la sección «Columns», podemos añadir columnas y definir sus expresiones. Por ejemplo, definimos una columna para «Firstname», que es un atributo directo de la clase de datos «Employee», y «Departament.Name», que es un atributo relacionado.

Filtrado de datos

En esta implementación, la lista de empleados se puede filtrar en función de su departamento o de su estado de empleado activo.

Función loadEmployees()

Del lado 4D, añadimos una función en la clase «Employee» para devolver una selección de entidades según los criterios de filtrado.

He aquí un fragmento 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 activo

Para implementar el filtrado por estado de empleo, creamos una source Qodly de tipo booleano denominada «isActive». A continuación, añadimos una casilla de verificación vinculada a esta source.

Para conseguir una apariencia de interruptor, definiremos la propiedad «Variant» como Switch.

A continuación, la función «loadEmployees» se asocia al evento «On Change» de la casilla de verificación.

Encuentre más detalles sobre los eventos en la documentación de eventos de Qodly.

Filtrar por Departamento

Para filtrar por departamento, utilizamos un selectBox similar a una lista desplegable en 4D.

Creamos dos fuentes de datos:

• «departements» de tipo entity selection
• «departement» de tipo entidad

 

A continuación, añadimos un componente selectBox estableciendo «departements» como source Qodly y «departement» como elemento seleccionado.

A continuación, dentro del selectBox, insertamos un componente de texto vinculado a la source «$This.Name».

Finalmente, en el evento «On Change» del componente SelectBox, llamamos a la función «loadEmployees» con los parámetros «department» y «year».

¡Listo!

Estilizar la tabla de datos

El último paso consiste en adaptar la tabla de datos a las directrices de diseño de su empresa o a la identidad visual de su aplicación. Puede personalizarla

• ajustando las propiedades del widget, como colores, bordes y otros estilos,
• o aplicar una clase CSS.

Usar una clase CSS ofrece la ventaja de mantener un estilo consistente en todas las tablas de datos de su aplicación, asegurando una experiencia de usuario homogénea.

En una próxima entrada del blog, exploraremos las diversas posibilidades de uso de CSS en Qodly Studio. Si no puede esperar, la clase CSS utilizada en la aplicación Performance Review se llama «DataTable».

Pasos siguientes

¡Enhorabuena! Ahora tiene una página funcional capaz de mostrar y filtrar los datos de los empleados. Este sistema interactivo ofrece una base sólida para el manejo dinámico de datos en aplicaciones Qodly.

Para mejorar su comprensión de las tablas de datos y sus acciones, explore los siguientes recursos:

• Documentación sobre el componente datable,
• Documentación sobre la acción,
• Vea nuestro vídeo sobre datatables.

 

Buena programación y ¡hasta el próximo blog!