Construire une gestion dynamique des données dans l’application Qodly : Créer, ajouter, modifier et supprimer

Dans notre série sur 4D Qodly Pro, nous avons exploré comment afficher des données à l’aide d’une table de données. Aujourd’hui, nous allons passer à l’étape suivante : apprendre à ajouter, modifier et supprimer des enregistrements. Ces opérations sont essentielles pour créer des applications dynamiques et interactives.

Pour démontrer ces fonctionnalités, nous allons poursuivre avec notre application de gestion de l’évaluation des performances. L’objectif est de concevoir un écran permettant aux utilisateurs d’ajouter ou de modifier des informations sur les employés. Ce projet est disponible sur GitHub pour référence.

Application d’évaluation des performances

Ajout des boutons de création et d’édition

A côté de la table de données, nous ajoutons deux boutons : Create et Edit.

Vous avez deux options pour afficher le formulaire de saisie de données :

• Affichage du formulaire en ligne: Affiche le formulaire de saisie à côté du tableau de données lorsque l’utilisateur clique sur les boutons « Créer » ou « Modifier ». Le formulaire peut être activé ou désactivé à l’aide d’états. Les états conditionnels ou non conditionnels offrent une grande flexibilité, et nous consacrerons un prochain blog à ce sujet. Pour l’instant, si vous souhaitez en savoir plus sur les états, reportez-vous à cette documentation sur la présentation des états et à ce blog sur les interfaces utilisateur dynamiques avec les états de page.
• Affichage d’une boîte de dialogue modale: Ouvrez le formulaire dans une boîte de dialogue modale lorsque l’utilisateur clique sur les boutons « Créer » ou « Modifier ». C’est l’approche que nous avons choisie pour ce tutoriel.

Créer une boîte de dialogue

Pour créer une boîte de dialogue, cliquez sur le bouton « Dialogs » dans la barre supérieure.

Vous disposez de plusieurs propriétés pour personnaliser votre dialogue :

• Overlay : Active une superposition d’écran lorsqu’elle est définie sur true (vrai).
• Draggable : Permet le repositionnement par l’utilisateur. L’icône de déplacement est personnalisable.
• Closable : Intègre une fonction de fermeture, activable via le bouton ou en cliquant en dehors de la boîte de dialogue.
• Animated : Met en œuvre un effet de scintillement à l’ouverture pour accentuer l’aspect visuel.

 

Pour plus de détails, veuillez vous référer à la documentation de la boîte de dialogue.

Création d’un formulaire de saisie de données

Nous allons maintenant créer un formulaire de saisie de données pour recueillir des informations sur les employés. Ce formulaire permettra aux utilisateurs de créer ou de mettre à jour des entrées dans la base de données.

Lier le formulaire à la source de données

Pour rappel, dans le blog précédent, nous avons créé une table de données liée à la source de données employees et connecté l’élément sélectionné à la source de données « theEmployee ». Cette source de données « theEmployee » alimentera le formulaire de saisie.

Ajout de champs de saisie

Pour les champs de base tels que le prénom, le nom, l’adresse électronique et le service, nous utilisons le composant de saisie de texte.

Exemple : Configuration du champ Prénom

• Faites glisser un composant de saisie de texte dans le formulaire.
• Définissez la propriété Qodly source à « theEmployee.Firstname ».

 

Répétez ce processus pour les autres champs en les liant aux attributs appropriés de « theEmployee ».

Configuration des champs de texte longs

Pour les champs de texte plus longs, comme la description, nous utilisons également le composant Saisie de texte, mais nous le configurons comme une zone de texte:

• Faites glisser un composant Input text dans le formulaire.
• Modifiez la propriété Type en text area.
• Définissez la source Qodly sur « theEmployee.Description ».

 

Menus déroulants pour les départements et les responsables

Pour les champs tels que les champs département et manager, nous utilisons le composant Select Box, qui permet aux utilisateurs de sélectionner des valeurs prédéfinies.

• Créez la source de données : « département » de type entité,
• Faites glisser un composant Select Box,
• Définissez « theEmployee.Departement » comme source de données et « department » comme élément sélectionné.

 

• Définissez la propriété placeholder avec le texte « Département »,
• Faites glisser un composant de saisie de texte à l’intérieur de la boîte de sélection,
• Lier l’entrée de texte à la source « $This.Name ».

 

Case à cocher avec l’apparence d’un commutateur

Pour un champ booléen comme « isActive », nous utilisons le composant Check box. Pour obtenir un aspect moderne, nous utilisons le look Switch.

• Insérez un composant Check Box dans le formulaire,
• Changez la propriété Variant en Switch,
• Définir la source Qodly à « theEmployee.isActive ».

 

Gestion des actions

4D Qodly Pro simplifie la création, l’enregistrement et la suppression d’enregistrements en fournissant des actions standard intégrées, similaires à celles de 4D.

Exemple d’action : Action Enregistrer

• Ajoutez un bouton et nommez-le Enregistrer.
• Dans le panneau Evénements, sous l’action Au clic, cliquez sur Ajouter une action standard.
• Saisissez la source de données (dans ce cas, l’employé) et sélectionnez l’action Enregistrer.
• Activez la case à cocher Fournir un retour d’information pour personnaliser le traitement des messages d’erreur inattendus et déterminer ce qui sera affiché aux utilisateurs finaux.

 

Fonctions personnalisées pour la logique métier

Outre les actions standard, vous pouvez appeler des fonctions personnalisées pour des opérations telles que la création, la suppression ou l’enregistrement d’enregistrements. Par exemple :

• Valider les données avant de les enregistrer.
• Effectuer des calculs pour remplir des champs supplémentaires.

 

Dans cette application, nous avons gardé les choses simples en nous appuyant sur les actions standard. Vous pouvez explorer toutes les possibilités des actions standard dans la documentation de Qodly.

Actualisation de la table de données après les mises à jour

Après avoir ajouté ou modifié un enregistrement, il est important de rafraîchir la table de données pour refléter les changements. Ceci est facilement réalisable avec l’action Recharger.

Pour actualiser le tableau de données après l’enregistrement :

• Ajoutez l’action Reload à la source de données employees liée à la table de données.
• Attribuez cette action au bouton Enregistrer en même temps que l’action Enregistrer.

Ouverture et fermeture de la boîte de dialogue modale

Pour améliorer l’interaction avec l’utilisateur, associez les actions de dialogue appropriées à la boîte de dialogue modale :

• Sur les boutons Edit et Create, ajoutez l’action Ouvrir la boîte de dialogue.

 

• À l’intérieur de la boîte de dialogue, sur les boutons Save et Cancel, ajoutez l’action Fermer la boîte de dialogue.

 

Prochaines étapes

Nous vous félicitons ! Vous disposez maintenant d’un système entièrement fonctionnel pour ajouter, modifier et supprimer des données. Pour explorer davantage le large éventail de composants disponibles pour construire des pages Qodly, consultez la documentation complète sur les composants Qodly.

Faites-nous part de vos réflexions et partagez vos progrès sur le forum 4D. Restez à l’écoute pour notre prochain blog, où nous parlerons des états pour contrôler dynamiquement votre interface utilisateur.