Étendez votre application Qodly avec des composants personnalisés

4D Qodly Pro offre déjà une large gamme de composants natifs pour vous aider à concevoir vos applications. Mais saviez-vous que vous pouviez aller encore plus loin ? Grâce aux composants personnalisés développés par la communauté, vous pouvez enrichir vos projets avec des fonctionnalités sur mesure !

Ces composants personnalisés vous permettent d’étendre les capacités de 4D Qodly Pro en ajoutant des fonctionnalités personnalisées, un peu comme les plugins et les composants dans 4D.

Dans ce blog, nous allons explorer comment utiliser et intégrer ces composants, avec plusieurs cas d’utilisation réels de notre application Performance Review.

Application d’évaluation des performances

Qu’est-ce qu’un composant personnalisé ?

Les composants personnalisés sont des blocs de construction créés par les utilisateurs pour répondre à des besoins spécifiques ou ajouter des fonctionnalités non couvertes par les composants intégrés de 4D Qodly Pro. Développés en React, ils constituent une base puissante et flexible pour les développeurs.

L’intégration des Custom Components dans Qodly Studio offre plusieurs avantages :

• Extensibilité: Personnalisez vos pages pour répondre précisément aux exigences de votre projet.
• Réutilisation: Partagez vos composants entre différents projets ou avec la communauté Qodly.
• Efficacité: Gagnez du temps en utilisant des composants préconstruits au lieu de partir de zéro.

Comment utiliser un composant personnalisé ?

1. Choisir le composant
   • Parcourez le dépôt GitHub des composants personnalisés et sélectionnez celui dont vous avez besoin.
2. Télécharger la dernière version
   • Cliquez sur le composant choisi.
   • Allez dans la section Releases.
   • Téléchargez la dernière version (fichier ZIP). Assurez-vous que vous êtes dans la section Releases pour obtenir la version précompilée, et non le code source.
3. Installer dans Qodly Studio
   • Dans la section Components, cliquez sur Upload component.
   • Glissez-déposez ou sélectionnez le fichier ZIP téléchargé.
   • Cliquez sur Installer le composant, puis sur Recharger.
   • Le composant apparaît alors dans la section Custom des composants disponibles.
   • Vous pouvez maintenant le glisser-déposer directement sur une page.

 

Pour plus d’informations, consultez la documentation officielle : Télécharger un composant personnalisé.

Comment créer votre propre composant personnalisé ?

Si vous ne trouvez pas de composant qui réponde à vos besoins, vous pouvez créer le vôtre.

L’API de 4D Qodly Pro simplifie la création de composants personnalisés dans React grâce à son outil CLI dédié, @qodly/cli. Cet outil rationalise l’initialisation d’un projet React, permettant aux développeurs de concevoir et de partager des composants réutilisables. Une fois intégrés, ces composants peuvent être ajoutés aux pages par un simple glisser-déposer.

Consultez la documentation officielle pour plus de détails.

Comment les composants personnalisés peuvent-ils améliorer votre application ?

Dans l’application Performance Review, nous avons intégré plusieurs composants personnalisés afin d’améliorer l’expérience de l’utilisateur. Voici quelques exemples concrets :

• Afficher un document PDF avec le composant pdfViewer.
• Télécharger un fichier à l’aide du composant fileDownload.
• Créer un menu dynamique avec le composant Popover.
• Construire un sélecteur d’année en combinant les composants Popover et DatePicker.

 

Afficher des documents : Intégrer un PDF avec pdfViewer

Nous utilisons le composant pdfViewer.

Étapes à suivre pour intégrer une visionneuse de PDF :

• Téléchargez et installez le composant pdfViewer comme décrit dans la section précédente.
• Faites glisser le composant sur votre page et liez-le à la source de données « selectedReview.DocumentPDF », qui contient le PDF.

 

• Le document est alors affiché dynamiquement sur la page.

Ce composant est particulièrement utile pour afficher des documents générés dynamiquement à partir d’un modèle 4D Write Pro et des données d’une base de données.

Télécharger un fichier PDF avec le composant fileDownload

Le composant fileDownload permet de télécharger des documents.

Etapes à suivre pour créer une option de téléchargement de fichier :

• Installez le composant fileDownload.
• Faites glisser le composant sur votre page et liez la source de données qui contient le fichier PDF à télécharger. Dans le cas présent, la source de données est « selectedReview.DocumentPDF ».

 

• Une fois le composant configuré, un simple clic permet aux utilisateurs de télécharger le fichier.

 

Créer un menu interactif avec Popover

Dans notre application d’évaluation des performances, nous avons intégré un menu en haut de la page, placé au-dessus d’un widget Page Loader. Ce menu détermine dynamiquement la page à charger dans le composant Page Loader. Nous avons créé le menu avec le composant popover.

Etapes pour créer le menu :

• Installez le composant popover.
• Faites glisser et déposez le composant popover sur votre page.
• Dans la section menu, insérez un texte statique intitulé Ressources humaines.
• Dans la section au-dessus, insérez trois boutons nommés Collaborateur, Examens et Formations.

 

 

Avec quelques ajustements de style, nous obtenons un menu fonctionnel et ergonomique :

En peaufinant le design, en ajustant l’espacement, les couleurs et les effets de survol, vous pouvez créer une expérience de navigation transparente et conviviale dans votre application Qodly.

Créer un DatePicker personnalisé avec Popover et DatePicker

4D Qodly Pro offre un composant natif pour la sélection des dates. Cependant, dans l’application Performance Review, nous avons choisi d’utiliser le composant DatePicker personnalisé, car sa conception répondait mieux à nos besoins. Cela nous a également permis de démontrer la combinaison des composants personnalisés.

Étapes à suivre pour créer une entrée d’année personnalisée :

• Faites glisser et déposez une boîte de style sur votre page.
• Ajoutez un texte d’entrée formaté en chiffres à l’intérieur de la boîte de style.
• Insérez un composant popover à l’intérieur de la boîte de style.
• Dans la section menu du popover, insérez une icône pour ouvrir le sélecteur de date.
• Dans la section over, insérez le composant DatePicker.
• Ajoutez la source de données au texte d’entrée et au DatePicker.

Après quelques ajustements de style (bordures, couleurs, etc.), voici le résultat :

Cette approche combine flexibilité et conception personnalisée, ce qui améliore l’expérience de l’utilisateur.

Prochaines étapes

Les composants personnalisés sont une solution puissante pour améliorer vos applications Qodly et répondre à des besoins spécifiques sans développement complexe. Explorez le dépôt GitHub des composants pour découvrir encore plus de possibilités.

Si vous avez créé votre propre composant, partagez-le avec la communauté Qodly !

Pour aller plus loin, regardez cette vidéo tutorielle : Comment ajouter des composants personnalisés à votre application Qodly.