Composant dynamique

Le composant Composant dynamique Avonni vous permet d’intégrer un composant dynamique dans un autre.

Aperçu

Le composant Dynamic Component est un composant conteneur qui vous permet d'intégrer d'autres composants dynamiques Avonni. C'est la clé pour créer des composants réutilisables et construire des mises en page complexes et hiérarchiques dans les composants dynamiques Avonni. Considérez-le comme un moyen d'insérer un composant préconçu (ou une section d'un composant) dans un autre composant.

Cela offre plusieurs avantages essentiels :

• Réutilisabilité : Construire un élément d'interface utilisateur complexe (par ex., une liste associée personnalisée, un formulaire spécialisé, un mini-tableau de bord) une seule fois en tant que composant dynamique séparé. Ensuite, utilisez le composant Dynamic Component pour intégrer ce composant préconçu à plusieurs endroits – sur différentes pages d'enregistrement, pages d'application ou même à l'intérieur d'autres composants dynamiques.

• Modularité : Décomposez de grands composants complexes en morceaux plus petits et plus faciles à gérer. Cela rend vos composants plus faciles à comprendre, à maintenir et à mettre à jour.

• Organisation : Établissez une structure hiérarchique claire pour votre interface, en regroupant logiquement les éléments connexes.

• Encapsulation : Le fonctionnement interne du composant imbriqué est caché au composant parent. Cela réduit la complexité et évite les conflits de noms.

Comment ça fonctionne

1. Créer le composant « Enfant » : Tout d'abord, vous créez le composant dynamique que vous souhaitez intégrer (le composant « enfant »). Ce composant dynamique ordinaire est construit avec n'importe quelle combinaison de composants Avonni. Définissez les élément d'entrée et sorties dont vous avez besoin pour communiquer avec le composant parent.

2. Ajouter le composant Dynamic Component : Dans votre composant dynamique « parent » (là où vous souhaitez intégrer l'enfant), glissez un composant Dynamic Component composant depuis la bibliothèque de composants sur la zone de travail.

3. Sélectionner le composant à afficher : Dans le panneau Propriétés du composant Dynamic Component, vous trouverez un paramètre (étiqueté « Name »). Utilisez le sélecteur de composants pour choisir directement la nom du composant dynamique que vous avez créé à l'étape 1.

Cas d'utilisation

• Listes associées réutilisables : Créez une fois un composant « Contacts associés » personnalisé, puis utilisez le composant Dynamic Component pour l'intégrer sur les pages d'enregistrement Account, Opportunity ou d'autres pages. Transmettez l'ID de l'enregistrement parent comme variable d'entrée pour filtrer la liste associée.

• Formulaires personnalisés : Construisez des formulaires spécialisés en tant que composants dynamiques séparés, puis intégrez-les dans d'autres composants selon les besoins.

• Mini-tableaux de bord : Créez de petits tableaux de bord autonomes (par ex., un graphique et un tableau récapitulatif) en tant que composants dynamiques, puis intégrez-les dans des tableaux de bord plus vastes ou sur des pages d'enregistrement.

• Mises en page complexes : Décomposez une mise en page de page complexe en sections plus petites et plus faciles à gérer, chacune implémentée en tant que composant dynamique séparé.

• Sections conditionnelles : Utilisez un composant Dynamic Component combiné à des règles de visibilité pour afficher/masquer des sections entières de votre interface en fonction de conditions.

Exemple : Contacts associés réutilisables

1. Créer le composant « RelatedContacts » :

   • à activé. nouveau Composant dynamique nommé RelatedContacts.

   • Définissez son Nom API de l'objet cible sur Compte (en supposant que vous l'utiliserez sur les pages Account).

   • Ajoutez un composant Data Table pour afficher les Contacts.

   • Configurez la requête du Data Table pour récupérer les Contacts liés à un Account. Utilisez un filtre: AccountId égal à {!inputAccountId}.

   • à activé. Texte Créez une inputAccountId et marquez-le comme Disponible pour l'entrée. Celui-ci recevra l'ID de l'Account depuis le composant parent.

   • Enregistrer et activer RelatedContacts.

2. Créer le composant « AccountDetailPage » :

   • Créez un autre composant dynamique nommé AccountDetailPage.

   • Définissez son Nom API de l'objet cible sur Compte.

   • Ajoutez tous les composants que vous souhaitez pour afficher les détails de l'Account.

3. Intégrer « RelatedContacts » :

   • Dans AccountDetailPage, glissez un composant Dynamic Component sur la zone de travail.

   • Dans les propriétés du composant Dynamic Component, sélectionnez RelatedContacts comme le composant à afficher.

   • Vous verrez désormais la inputAccountId variable d'entrée listée. Liez cela à $Component.record.Id. Cela transmet l'ID de l'Account courant au composant imbriqué.

4. Ajouter à la page Account : Ajoutez le AccountDetailPage composant à une page d'enregistrement Account.

Maintenant, sur n'importe quelle page d'enregistrement Account, le AccountDetailPage composant sera affiché. Il va, à son tour, intégrer directement la RelatedContacts composant, en lui transmettant l'ID de l'Account courant. Le RelatedContacts composant utilisera cet ID pour filtrer son Data Table et afficher les Contacts associés.

Considérations de performance

Bien que les composants imbriqués offrent une grande flexibilité, un imbriquement excessif ou mal conçu puissiez peut impacter les performances. Voici quelques conseils :

• Évitez l'imbrication profonde : Limitez les niveaux d'imbrication. Des hiérarchies très profondes peuvent être plus difficiles à gérer et peuvent ralentir le rendu.

• Utilisez des variables d'entrée/sortie : Transmettez les données entre les composants parent et enfant en utilisant des variables d'entrée/sortie au lieu de faire en sorte que chaque composant imbriqué récupère ses propres données indépendamment.

• Visibilité conditionnelle : Utilisez des règles de visibilité pour empêcher le chargement de composants inutiles.

• Surveillez le chargement des données : Soyez attentif à la façon dont les données sont chargées dans les composants imbriqués. Évitez les requêtes redondantes.