Ouvrir un panneau de composant dynamique

Aperçu

L'interaction "Ouvrir le panneau du composant dynamique" l'interaction vous permet d'afficher un autre composant dynamique Avonni dans un panneau latéral qui glisse depuis le bord de l'écran. Contrairement aux modales qui couvrent tout l'écran, les panneaux apparaissent aux côtés de votre contenu existant, ce qui les rend parfaits pour afficher des détails, des formulaires ou des informations supplémentaires sans perdre le contexte de ce que vous consultiez.

Concepts importants

Avant de plonger dans la configuration, il est essentiel de comprendre l'architecture des interactions de panneau et les relations entre les composants impliqués.

Les deux composants

Lorsque vous utilisez cette interaction, vous êtes en train de travailler avec deux composants dynamiques séparés:

1. Le composant principal (composant d'origine) :

   • C'est là que les utilisateurs commencent

   • Contient le déclencheur (bouton, action sur la ligne du tableau, etc.)

   • Reste visible en arrière-plan lorsque le panneau s'ouvre

2. Le composant du panneau (composant lancé) :

   • C'est ce qui s'affiche à l'intérieur du panneau

   • Un composant dynamique complètement séparé que vous créez spécifiquement pour cet usage

   • Reçoit des données du composant principal via des variables d'entrée

Vous devez créer les deux composants avant de configurer cette interaction.

---

Configuration

Nom du composant dynamique

Sélectionnez quel composant dynamique afficher dans le panneau. Choisissez dans la liste déroulante de vos composants dynamiques disponibles et sélectionnez le composant de panneau que vous avez créé et activé précédemment.

Variables d'entrée (transmission de données au panneau)

C'est ici que vous connectez les données de votre composant principal aux variables d'entrée du composant du panneau. Pour chaque donnée que vous souhaitez transmettre, cliquez sur "Ajouter un élément" pour créer un nouveau mappage.

Champ Nom

Une liste déroulante énumère toutes les variables du composant du panneau marquées "Disponible pour l'entrée." Sélectionnez la variable que vous souhaitez remplir, comme inputAccountId.

Important

Assurez-vous que les variables sont marquées comme "Disponible pour l'entrée" dans le composant que vous souhaitez ouvrir en tant que panneau. Si vous ne voyez pas votre variable dans la liste déroulante, revenez au composant du panneau et assurez-vous que la case "Disponible pour l'entrée" est cochée pour cette variable.

Champ Valeur

Saisissez les valeurs des champs d'enregistrement que vous souhaitez transmettre en tant que variables d'entrée au composant.

Exemples (à titre d'illustration seulement)

• Enregistrement : Nom - Transmettre le champ Nom du compte

• Enregistrement : Email - Transmettre le champ Email du contact

• Enregistrement : Montant - Transmettre le champ Montant de l'opportunité

• Enregistrement : Statut - Transmettre le champ Statut du dossier

Remarque : Les valeurs de champ disponibles dépendent de la façon dont votre composant principal est configuré et des données d'enregistrement auxquelles il a accès.

En-tête

Le titre qui apparaît en haut du panneau. Vous pouvez le configurer de deux manières :

• Cliquez sur le sélecteur de nom de champ pour choisir une valeur dynamique depuis votre composant

• Saisissez du texte statique directement en utilisant la valeur personnalisée.

Position

Choisissez de quel côté de l'écran le panneau doit glisser. Vous pouvez sélectionner Gauche pour faire apparaître le panneau depuis la gauche, ou Droite (le plus courant) pour le faire apparaître depuis la droite. La plupart des applications utilisent « Droite » car cela suit les conventions d'interface pour les panneaux de détails et la navigation latérale.

Superposé

Contrôle si le panneau recouvre le composant principal. Lorsqu'il est coché, le panneau s'affiche par-dessus le composant principal, assombrissant ou couvrant l'arrière-plan. Lorsqu'il n'est pas coché, le panneau s'affiche à côté du composant principal sans superposition.

Quand utiliser Superposé :

• Lorsque vous voulez concentrer entièrement l'attention de l'utilisateur sur le panneau

• Pour un comportement de type modal tout en utilisant un format de panneau

• Lorsque le contenu principal n'est pas nécessaire pendant que le panneau est ouvert

Externe

Contrôle si le panneau apparaît à l'intérieur ou à l'extérieur des limites du composant. Lorsqu'il est coché, le panneau s'affiche en dehors du conteneur du composant, utilisant potentiellement plus d'espace à l'écran. Lorsqu'il n'est pas coché, le panneau s'affiche dans l'espace alloué au composant.

Quand utiliser Externe :

• Lorsque votre composant a une largeur limitée et que vous avez besoin de plus d'espace pour le panneau

• Pour des mises en page de composants en pleine page où les panneaux doivent s'étendre jusqu'aux bords de l'écran

• Lorsque vous voulez que le panneau semble séparé du conteneur du composant

Taille

Choisissez la largeur du panneau :

• Petit: Panneau étroit, bon pour les formulaires simples ou les informations brèves

• Moyen: Largeur équilibrée, convient pour la plupart des cas d'utilisation

• Large: Panneau large, adapté aux vues détaillées ou aux formulaires complexes

• X-Large : Panneau très large, pour un contenu étendu ou des tableaux de données

• Plein: Le panneau occupe toute la largeur disponible

Astuce : Commencez par Moyen et ajustez en fonction de vos besoins en contenu. Les panneaux plus grands fonctionnent mieux lorsque Externe est activé

Marge intérieure

Contrôle l'espacement interne autour du contenu du panneau. Petit offre un rembourrage minimal avec le contenu plus proche des bords du panneau pour un aspect compact. Moyen offre un rembourrage équilibré avec un espacement confortable et est recommandé dans la plupart des cas. Large donne un rembourrage généreux avec plus d'espace autour du contenu.

Masquer l'icône de fermeture

Contrôle si le bouton de fermeture standard (X) apparaît dans l'en-tête du panneau. Lorsqu'il est coché, l'icône de fermeture est masquée et les utilisateurs doivent fermer le panneau par d'autres moyens. Lorsqu'il n'est pas coché, l'icône de fermeture est visible (comportement standard).

Quand masquer l'icône de fermeture :

• Lorsque vous souhaitez obliger les utilisateurs à suivre un flux ou un processus spécifique

• Lorsque vous fournissez des boutons personnalisés de fermeture/annulation dans le contenu du panneau

• Pour des expériences de type assistant où les utilisateurs doivent compléter toutes les étapes

Attention : Si vous masquez l'icône de fermeture, assurez-vous que les utilisateurs ont un autre moyen simple de fermer le panneau (comme un bouton Annuler ou Fermer dans votre composant de panneau), sinon ils pourraient se sentir piégés.

À la fermeture

Définissez ce qui se passe lorsque le panneau se ferme (via l'icône de fermeture, un bouton personnalisé ou d'autres moyens). Vous pouvez configurer plusieurs types d'actions :

Afficher une notification Toast

Afficher un message lorsque le panneau se ferme, par exemple « Modifications enregistrées avec succès » ou « Panneau fermé. » C'est utile pour confirmer l'achèvement d'une tâche.

Actualiser toutes les requêtes

Actualise automatiquement toutes les sources de données dans le composant principal. Utilisez ceci lorsque les utilisateurs peuvent modifier des données dans le panneau afin de garantir que le composant principal affiche des informations mises à jour. Par exemple, lorsqu'un utilisateur modifie un compte dans le panneau, le panneau se ferme et le tableau des comptes se rafraîchit automatiquement.

Récupérer des enregistrements

Récupérer des enregistrements spécifiques lorsque le panneau se ferme. Ceci est plus ciblé que "Actualiser toutes les requêtes" et utile lorsque vous savez exactement quelles données doivent être mises à jour.

---

Exemple étape par étape

Panneau de détails du compte

Construisons un exemple complet où les utilisateurs peuvent cliquer sur un compte dans un tableau pour voir ses détails complets dans un panneau latéral.

Aperçu du scénario

• Composant principal: Affiche une liste de comptes dans un tableau de données

• Composant du panneau: Affiche les informations détaillées du compte

• Interaction: Cliquez sur un bouton « Voir les détails » sur n'importe quelle ligne pour ouvrir le panneau pour ce compte

1

Créer le composant du panneau

• Créer un nouveau composant dynamique

  • Nom : « Panneau de détails du compte »

  • Description : « Affiche les informations détaillées du compte »

• Créer une variable d'entrée

  • Créez une nouvelle ressource, puis sélectionnez Variable

  • Nom API: inputAccountId

  • Type de données: Texte

  • Disponible pour l'entrée: Coché (N'oubliez pas ceci !)

  >> Cette variable recevra l'ID du compte depuis le composant principal

• Créer une Variable d'enregistrement

  • Créez une autre nouvelle ressource, puis sélectionnez Variable

  • Nom API : accountRecord

  • Type de données : Enregistrement

  • Type d'objet : Compte

  >> Cette variable stockera l'enregistrement de compte récupéré

• Ajouter une interaction "Au chargement" pour récupérer le compte

  • Ajoutez une interaction "Au chargement" à votre composant de panneau

  • Action : Obtenir des enregistrements

  • Variable d'enregistrement : Sélectionnez accountRecord (la variable d'enregistrement que vous venez de créer)

  • ID d'enregistrement : Mapper sur inputAccountId (la variable d'entrée)

  >> Cela récupère l'enregistrement du compte lorsque le panneau se charge, en utilisant l'ID transmis depuis le composant principal

• Concevoir la mise en page du panneau

  • Ajoutez des composants Texte d'affichage pour les champs du compte :

    • Nom du compte : accountRecord.Name

    • Secteur : accountRecord.Industry

    • Revenu annuel : accountRecord.AnnualRevenue

    • Téléphone : accountRecord.Phone

  • Ajoutez tous les autres composants que vous souhaitez (images, listes liées, etc.)

• Enregistrer et activer

  • Enregistrez votre composant de panneau

  • Cliquez sur Activer

2

Configurer le composant principal

• Ajouter un tableau de données

  • Ajoutez un tableau de données Avonni à votre composant principal

  • Configurez-le pour afficher des enregistrements de comptes en utilisant une source de données Query

• Ajouter une action de ligne

  • Dans la configuration des colonnes du tableau de données, ajoutez une nouvelle colonne

  • Définissez le Type de colonne sur l'une des options suivantes :

    • Action

    • Bouton

    • Icône de bouton

  • Ceci crée un élément cliquable dans chaque ligne que les utilisateurs peuvent cliquer pour ouvrir le panneau

  • Libellé : « Voir les détails »

  • Choisissez une icône appropriée (optionnelle, comme un œil ou une icône d'information)

• Configurer l'interaction

  • Sélectionnez l'action de ligne « Voir les détails »

  • Type : Ouvrir le panneau du composant dynamique

• Configurer les paramètres du panneau Nom API du composant dynamique

  • Sélectionnez : Account_Details_Panel

  Propriétés d'entrée :

  • Cliquez sur "Ajouter un élément"

  • Nom : inputAccountId (depuis la liste déroulante)

  • Valeur : Enregistrement : Id

  À la fermeture :

  • Laissez vide (aucun rafraîchissement nécessaire puisque nous ne faisons que consulter, pas modifier)

• Enregistrez votre composant principal

3

Testez-le

• Activez-le et ajoutez-le à une page

  • Ajoutez votre composant principal à une page Lightning

  • Enregistrez et activez la page

• Testez l'interaction

  • Trouvez un compte dans le tableau

  • Cliquez sur l'action « Voir les détails »

  • Le panneau devrait glisser depuis la droite

  • Les détails du compte devraient s'afficher pour le compte cliqué

  • Cliquez sur le X ou à l'extérieur du panneau pour le fermer

Dépannage

Le panneau s'ouvre mais n'affiche aucune donnée

• Vérifiez que les variables d'entrée sont marquées "Disponible pour l'entrée" dans le composant du panneau.

• Vérifiez que vous transmettez la valeur correcte (utilisez la console du navigateur pour déboguer)

• Assurez-vous que l'action "Au chargement" du composant du panneau récupère correctement les données en utilisant la variable d'entrée

La variable d'entrée n'apparaît pas dans la liste déroulante

• Allez dans le composant du panneau

• Trouvez la variable

• Assurez-vous que la case « Disponible pour l'entrée » est cochée

• Enregistrez et réactivez le composant du panneau

• Actualisez la page de configuration de votre composant principal

De mauvaises données s'affichent dans le panneau

• Vérifiez la valeur de la propriété d'entrée — transmettez-vous le champ/la variable correct(e) ?

• Vérifiez que vous utilisez .firstSelectedRow pour les tableaux de données

• Utilisez le mode débogage pour inspecter quelle valeur est réellement transmise

Le panneau ne s'ouvre pas du tout

• Vérifiez que le composant du panneau est activé

• Vérifiez la console du navigateur pour des erreurs

• Assurez-vous que le Nom API du composant du panneau est correct

• Vérifiez que l'interaction du composant déclencheur est correctement configurée

---

Étapes suivantes

Maintenant que vous comprenez les interactions de panneau, envisagez :

• De créer des composants de panneau réutilisables pour des tâches courantes

• De constituer une bibliothèque de panneaux de détail/modification pour différents objets

• De combiner les panneaux avec d'autres interactions pour des flux de travail complexes

• D'utiliser des panneaux dans des panneaux pour une navigation hiérarchique (avancé)

---

Besoin de plus d'aide ?

Si vous avez des questions sur la mise en œuvre des interactions de panneau, la configuration des variables d'entrée ou le dépannage du comportement des panneaux, n'hésitez pas à nous contacter. Nous sommes là pour vous aider à créer des expériences multi-composants intuitives avec les composants dynamiques Avonni.