Section

Aperçu

Le composant Avonni Section crée des sections extensibles pour organiser le contenu dans vos composants dynamiques Salesforce. Il inclut un emplacement (slot) pour ajouter d'autres composants Avonni à l'intérieur, ce qui le rend idéal pour regrouper des éléments connexes tels que formulaires, listes ou affichages de données.

Principales caractéristiques

• Conception extensible : Basculer la visibilité du contenu pour une meilleure expérience utilisateur dans des interfaces denses.

• Personnalisation : Variantes pour le style, avatars pour des indices visuels et icônes pour la rétractabilité.

• Interactivité : Prise en charge des actions, indicateurs de progression et étiquettes (tags).

• Intégration de slot : Intégrer d'autres composants (par ex. zones de texte, curseurs) dans la zone de contenu de la section.

Astuce

Pour créer des structures en accordéon avec plusieurs panneaux extensibles, utilisez le composant dédié Avonni Accordion component

Cas d'utilisation

• Regroupez les champs de formulaire dans des panneaux extensibles (par ex. section "Détails du contact").

• Organisez les widgets du tableau de bord en repliant ceux moins utilisés.

• Affichez du contenu d'aide rétractable ou des FAQ.

• Structurez les rapports avec des sections étiquetées et suivies par progression.

• Créez des interfaces imbriquées, comme une section contenant une table de données pour des vues filtrées.

Configuration

Sélectionnez la Section sur le canevas pour accéder aux propriétés dans le panneau de propriétés à droite.

Propriétés de base

Celles-ci gèrent l'identification et l'étiquetage principal.

Propriété	Type	Description	Exemple
par le véritable	Texte	Identifiant unique pour l'instance.	ContactDetailsSection
Titre	Texte	Titre principal de la section.	"Informations de contact"
Légende	Texte (optionnel)	Sous-texte ou description sous le titre.	"Saisissez les informations de l'utilisateur ici."

Contenu et slot

Il s'agit de la zone extensible où vous faites glisser d'autres composants Avonni (par ex. champs, tableaux). Aucune propriété directe—configuration via le placement sur le canevas.

Bonne pratique : Gardez le contenu dans le slot pertinent et concis pour maintenir les performances lors de l'extension/rétraction.

Apparence et variante

Celles-ci contrôlent le style visuel.

Propriété	Type	Description	Options/Exemples
Variante	Sélectionnez	Style de base : base (par défaut, épuré) ou ombré (avec fond ombré).	base, shaded.

Capacité de rétraction

Celles-ci gèrent le comportement d'extension/rétraction.

Propriété	Type	Description
Rétractable	Booléen	Permet le basculement ; si désactivé, la section est toujours ouverte.
Fermé	Booléen	État initial : Activé = replié, Désactivé = étendu (actif si Rétractable est activé).

Icône de rétractation (active si Rétractable est activé)

Personnalisez l'icône de bascule.

Sous-propriété	Type	Description	Options/Exemples
Masquer	Booléen	Masque complètement l'icône.	-
Nom de l'icône ouverte	Texte	Icône lorsque la section est étendue (par ex. noms du Salesforce Lightning Design System).	utility:chevronup
Nom de l'icône fermée	Texte	Icône lorsque la section est repliée.	utility:chevrondown
Position	Sélectionnez	Emplacement de l'icône par rapport au titre.	left, right.

Astuce : Utilisez les icônes SLDS standard pour la cohérence. (Espace réservé pour capture d'écran : Section avec icône personnalisée.)

Avatar

Ajoutez un élément visuel avant le titre.

Propriété	Type	Description	Options/Exemples
Variante	Sélectionnez	Forme : circle (arrondi) ou square.	circle, square.
Initiales	Texte (optionnel)	Texte superposé (par ex. initiales de l'utilisateur).	"JD"
Nom de l'icône	Texte (optionnel)	Icône à la place de l'image/initiales.	standard:user
Taille de l'icône	Sélectionnez	Taille de l'icône ou de l'avatar.	x-small, small, medium, large, x-large, xx-large.
Image	Texte/URL (optionnel)	URL ou chemin pour une image.	"https://example.com/avatar.jpg"

Remarque : Priorisez une seule option : image, icône ou initiales.

Actions

Configurez des boutons sur le côté droit qui déclenchent des interactions (configurées dans le Panneau Interactions). Exemples : "Modifier", "Supprimer".

Meilleure pratique

Limitez à 2-3 actions pour éviter l'encombrement, ou utilisez les boutons d'actions visibles pour définir le nombre d'actions à afficher et/ou prévenir l'encombrement ; utilisez-les pour des opérations spécifiques à la section.

Progression et étiquettes

Ceci ajoute des indicateurs et des métadonnées.

Propriété	Type	Description	Exemple
Progression	Nombre	Valeur pour une barre de progression (0-100) ; affiche l'état d'avancement. Peut être définie manuellement ou liée à une variable de type Number pour des mises à jour dynamiques basées sur des calculs ou des données.	75 (ou mappé à {!completionPercent})
Étiquettes	Liste/Texte	Séparées par des virgules ou tableau d'étiquettes pour catégorisation/recherche.	"Priorité", "Revue"

Astuce

Pour la progression, la liaison à une variable (créée dans Resources) permet des changements en temps réel, par ex. mise à jour basée sur l'achèvement d'un formulaire ou les résultats d'une requête.

Exemple

Section de formulaire de contact rétractable

1

Ajouter le composant Section

• par le véritable: ContactFormSection

• Titre: "Détails du contact"

• Légende: "Remplissez les informations de l'utilisateur"

• Variante: shaded

• Rétractable: Activé

• Fermé: Activé (commence replié)

• Icône rétractable: Nom icône ouverte = utility:chevronup, Nom icône fermée = utility:chevrondown, Position = left

2

Ajouter un avatar

• Variante: circle

• Nom de l'icône: standard:contact

• Taille de l'icône: medium

3

Configurer les actions

Tout d'abord, créez une variable Record dans Resources pour l'objet souhaité (par ex. Contact) pour contenir les données du formulaire. Ensuite, dans le Panneau Interactions, ajoutez un bouton "Enregistrer" qui déclenche une action de mise à jour d'enregistrement (par ex. Update Record), en le liant à la variable Record.

4

Ajouter progression et étiquettes

Progression = 50, Étiquettes = "Formulaire", "Requis"

5

Contenu du slot

Pour remplir la section avec des champs de formulaire liés à votre enregistrement Contact, basez-vous sur la variable Record créée précédemment (par ex. pour l'objet Contact).

Étapes :

1. Sélectionnez le composant Section sur le canevas.

2. Dans le panneau Éléments (typiquement côté gauche ou droit), passez à l'onglet Champs tab—cela affiche les champs disponibles à partir de la variable Record liée.

3. Faites glisser les champs pertinents (par ex. Nom, Email) directement dans le slot de la section sur le canevas.

Résultat : Une section ombrée et rétractable avec avatar, barre de progression, étiquettes et actions—s'ouvre pour révéler les champs du formulaire.

Considérations clés

• Logique de rétractabilité : Testez l'état initial Fermé ; liez-le à des variables pour un basculement dynamique.

• Performance des slots : Évitez de surcharger les slots avec des composants lourds pour prévenir les lenteurs lors de l'extension.

• Priorisation de l'avatar : Utilisez une image pour les photos, une icône pour les éléments génériques et des initiales pour la personnalisation—un seul s'affiche.

• Intégration des actions : Assurez-vous que les interactions sont définies dans le panneau ; testez leur déclenchement au clic.

• Visualisation de la progression : Le style correspond à la variante ; utilisez-la pour le suivi des tâches au sein des sections.

• Accessibilité : Fournissez un texte alternatif pour les images/icônes ; assurez-vous que la rétractation est navigable au clavier.

Dépannage des problèmes courants

• La section ne se replie pas : Vérifiez que Rétractable est activé ; cherchez des comportements conflictuels.

• Icône n'apparaît pas : Si Masquer est activé, désactivez-le ; confirmez que les noms d'icônes sont valides SLDS.

• Actions qui ne se déclenchent pas : Vérifiez la configuration et les liaisons dans le Panneau Interactions.

• Progression non visible : Assurez-vous que la valeur est entre 0 et 100 ; peut nécessiter un ajustement de variante.

• Chevauchement des étiquettes : Limitez le nombre d'étiquettes ; stylisez via CSS personnalisé si nécessaire.

• Contenu du slot manquant : Faites glisser les composants directement dans le slot sur le canevas.

Résumé

Le composant Avonni Section organise les interfaces avec des panneaux extensibles et personnalisables et des slots pour composants imbriqués. Il est parfait pour des conceptions modulaires et interactives dans Salesforce. Pour les composants associés, voir Avonni Accordion ou le Guide des Interactions.