Créer une liste interactive de données avec 4D Qodly Pro

Dans le blog de cette semaine, nous explorons la création d’une page dynamique pour afficher des données. Nous nous concentrerons sur une application pratique : la construction d’un système permettant de générer des rapports de performance annuels pour les employés. Ce projet est disponible pour référence sur GitHub.

Notre objectif est de concevoir une interface conviviale qui affiche une liste d’employés avec des options pour filtrer les résultats par département et par statut d’emploi.

Application d’évaluation des performances

Voici le résultat final :

Configuration des sources Qodly

Dans la section Qodly Sources, nous allons définir les différentes sources utilisées par nos composants.

Dans cet exemple, nous créons une source intitulée « employees », de type sélection d’entité, basée sur la classe de données « Employee ». La valeur initiale est fixée à tous les employés.

Remarque :

• Les sources regroupées sous « This.page » ont une portée limitée à la page en cours. Utilisez-les pour le traitement de données temporaires ou spécifiques à une page.
• Les sources regroupées sous « Namespaces » ont une portée globale, ce qui les rend appropriées pour les données ou les paramètres partagés entre plusieurs pages.

Création d’une table de données

Avec 4D Qodly Pro, vous pouvez utiliser des composants de type tableau de données ou matrice pour présenter efficacement une liste de données. Dans cet exemple, nous utilisons le composant datatable, similaire à la listbox de type Collection ou Sélection d’entité dans 4D.

Le champ « Qodly source » vous permet d’assigner une sélection d’entités pour remplir la table de données. Le champ « Selected Element » récupère l’entité sélectionnée, ce qui équivaut à l' »Élément courant » dans la listbox.

Ensuite, dans la section « Columns », nous pouvons ajouter des colonnes et définir leurs expressions. Par exemple, nous définissons une colonne pour « Firstname », qui est un attribut direct de la classe de données « Employee », et « Department.Name », qui est un attribut connexe.

Filtrage des données

Dans cette implémentation, la liste des employés peut être filtrée en fonction de leur département ou de leur statut d’employé actif.

Fonction loadEmployees()

Du côté de 4D, nous ajoutons une fonction dans la classe « Employee » pour renvoyer une sélection d’entités en fonction des critères de filtrage.

Voici un extrait de code :

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

 

Filtre par statut actif

Pour mettre en œuvre le filtrage par statut d’emploi, nous créons une source Qodly de type booléen nommée « isActive », puis nous fixons la valeur initiale à true. Ensuite, nous ajoutons une case à cocher liée à cette source.

Pour obtenir un aspect semblable à celui d’un interrupteur, nous définissons la propriété « Variant » sur « Switch ».

Ensuite, la fonction « loadEmployees » est associée à l’événement « On Change » de la case à cocher.

Pour plus de détails sur les événements, consultez la documentation sur les événements de Qodly.

Filtre par département

Pour filtrer par département, nous utilisons une selectBox similaire à une liste déroulante dans 4D.

Nous créons deux sources de données :

• « departements » de type entity selection
• « département » de type entité

 

Ensuite, nous ajoutons un composant selectBox en définissant « departements » comme source Qodly et « department » comme élément sélectionné.

Ensuite, à l’intérieur de la selectBox, nous insérons un composant texte lié à la source « $This.Name ».

Enfin, sur l’événement « On Change » du composant SelectBox, nous appelons la fonction « loadEmployees » avec les paramètres « department » et « year ».

Voilà !

Styliser le datatable

La dernière étape consiste à adapter le datatable aux lignes directrices de votre entreprise en matière de conception ou à l’identité visuelle de votre application. Vous pouvez soit le personnaliser :

• en ajustant les propriétés du widget, telles que les couleurs, les bordures et autres styles,
• soit appliquer une classe CSS.

L’utilisation d’une classe CSS présente l’avantage de maintenir un style cohérent pour toutes les tables de données de votre application, ce qui garantit une expérience utilisateur homogène.

Dans un prochain article de blog, nous explorerons les différentes possibilités d’utilisation de CSS dans Qodly Studio. Si vous ne pouvez pas attendre, la classe CSS utilisée dans l’application Performance Review s’appelle « DataTable ».

Prochaines étapes

Nous vous félicitons ! Vous disposez maintenant d’une page fonctionnelle capable d’afficher et de filtrer les données relatives aux employés. Ce système interactif constitue une base solide pour le traitement dynamique des données dans les applications Qodly.

Pour mieux comprendre les tables de données et leurs actions, consultez les ressources suivantes :

• Documentation sur le composant datable,
• Documentation sur l’action,
• Regardez notre vidéo sur les tables de données.

 

Bon codage et rendez-vous au prochain blog !