En-tête

L’en-tête Avonni offre un moyen simple d’ajouter des titres, sous-titres, icônes, images et liens de navigation pour créer des en-têtes informatifs et visuellement attractifs.

Aperçu

Le composant Avonni Header ajoute des titres, des sous-titres, des icônes, des images et de la structure à vos composants dynamiques Salesforce. En tant qu’élément de mise en page, il met l’accent sur la présentation pour attirer l’attention et fournir du contexte sans être lié à des objets de données spécifiques.

Les fonctionnalités clés incluent :

• Éléments de texte : Légende, titre et sous-titre pour une information stratifiée.

• Éléments visuels : Icônes et images d’arrière-plan pour l’engagement.

• Liaison dynamique : Lien vers des variables, formules ou champs d’enregistrement pour l’adaptabilité.

• Intégration : Option « Joint » pour se fondre avec le contenu en dessous.

• Simplicité : Configuration rapide des en-têtes dans les pages, sections ou formulaires.

Cas d'utilisation

• En-têtes de page : Titres de niveau supérieur sur les pages d’application ou d’enregistrement (par ex. « Aperçu du compte »).

• Diviseurs de section : Organisez le contenu dans des Cartes ou Conteneurs (par ex. « Détails de facturation »).

• En-têtes de formulaire : Étiquetez des groupes de champs (par ex. « Créer un nouveau contact »).

• Étiquettes de tableau de bord : Intitulez des sections de graphiques ou de métriques.

• Séparation visuelle : Segmentez les longues pages pour une meilleure lisibilité.

Choisir entre les composants Header et Card

Les deux peuvent servir de titres, mais choisissez selon les besoins :

). Cela lie automatiquement l'image capturée à	Idéal pour	Principales différences
En-tête	Titres simples et autonomes avec icônes/texte basiques.	Se concentre sur le texte/l’icône ; pas d’emplacement pour des composants imbriqués.
Carte	En-têtes intégrés avec contenu en dessous.	Inclut des emplacements pour d’autres éléments ; plus de flexibilité de mise en page et de style.

Configuration

Sélectionnez le Header sur le canevas pour accéder aux propriétés dans le panneau Propriétés à droite.

Propriétés

Celles-ci contrôlent le texte, les éléments visuels et le comportement.

Propriété	Type	Description	Exemple
par le véritable	Texte	Identifiant unique pour référencer dans des interactions/formules.	AccountHeader
Légende	Texte/Liaison (Optionnel)	Court texte au-dessus du titre ; statique ou lié à une Variable/Une Formule.	"Account" ou {!accountType}
Titre	Texte/Liaison	Titre principal ; liez-le pour le rendre dynamique (p. ex., champs d’enregistrement).	"Détails du compte" ou $Component.record.Name
Sous-titre	Texte/Liaison (Optionnel)	Texte sous le titre pour des détails.	"Secteur : {!industryVar}"
Nom de l'icône	Texte/Liaison (Optionnel)	Icône SLDS ou Avonni à côté du titre ; dynamique via une formule.	standard:account
Image d’arrière-plan	Texte/URL (optionnel)	URL pour l’arrière-plan ; liez à une variable pour obtenir du dynamisme.	"https://example.com/bg.jpg" ou {!bgImageVar}
Est joint	Booléen	Relie visuellement l’en-tête au contenu en dessous (par ex. supprime la bordure inférieure).	Activé pour un rendu intégré.

Astuce : Pour les icônes, référez-vous à la documentation Salesforce Lightning Design System (SLDS) pour les noms. Liez les propriétés pour rendre les en-têtes sensibles au contexte.

: La valeur maximale.

En-tête statique

1. Configurer les propriétés :

   • Légende : (Vide)

   • Titre : "Détails du compte"

   • Sous-titre : "Informations sur le compte en cours"

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

   • Image d'arrière-plan : (Aucune)

   • Est joint : Activé

Résultat : Un en-tête basique et immuable avec icône, idéal au-dessus d'une table de données statique.

En-tête dynamique sur la page d’enregistrement Account

1. Configurer les propriétés :

   • Définissez l’Objet de la page cible sur Account: Dans les paramètres de votre composant dynamique (par ex. dans le canevas ou les propriétés principales), sélectionnez « Account » comme Objet de page cible. Pourquoi faire cela ? Cela indique au composant qu’il est placé sur une page d’enregistrement Account, permettant l’accès aux données de l’enregistrement courant via des liaisons comme $Component.record.FieldName. Sans cela, les liaisons d’enregistrements dynamiques ne fonctionneront pas et l’en-tête resterait statique.

   • Légende: "Account"

   • Titre: $Component.record.Name (mappé au champ Nom du Account courant)

   • Sous-titre: $Component.record.Industry (mappé au champ Secteur de l’Account courant)

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

   • Image d’arrière-plan: (Aucun)

   • Est joint: Activé

Résultat : L’en-tête se met à jour par enregistrement (par ex. le titre affiche « Acme Corp »), avec un sous-titre dynamique.

Considérations clés

• Puissance dynamique : Liez la Légende/ le Titre/ le Sous-titre aux Variables d’Enregistrement ou à l’Objet de la page cible pour des en-têtes sensibles au contexte (par ex. spécifiques à l’utilisateur ou basés sur l’enregistrement).

• Sélection d’icône : Choisissez des icônes SLDS pertinentes ; testez pour la cohérence visuelle sur différents appareils.

• Images d’arrière-plan : Sélectionnez des images à fort contraste pour assurer la lisibilité du texte ; évitez la surutilisation pour prévenir la distraction.

• Option Is Joined : Basculer pour s’intégrer avec le contenu dessous.

• Accessibilité : Utilisez un texte clair et hiérarchique ; ajoutez un texte alternatif si les images/icônes en ont besoin via des attributs personnalisés.

• Performance : Les liaisons dynamiques peuvent nécessiter des formules efficaces pour éviter des retards au chargement.

Dépannage des problèmes courants

• Les liaisons ne se mettent pas à jour : Vérifiez les noms des ressources (par ex. $Component.record.Name) ; vérifiez le contexte de la page (App vs. Enregistrement).

• Icône non affichée : Confirmez un nom SLDS valide ; consultez la documentation Avonni/SLDS pour les options.

• L’arrière-plan masque le texte : Ajustez l’opacité de l’image via le CSS si pris en charge, ou choisissez des images plus claires.

• Pas de connexion visuelle : Assurez-vous que Is Joined est activé et qu’il n’y a pas de bordures conflictuelles dans les composants parents.

• Statique malgré les liaisons : Testez avec des données d’exemple ; actualisez le canevas ou prévisualisez dans l’application.

Résumé

Le composant Avonni Header fournit des titres flexibles et engageants pour structurer les composants dynamiques. Avec des liaisons et éléments visuels dynamiques, il est essentiel pour des interfaces utilisateur claires et contextuelles dans Salesforce. Pour les composants connexes, voir Avonni Card ou le Guide de mise en page.