Comment ajouter des composants personnalisés à votre application

Qodly Studio for 4D est un outil puissant pour créer des applications professionnelles complexes et complètes. Bien que ses composants préconstruits soient polyvalents, des solutions personnalisées sont parfois indispensables.

Les composants personnalisés vous permettent de construire une solution sur mesure pour votre propre projet – et de bénéficier de nombreux composants construits par 4D ou la communauté pour enrichir votre interface utilisateur.

Cet article de blog, complété par un tutoriel vidéo, vous guidera à travers le processus d’intégration de composants personnalisés dans votre projet Qodly Studio for the 4D.

Avantages de l’utilisation de composants personnalisés

Les composants personnalisés permettent d’enrichir l’interface utilisateur de Qodly Studio pour les applications 4D, de la même manière que les composants 4D ou les plugins 4D utilisés dans les formulaires 4D.

Voici quelques exemples de composants personnalisés accessibles au public :

• Sélecteur de date

  

• Widgets de classement
  
  

• Sélecteur de couleurs
  
  

• Calendrier (mensuel, hebdomadaire, quotidien)
  
  

• Graphiques
  
  

• Carte

  

• Timeline

  

• Et bien d’autres choses encore !

Les composants personnalisés sont conçus à l’aide de React, offrant une base flexible et puissante aux développeurs.

Comment installer les composants personnalisés Qodly

1. Choisissez le composant : Parcourez le dépôt de composants personnalisés Qodly sur GitHub et sélectionnez le composant que vous souhaitez utiliser.
2. Téléchargez la dernière version : Cliquez sur le composant, naviguez jusqu’à la section Releases et assurez-vous de télécharger la dernière version. Cliquez sur le fichier zip pour le télécharger. Assurez-vous d’être dans la section Release pour le téléchargement, qui télécharge un composant pré-construit, et non la source elle-même.
   
   

3. Depuis le côté Qodly Studio for 4D:
   1. Dans la section Components, cliquez sur le bouton Upload component.
   2. Recherchez le composant que vous venez de télécharger ou utilisez la fonction glisser-déposer.
   3. Cliquez sur Install component, puis sur Reload.
   4. Le composant devrait apparaître dans la liste des Custom sous la section Components.

   

4. Voilà ! C’est terminé : le composant est maintenant prêt pour votre projet.