Graphique des relations

Aperçu

Le composant Avonni Relationship Graph offre un moyen puissant et intuitif de visualiser les connexions et les relations hiérarchiques entre les enregistrements Salesforce directement sur vos pages Lightning. Allez au-delà des simples listes et voyez comment vos données sont réellement connectées.

Cas d'utilisation

Visualiser les hiérarchies de comptes avec les contacts et opportunités associés.
Afficher des organigrammes (par ex., hiérarchies d'utilisateurs basées sur le ManagerId champ).
Cartographier les structures de produits (par ex., les bundles de produits et leurs composants).
Montrer les dépendances des cas ou les articles de Knowledge associés.
Visualiser des structures de projet complexes avec des tâches parent/enfant.

Configuration

Sélectionnez le composant Relationship Graph sur le canevas pour accéder à ses propriétés dans le panneau Propriétés. La configuration implique la connexion aux données, la cartographie de l'affichage des données et la personnalisation de son comportement.

Connexion aux données hiérarchiques (source de données)

Le Relationship Graph est conçu pour fonctionner avec des données hiérarchiques. Le moyen principal de fournir ces données est d'utiliser le Avonni Nested Query Data Source.

Sélectionner la source de données

Dans le panneau Propriétés, définissez la Source de données propriété sur Avonni Nested Query Data Source.

Configurer la requête imbriquée

Cliquez Créer la requête ou Modifier la requête.

Requête sur l'objet parent : Définissez la requête pour vos enregistrements de niveau supérieur (par ex., Objet : Account). Ajoutez des filtres si nécessaire.
Ajouter l(es) objet(s) enfant(s) : Dans le constructeur de requêtes imbriquées, ajoutez des relations enfant.
- Sélectionnez l'objet enfant (par ex., Contact).
- Spécifiez le Champ de relation sur le objet enfant qui le relie au parent (par ex., AccountId sur Contact).

Ajouter un niveau d'imbrication supplémentaire (optionnel) : Vous pouvez éventuellement ajouter un autre niveau (par ex., ajouter Case comme enfant de Contact, en utilisant le ContactId champ de relation).
Objets parent multiples (optionnel) : Selon les capacités du composant, vous pouvez être en mesure d'ajouter plusieurs requêtes parent indépendantes si vous souhaitez afficher différentes hiérarchies de départ dans le même graphe.
Enregistrer la requête : Enregistrez votre définition de requête imbriquée.

Mapper les données aux nœuds du graphe (mappages de données)

Cette section cruciale définit comment les données de chaque niveau de votre requête imbriquée sont affichées visuellement sur les nœuds du graphe.

Accéder aux mappages de données

Dans le panneau Propriétés, trouvez la section Mappages de données .

Sélectionner le niveau d'élément

Vous verrez généralement des sections correspondant à chaque niveau défini dans votre requête imbriquée (par ex., « Élément Account », « Élément Contact », « Élément Case »). Sélectionnez le niveau que vous souhaitez configurer.

Mapper les attributs pour chaque niveau

Pour le niveau d'élément sélectionné (par ex., Account) :

Étiquette : Sélectionnez le champ des résultats de la requête qui doit être le texte d'affichage principal pour le nœud (par ex., Account.Name).
Nom d'icône (optionnel) : Sélectionnez un champ contenant un nom d'icône SLDS, ou entrez un nom d'icône statique (par ex., standard:account) pour afficher une icône sur le nœud.
Champs supplémentaires (optionnel) : Ajoutez d'autres champs de la requête que vous souhaitez afficher comme informations secondaires sur le nœud.
Déployé (optionnel - pour les nœuds parents) : (Booléen) Définissez si les nœuds de ce niveau doivent être déployés par défaut pour afficher leurs enfants lorsque le graphe se charge. Liez à un champ booléen ou définissez une valeur statique.

Répéter les mappages

Répétez l'étape 3 pour chaque niveau d'élément (par ex., configurez les mappages pour les Contacts, puis pour les Cases).

Configuration de l'en-tête

Personnalisez l'en-tête affiché au-dessus du graphe.

Titre : (Texte) Entrez un titre pour le graphe (par ex., « Relations de compte »).
Nom de l'icône : (Texte, optionnel) Une icône pour l'en-tête.
Actions : (Actions, optionnel) Ajoutez des boutons au niveau de l'en-tête pour des actions liées à l'ensemble du graphe (par ex., « Développer tout », « Réduire tout », « Actualiser »). Ceux-ci utilisent les interactions Avonni standard.

Configuration des nœuds

Personnalisez l'apparence des contrôles d'agrandissement/réduction sur les nœuds qui ont des enfants.

Nom d'icône d'expansion : (Texte) Nom d'icône pour le bouton d'expansion d'un nœud (par ex., utility:add).
Nom d'icône de réduction : (Texte) Nom d'icône pour le bouton de réduction d'un nœud (par ex., utility:dash).

Configuration des interactions

Ajoutez de l'interactivité directement aux nœuds du graphe. Les interactions sont généralement configurées dans la section Mappages de données section pour chaque niveau d'élément ou, éventuellement, comme interactions globales du composant.

Actions pour les nœuds de groupe/parent : Définissez les interactions déclenchées en cliquant sur les nœuds de niveau supérieur (parents).
Actions pour les nœuds d'élément/enfant : Définissez les interactions déclenchées en cliquant sur des nœuds enfants individuels.
Actions d'interaction courantes pour les nœuds du graphe :
- Naviguer: Utilisez ceci pour diriger l'utilisateur vers une autre page. Un cas d'utilisation très courant est d'ouvrir la page d'enregistrement pour le nœud cliqué.
  - Exemple de configuration : Définir le type de référence de page sur Page d'enregistrement, sélectionnez le nom d'API d'objet correct pour ce niveau de nœud, et définissez l'ID de l'enregistrement sur l'attribut Nom de l'élément que vous avez mappé pour ce nœud.
- Ouvrir une boîte de dialogue Flow / Ouvrir le panneau Flow: Lancer un Flux écran dans une fenêtre modale ou un panneau latéral pour guider l'utilisateur à travers un processus lié au nœud cliqué (par ex., modifier des détails, créer une tâche liée, enregistrer un appel).
  - Exemple de configuration : Sélectionnez le Flux écran souhaité et transmettez l'ID du nœud cliqué (en utilisant l' l'attribut Nom de l'élément attribut) comme variable d'entrée dans le Flow.
- Exécuter un Flow: Déclencher un Flow autolaunché pour un traitement en arrière-plan lié au nœud cliqué (par ex., mettre à jour le statut d'un enregistrement, envoyer une notification par e-mail, ou créer une tâche standard).
  - Exemple de configuration : Sélectionnez le Flow autolaunché pertinent et transmettez l'ID du nœud (depuis l'attribut Nom de l'élément) comme variable d'entrée.
- Afficher un toast: Afficher un message d'information rapide à l'utilisateur, pouvant inclure des détails provenant d'autres champs mappés pour le nœud cliqué

Exemple : Hiérarchie Account -> Contact -> Case

Source de données (requête imbriquée) :
- Parent : Account
- Enfant 1 : Contact (Relié via AccountId,
- Enfant 2 (imbriqué sous Contact) : Case (Relié via ContactId,)
Mappages de données :
- Élément Account : Étiquette : Name, Nom d'icône : standard:account, Déployé : true
- Élément Contact : Étiquette : Name, Nom d'icône : standard:contact
- Élément Case : Étiquette : CaseNumber, Nom de l'élément : Id, Nom d'icône : standard:case, Champs supplémentaires : Status

Résultat : Un graphe interactif affichant les comptes, extensible pour montrer les contacts associés, eux-mêmes extensibles pour afficher les Cases associées. Cliquer sur n'importe quel nœud navigue vers sa page d'enregistrement.

Considérations clés

Modèle de données : Nécessite des relations parent-enfant claires (champs de recherche) dans vos données Salesforce.
Configuration de la requête imbriquée : La configuration correcte de la source de données Nested Query est cruciale.
Performance : Des hiérarchies très volumineuses ou profondément imbriquées (contenant plusieurs milliers de nœuds) peuvent impacter significativement les performances de chargement. Utilisez des filtres dans votre requête lorsque cela est possible.
Clarté : Concevez l'affichage de votre graphe, y compris les étiquettes et les champs supplémentaires, pour qu'il soit clair et non encombré.

En résumé

Le Avonni Relationship Graph fournit un moyen visuel puissant d'explorer et d'interagir avec des données hiérarchiques directement sur vos pages Lightning. En tirant parti des requêtes imbriquées et en configurant des mappages de données explicites, vous pouvez transformer des relations complexes en visualisations intuitives et exploitables sans code.

Mis à jour il y a 1 jour

Ce contenu vous a-t-il été utile ?

Bonne nuit