Header

Der Avonni Header bietet eine einfache Möglichkeit, Titel, Untertitel, Symbole, Bilder und Navigationslinks hinzuzufügen, um informative und visuell ansprechende Header zu erstellen.

Übersicht

Die Avonni Header-Komponente fügt Ihren Salesforce Dynamic Components Titel, Untertitel, Symbole, Bilder und Struktur hinzu. Als Layoutelement liegt ihr Fokus auf der Darstellung, um Aufmerksamkeit zu erzeugen und Kontext zu liefern, ohne an bestimmte Datenobjekte gebunden zu sein.

Hauptmerkmale umfassen:

• Textelemente: Beschriftung, Titel und Untertitel für geschichtete Informationen.

• Visuelle Elemente: Symbole und Hintergrundbilder für mehr Anziehungskraft.

• Dynamische Bindung: Verknüpfung mit Variablen, Formeln oder Datensatzfeldern für Anpassungsfähigkeit.

• Integration: "Joined"-Option, um mit dem darunterliegenden Inhalt zu verschmelzen.

• Einfachheit: Schnelle Einrichtung von Headern in Seiten, Abschnitten oder Formularen.

Anwendungsfälle

• Seitenüberschriften: Top-Level-Titel auf App- oder Datensatzseiten (z. B. „Account Overview“).

• Abschnitts-Trennlinien: Organisieren Sie Inhalte in Cards oder Containern (z. B. „Billing Details“).

• Formularüberschriften: Beschriften Sie Eingabegruppen (z. B. „Create New Contact“).

• Dashboard-Beschriftungen: Titel für Diagramme oder Metrikbereiche.

• Visuelle Trennung: Gliedern Sie lange Seiten für bessere Lesbarkeit.

Auswahl zwischen Header- und Card-Komponenten

Beide können als Überschriften dienen, wählen Sie jedoch je nach Bedarf:

Komponente	Am besten geeignet für	Wesentliche Unterschiede
Kopfzeile	Einfache, eigenständige Titel mit grundlegenden Symbolen/Text.	Konzentriert sich auf Text/Symbol; kein Slot für verschachtelte Komponenten.
Karte	Integrierte Überschriften mit Inhalt darunter.	Enthält Slots für andere Elemente; bietet mehr Layout-Flexibilität und Styling.

Konfiguration

Wählen Sie den Header auf der Arbeitsfläche aus, um die Eigenschaften im rechten Eigenschaftenbereich zu öffnen.

Eigenschaften

Diese steuern Text, visuelle Elemente und Verhalten.

Eigenschaft	Typ	Beschreibung	Beispiel
API-Namen	Text	Eindeutige Kennung zur Referenzierung in Interaktionen/Formeln.	AccountHeader
Untertitel	Text/Bindung (Optional)	Kurzer Text über dem Titel; statisch oder an Variable/Formel gebunden.	"Account" oder {!accountType}
Titel	Text/Bindung	Hauptüberschrift; zur Dynamik an bindbare Werte (z. B. Datensatzfelder) binden.	"Account Details" oder $Component.record.Name
Untertitel	Text/Bindung (Optional)	Text unter dem Titel für Details.	"Industry: {!industryVar}"
Symbolname	Text/Bindung (Optional)	SLDS- oder Avonni-Symbol neben dem Titel; über Formel dynamisch.	standard:account
Hintergrundbild	Text/URL (Optional)	URL für Hintergrund; für Dynamik an Variable binden.	"https://example.com/bg.jpg" oder {!bgImageVar}
Ist verbunden	Boolean	Verbindet den Header visuell mit dem darunterliegenden Inhalt (z. B. entfernt die untere Rahmenlinie).	Eingeschaltet für integriertes Erscheinungsbild.

Tipp: Für Symbole beziehen Sie sich auf die Salesforce Lightning Design System (SLDS)-Dokumentation für Namen. Binden Sie Eigenschaften, um Header kontextabhängig zu machen.

Beispiele

Statischer Kopfbereich

1. Eigenschaften konfigurieren:

   • Beschriftung: (Leer)

   • Titel: "Kontodetails"

   • Untertitel: "Informationen zum aktuellen Konto"

   • Symbolname: standard:account

   • Hintergrundbild: (Keines)

   • Ist verbunden: Ein

Ergebnis: Ein einfacher, unveränderlicher Kopfbereich mit Symbol, ideal über einer statischen Datentabelle.

Dynamischer Header auf der Account-Datensatzseite

1. Eigenschaften konfigurieren:

   • Setzen Sie das Zielseitenobjekt auf Account: Wählen Sie in den Einstellungen Ihrer Dynamic Component (z. B. in der Arbeitsfläche oder den Haupteigenschaften) „Account“ als Zielseiten-Objekt. Warum das tun? Das teilt der Komponente mit, dass sie auf einer Account-Datensatzseite platziert ist, wodurch der Zugriff auf die Daten des aktuellen Datensatzes über Bindings wie $Component.record.FieldName möglich wird. Andernfalls funktionieren dynamische Datensatzbindungen nicht und der Header bliebe statisch.

   • Untertitel: "Account"

   • Titel: $Component.record.Name (zugeordnet zum Namensfeld des aktuellen Accounts)

   • Untertitel: $Component.record.Industry (zugeordnet zum Branchenfeld des aktuellen Accounts)

   • Symbolname: standard:account

   • Hintergrundbild: (Keine)

   • Ist verbunden: Ein

Ergebnis: Der Header aktualisiert sich pro Datensatz (z. B. zeigt der Titel „Acme Corp“), mit dynamischem Untertitel.

Wesentliche Überlegungen

• Dynamische Möglichkeiten: Binden Sie Beschriftung/Titel/Untertitel an Datensatzvariablen oder das Zielseitenobjekt für kontextabhängige Header (z. B. benutzerspezifisch oder datensatzbasiert).

• Symbolauswahl: Wählen Sie relevante SLDS-Symbole; testen Sie die visuelle Konsistenz auf verschiedenen Geräten.

• Hintergrundbilder: Wählen Sie hochkontrastige Bilder, um die Lesbarkeit des Textes zu gewährleisten; vermeiden Sie Übernutzung, um Ablenkung zu verhindern.

• Ist Joined-Option: Umschalten, um mit dem darunterliegenden Inhalt zu integrieren.

• Barrierefreiheit: Verwenden Sie klaren, hierarchischen Text; fügen Sie bei Bedarf Alt-Text hinzu, wenn Bilder/Symbole über benutzerdefinierte Attribute Beschreibungen benötigen.

• Leistung: Dynamische Bindungen können effiziente Formeln erfordern, um Ladeverzögerungen zu vermeiden.

Fehlerbehebung bei häufigen Problemen

• Bindings aktualisieren sich nicht: Überprüfen Sie Ressourcennamen (z. B. $Component.record.Name); prüfen Sie den Seitenkontext (App vs. Datensatz).

• Symbol wird nicht angezeigt: Bestätigen Sie einen gültigen SLDS-Namen; durchsuchen Sie die Avonni/SLDS-Dokumentation nach Optionen.

• Hintergrund überlappt Text: Passen Sie die Bildopazität über CSS an, falls unterstützt, oder wählen Sie hellere Bilder.

• Keine visuelle Verbindung: Stellen Sie sicher, dass Ist Joined aktiviert ist und keine widersprüchlichen Rahmen in übergeordneten Komponenten vorhanden sind.

• Statisch trotz Bindings: Testen Sie mit Beispieldaten; aktualisieren Sie die Arbeitsfläche oder die Vorschau in der App.

Zusammenfassung

Die Avonni Header-Komponente liefert flexible, ansprechende Titel zur Strukturierung von Dynamic Components. Mit dynamischen Bindungen und visuellen Elementen ist sie unerlässlich für klare, kontextbezogene Benutzeroberflächen in Salesforce. Für verwandte Komponenten siehe Avonni Card oder Layout Guide.