Graphe de relations

Le composant Avonni Relationship Graph fournit 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.

Aperçu

Ce composant rend les données sous forme de graphe interactif, affichant des nœuds (représentant des enregistrements) et des lignes (représentant des relations). Il est idéal pour comprendre des structures complexes, telles que les hiérarchies de comptes, les organigrammes ou les dépendances entre différents enregistrements.

Fonctionnalités clés

• Cartographie visuelle des relations : Afficher les relations parent-enfant et potentiellement d'autres relations de recherche dans un format graphique.

• Affichage des données hiérarchiques : Prend en charge l'imbrication multi-niveaux (par ex. Compte -> Contacts -> Cas).

• Exploration interactive : Les utilisateurs peuvent souvent développer et réduire les nœuds (selon la configuration).

• Piloté par les données : Rempli en utilisant la puissante source de données Avonni Nested Query.

• Personnalisation des nœuds : Contrôlez les informations affichées sur chaque nœud, y compris le libellé, l'icône et des champs supplémentaires.

• Nœuds interactifs : Ajoutez des interactions directement aux nœuds parents ou enfants dans le graphe.

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 des structures de produits (par ex. ensembles de produits et leurs composants).

• Afficher les dépendances de cas ou les articles de connaissance associés.

• Visualiser des structures de projet complexes avec des tâches parent/enfant.

Ajout du composant Relationship Graph

Glisser-déposer : Depuis la bibliothèque de composants (panneau de gauche), trouvez le composant « Relationship Graph » et faites-le glisser sur votre canevas.

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, le mappage 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 la source de données Avonni Nested Query.

1

Sélectionner la source de données

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

2

Configurer la requête imbriquée

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

• Requête pour l'objet parent : Définissez la requête pour vos enregistrements de premier niveau (par ex. Objet : Account). Ajoutez des filtres si nécessaire.

• Ajouter l(es) objet(s) enfant(s) : Dans le générateur de requêtes imbriquées, ajoutez les relations enfants.

  • Sélectionnez l'objet enfant (par ex. : Contact).

  • Spécifiez le champ de relation sur le objet enfant qui le lie 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 parents multiples (optionnel) : Selon les capacités du composant, vous pourriez être en mesure d'ajouter plusieurs requêtes parentes 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.

1

Accéder aux mappages de données

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

2

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 Compte », « Élément Contact », « Élément Case »). Sélectionnez le niveau que vous souhaitez configurer.

3

Mapper les attributs pour chaque niveau

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

• É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 de l'icône (optionnel) : Sélectionnez un champ contenant un nom d'icône SLDS, ou saisissez 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 issus de la requête que vous souhaitez afficher comme informations secondaires sur le nœud.

• Développé (optionnel - pour les nœuds parents) : (Booléen) Définissez si les nœuds de ce niveau doivent être développés par défaut pour afficher leurs enfants lorsque le graphe se charge. Lieez à un champ booléen ou définissez une valeur statique.

4

Répéter les mappages

Répétez l'étape 3 pour chaque niveau d'élément (par ex. configurer 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) Saisissez 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 des interactions Avonni standard.

Configuration des nœuds

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

• Nom de l'icône de développement : (Texte) Nom de l'icône pour le bouton permettant de développer un nœud (par ex. : utility:add).

• Nom de l'icône de réduction : (Texte) Nom de l'icône pour le bouton permettant de réduire 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 Mappages de données section pour chaque niveau d'élément ou, potentiellement, en tant qu'interactions globales du composant.

• Actions du nœud de groupe/parent : Définissez les interactions déclenchées en cliquant sur les nœuds de niveau supérieur (parents).

• Actions de l'élément/nœud 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 consiste à ouvrir la page d'enregistrement pour le nœud cliqué.

    • Exemple de configuration : Définissez le type de référence de page sur Page d'enregistrement, sélectionnez le nom API d'objet correct pour ce niveau de nœud, et définissez l'ID d'enregistrement sur l' attribut Item Name que vous avez mappé pour ce nœud.

  • Ouvrir le dialogue Flow / Ouvrir le panneau Flow: Lancer un Screen Flow 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 associée, enregistrer un appel).

    • Exemple de configuration : Sélectionnez le Screen Flow souhaité, et transmettez l'ID du nœud cliqué (en utilisant l' attribut Item Name 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. mise à jour d'un statut d'enregistrement, envoi d'une notification par e-mail, ou création d'une tâche standard).

    • Exemple de configuration : Sélectionnez le Flow autolaunché pertinent et transmettez l'ID du nœud (depuis attribut Item Name) 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 Compte -> Contact -> Case

1. 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,)

2. Mappages de données :

   • Élément Compte : Étiquette : Name, Nom de l'icône : standard:account, Développé : true

   • Élément Contact : Étiquette : Name, Nom de l'icône : standard:contact

   • Élément Case : Étiquette : CaseNumber, Item Name : Id, Nom de l'icône : standard:case, Champs supplémentaires : Status

Résultat : Un graphe interactif montrant des comptes, extensible pour afficher les contacts associés, qui sont eux-mêmes extensibles pour afficher les cas associés. 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 : Les hiérarchies très larges ou profondément imbriquées (contenant des milliers de nœuds) peuvent affecter 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 sans encombrement.

En résumé

Le Relationship Graph d'Avonni offre 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.