Créer un composant réutilisable : Account Card

Introduction

Un composant réutilisable est un ensemble complexe de composants et d’éléments de style, enregistré dans votre toolbox. Il y a deux raisons principales pour lesquelles vous voudriez en créer un :

• pour l’utiliser sur plus d’une page

• pour simplifier la structure d’une page tout en concevant la section spécifique dans le composant réutilisable

Dans cet exemple, nous créons une account card. Elle sera utilisée dans la page de détail de l’opportunité et dans une version 2 de Account List.

Étapes à suivre

1. Configurer le composant réutilisable Account Card

Après avoir ajouté notre champ « customer », de notre Aggregate Opportunity, à notre page « opportunity », nous allons créer notre composant réutilisable :

a. Ouvrez « more » dans votre panneau Project Explorer

b. Cliquez avec le bouton droit sur « Components »

c. Sélectionnez « add component »

d. Saisissez le nom de votre composant réutilisable.

Pour notre exemple, nous le nommerons « account card »

le nom doit être unique à ce projet.

2. Associer des données au composant réutilisable

Nous devons associer des données à l’éditeur du composant réutilisable avec le type de données que nous prévoyons utiliser. Pour notre exemple, il s’agit des données d’un compte. Pour appliquer notre source de données et nous assurer que cela a fonctionné, nous ajouterons le champ « name » du compte et ouvrirons le designer mode.

Dans « set data source », nous entrons :

db.Account.all.first

3. Ajouter des champs et du style à l’Account Card

Ajoutez des champs et du style pour créer l’apparence souhaitée pour votre composant réutilisable. Ici, nous avons ajouté le nom du compte, son site web, la ville et la province, la relation, ainsi que l’industrie et une icône.

4. Implémenter l’affichage conditionnel pour les comptes VIP

Pour afficher uniquement l’icône « star » lorsque le compte est VIP, nous avons ajouté un comportement « show/hide » :

5. Glisser-déposer le composant réutilisable sur la page

Notre composant réutilisable peut maintenant être trouvé dans la Toolbox, sous « My Project ». Il suffit de le glisser-déposer sur notre page opportunity et d’ajouter un comportement « set component data », de type field, au composant. Pour notre exemple, le champ est « customer ».

6. Ajouter la commande Change Customer au composant

Nous ajouterons une commande « change customer » à notre composant, afin que lorsqu’un utilisateur clique dessus, il puisse changer le client associé à l’opportunité. Gardez à l’esprit que le comportement Execute a Command doit être avant celui de Set Component Data.

7. Permettre l’ajout d’un client pour les comptes non assignés

Nous inclurons une option pour ajouter un client si aucun n’a encore été défini. Pour ce faire, j’ajoute un composant Text de la toolbox (avec la valeur « Add customer ») au-dessus de mon composant Account Card et j’ajoute un comportement Execute a Command, on click, Change Customer. Pour que le texte ne soit visible que lorsqu’aucun compte n’a été sélectionné, nous ajoutons également un comportement Show/Hide. Pour masquer le composant Account Card lorsqu’il n’est pas nécessaire, nous ajoutons aussi un comportement Show/Hide dessus, que nous plaçons en haut de la liste des comportements qui lui sont appliqués.

Conclusion

La création d’un composant réutilisable account card simplifie le processus d’ajout d’informations de compte structurées et stylisées sur plusieurs pages. En associant les données pertinentes et en incorporant des comportements flexibles comme les conditions show/hide et les commandes, ce composant réutilisable améliore l’efficacité de la conception de page et l’interaction utilisateur.