Create an Interactive List of Data with 4D Qodly Pro

In this week’s blog, we explore the creation of a dynamic page for displaying data. We will focus on a practical application: building a system to generate annual performance reports for employees. This project is available for reference on GitHub.

Our aim is to design a user-friendly interface that displays a list of employees with options to filter results by department and employment status.

Performance Review Application

Here’s the final result:

Setting Up Qodly Sources

In the Qodly Sources section, we will define the different sources used by our components.

In this example, we are creating a source titled “Employees”, of type entity selection, based on the data class “Employee”. The initial value is set to all employees.

Note:

• Sources grouped under “This.page” have a limited scope to the current page. Use these for temporary or page-specific data handling.
• Sources grouped under “Namespaces” have a global scope, making them suitable for data or settings shared across multiple pages.

Creating a Datatable

With 4D Qodly Pro, you can utilize datatable or matrix components to effectively present a list of data. In this example, we use the datatable component, similar to the listbox of type Collection or Entity Selection in 4D.

The “Qodly source” field allows you to assign an entity selection to populate the datatable. The “Selected Element” field retrieves the selected entity, which is equivalent to the “Current item” in the listbox.

Then, in the “Columns” section, we can add columns and define their expressions. For instance, we define a column for “Firstname”, which is a direct attribute of the “Employee” dataclass, and “Department.Name”, which is a related attribute.

Filtering Data

In this implementation, the list of employees can be filtered based on their department or their active employee status.

Function loadEmployees()

On the 4D side, we add a function in the “Employee” class to return an entity selection according to filtering criteria.

Here’s a code snippet:

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

 

Filter by Active Status

To implement filtering by employment status, we create a Qodly source of type boolean named “isActive”, then we set the initial value to true. Next, we add a checkbox linked to this source.

To achieve a switch-like appearance, we will set the “Variant” property to Switch.

Then, the “loadEmployees” function is associated with the “On Change” event of the checkbox.

Find further details on events in the Qodly Events Documentation.

Filter by Department

To filter by department, we use a selectBox similar to a dropdown in 4D.

We create two data sources:

• “departments” of type entity selection
• “department” of type entity

 

Then, we add a selectBox component by setting “departments” as the Qodly source and “department” as the selected element.

Next, inside the selectBox, we insert a text component linked to the source “$This.Name”.

Finally, on the “On Change” event of the SelectBox component, we call the “loadEmployees” function with the parameters “department” and “year”.

Voilà!

Styling datatable

The final step is to adapt the datatable to match your company’s design guidelines or your application’s visual identity. You can either customize it:

• by adjusting the widget’s properties, such as colors, borders, and other styles,
• or apply a CSS class.

Using a CSS class offers the advantage of maintaining a consistent style across all Datatables in your application, ensuring a cohesive user experience.

In an upcoming blog post, we will explore the various possibilities of using CSS in Qodly Studio. If you can’t wait, the CSS class used in the Performance Review application is called “DataTable”.

Next Steps

Congratulations! You now have a functional page capable of displaying and filtering employee data. This interactive system provides a strong foundation for dynamic data handling in Qodly applications.

To further enhance your understanding of datatables and their actions, explore the following resources:

• Documentation on the datable component, 
• Documentation of the action, 
• Watch our video on datatables.

 

Happy coding, and see you in the next blog!