YouTube ChannelSchedule a CallSubscribe for Updates

Dynamic Component-Panel öffnen

Übersicht

Die „Dynamisches Komponenten-Panel öffnen" Interaktion ermöglicht es Ihnen, eine andere Avonni-Dynamische Komponente in einem Seitenbereich anzuzeigen, der vom Bildschirmrand hereinschiebt. Im Gegensatz zu Modals, die den gesamten Bildschirm überdecken, erscheinen Panels neben Ihren vorhandenen Inhalten und eignen sich daher perfekt zum Anzeigen von Details, Formularen oder zusätzlichen Informationen, ohne den Kontext dessen zu verlieren, was Sie gerade angesehen haben.

Wichtige Konzepte

Bevor Sie sich mit der Konfiguration befassen, ist es wichtig, die Architektur von Panel-Interaktionen und die Beziehungen der beteiligten Komponenten zu verstehen.

Die zwei Komponenten

Bei Verwendung dieser Interaktion arbeiten Sie mit zwei separaten Dynamischen Komponenten:

  1. Die Hauptkomponente (ausgehende Komponente):

    • Hier beginnen die Benutzer

    • Enthält den Auslöser (Schaltfläche, Zeilenaktion in einer Tabelle usw.)

    • Bleibt im Hintergrund sichtbar, wenn das Panel geöffnet wird

  2. Die Panel-Komponente (gestartete Komponente):

    • Das ist das, was im Panel angezeigt wird

    • Eine vollständig separate Dynamische Komponente, die Sie speziell für diesen Zweck erstellen

    • Erhält Daten von der Hauptkomponente über Eingabevariablen

Sie müssen beide Komponenten erstellen, bevor Sie diese Interaktion konfigurieren.

Aktionen nach der Ausführung (optional):

Name der Dynamischen Komponente

Wählen Sie, welche Dynamische Komponente im Panel angezeigt werden soll. Wählen Sie aus dem Dropdown Ihrer verfügbaren Dynamischen Komponenten die zuvor erstellte und aktivierte Panel-Komponente aus.

Eingabevariablen (Daten an das Panel übergeben)

Hier verbinden Sie Daten aus Ihrer Hauptkomponente mit den Eingabevariablen der Panel-Komponente. Für jedes Datenstück, das Sie übergeben möchten, klicken Sie "Element hinzufügen" um eine neue Zuordnung zu erstellen.

Namensfeld

Ein Dropdown listet alle Variablen der Panel-Komponente auf, die mit "Für Eingabe verfügbar." markiert sind. Wählen Sie die Variable, die Sie füllen möchten, z. B. inputAccountId.

Wichtig

Stellen Sie sicher, dass Variablen als "Für Eingabe verfügbar" in der Komponente markiert sind, die Sie als Panel öffnen möchten. Wenn Sie Ihre Variable nicht im Dropdown sehen können, gehen Sie zurück zur Panel-Komponente und vergewissern Sie sich, dass das Kontrollkästchen "Für Eingabe verfügbar" für diese Variable aktiviert ist.

Wertfeld

Geben Sie die Feldwerte des Datensatzes ein, die Sie als Eingabevariablen an die Komponente übergeben möchten.

Beispiele (nur zur Veranschaulichung)

  • Datensatz: Name - Übergeben Sie das Feld Account Name

  • Datensatz: E-Mail - Übergeben Sie das Feld Contact Email

  • Datensatz: Betrag - Übergeben Sie das Feld Opportunity Amount

  • Datensatz: Status - Übergeben Sie das Feld Case Status

Hinweis: Die verfügbaren Feldwerte hängen davon ab, wie Ihre Hauptkomponente konfiguriert ist und auf welche Datensatzdaten sie zugreifen kann.

Kopfzeile

Der Titel, der oben im Panel angezeigt wird. Sie können dies auf zwei Arten konfigurieren:

  • Klicken Sie auf den Feldnamenselektor, um einen dynamischen Wert aus Ihrer Komponente auszuwählen

  • Geben Sie statischen Text direkt mit dem benutzerdefinierten Wert ein.

Position

Wählen Sie, von welcher Seite des Bildschirms das Panel hereinschieben soll. Sie können Links wählen, damit das Panel von der linken Seite erscheint, oder Rechts (am häufigsten), damit es von der rechten Seite erscheint. Die meisten Anwendungen verwenden "Rechts", da dies den Standard-UI-Konventionen für Detail-Panels und Seitennavigation entspricht.

Überlagert

Steuert, ob das Panel die Hauptkomponente überlagert. Wenn aktiviert, wird das Panel über (oben auf) der Hauptkomponente angezeigt und der Hintergrund abgedunkelt oder verdeckt. Wenn deaktiviert, wird das Panel neben der Hauptkomponente ohne Überlagerung angezeigt.

Wann Überlagert zu verwenden ist:

  • Wenn Sie die Aufmerksamkeit des Benutzers vollständig auf das Panel lenken möchten

  • Für modales Verhalten, während weiterhin ein Panel-Format verwendet wird

  • Wenn die Hauptinhalte während geöffneter Panel nicht benötigt werden

Außen

Steuert, ob das Panel innerhalb oder außerhalb der Grenzen der Komponente erscheint. Wenn aktiviert, wird das Panel außerhalb des Containers der Komponente angezeigt und nutzt möglicherweise mehr Bildschirmplatz. Wenn deaktiviert, wird das Panel innerhalb des zugewiesenen Raums der Komponente angezeigt.

Wann Außen zu verwenden ist:

  • Wenn Ihre Komponente eine begrenzte Breite hat und Sie mehr Panel-Fläche benötigen

  • Für Layouts von Komponenten, die die gesamte Seite nutzen und Panels bis zum Bildschirmrand erweitern sollen

  • Wenn Sie möchten, dass das Panel sich vom Komponentencontainer abhebt

Dann setzen Sie im Eigenschaftenfeld jede Spalte

Wählen Sie, wie breit das Panel sein soll:

  • Klein: Schmaler Bereich, gut für einfache Formulare oder kurze Informationen

  • Mittel: Ausgewogene Breite, funktioniert für die meisten Anwendungsfälle

  • Groß: Breiter Bereich, geeignet für Detailansichten oder komplexe Formulare

  • X-Large: Sehr breiter Bereich, für umfangreiche Inhalte oder Datentabellen

  • Voll: Panel nimmt die gesamte verfügbare Breite ein

Tipp: Beginnen Sie mit Mittel und passen Sie an basierend auf Ihrem Inhaltsbedarf. Größere Panels funktionieren besser, wenn Außen aktiviert ist

Abstand (Padding)

Steuert den inneren Abstand um den Inhalt des Panels. Klein bietet minimale Polsterung mit näher an den Panelrändern platziertem Inhalt für ein kompaktes Erscheinungsbild. Mittel bietet ausgewogene Polsterung mit angenehmem Abstand und wird für die meisten Fälle empfohlen. Groß bietet großzügige Polsterung mit mehr Freiraum um den Inhalt.

Schließen-Symbol ausblenden

Steuert, ob die Standard-Schließen-(X)-Schaltfläche in der Panel-Kopfzeile angezeigt wird. Wenn aktiviert, ist das Schließen-Symbol ausgeblendet und Benutzer müssen das Panel auf anderen Wegen schließen. Wenn deaktiviert, ist das Schließen-Symbol sichtbar (Standardverhalten).

Wann das Schließen-Symbol ausgeblendet werden sollte:

  • Wenn Sie Benutzer durch einen bestimmten Ablauf oder Prozess zwingen möchten

  • Wenn Sie benutzerdefinierte Schließen/Abbrechen-Schaltflächen im Panel-Inhalt bereitstellen

  • Für Assistenten-ähnliche Abläufe, bei denen Benutzer alle Schritte abschließen sollen

Warnung: Wenn Sie das Schließen-Symbol ausblenden, stellen Sie sicher, dass Benutzer eine andere einfache Möglichkeit haben, das Panel zu schließen (z. B. eine Abbrechen- oder Schließen-Schaltfläche in Ihrer Panel-Komponente), sonst könnten sie sich gefangen fühlen.

Beim Schließen

Definieren Sie, was passiert, wenn das Panel geschlossen wird (über das Schließen-Symbol, eine benutzerdefinierte Schaltfläche oder andere Mittel). Sie können mehrere Arten von Aktionen konfigurieren:

Toast-Benachrichtigung anzeigen

Zeigt beim Schließen des Panels eine Meldung an, z. B. „Änderungen erfolgreich gespeichert“ oder „Panel geschlossen.“ Dies ist nützlich, um den Abschluss einer Aufgabe zu bestätigen.

Alle Abfragen aktualisieren

Aktualisiert automatisch alle Datenquellen in der Hauptkomponente. Verwenden Sie dies, wenn Benutzer Daten im Panel ändern können, damit die Hauptkomponente aktualisierte Informationen anzeigt. Zum Beispiel, wenn ein Benutzer ein Konto im Panel bearbeitet, das Panel schließt und die Kontotabelle sich automatisch aktualisiert.

Datensätze abrufen

Beim Schließen gezielt bestimmte Datensätze abrufen. Dies ist gezielter als "Alle Abfragen aktualisieren" und nützlich, wenn Sie genau wissen, welche Daten aktualisiert werden müssen.

Schritt-für-Schritt-Beispiel

Konto-Detail-Panel

Lassen Sie uns ein vollständiges Beispiel erstellen, bei dem Benutzer in einer Tabelle auf ein Konto klicken können, um dessen vollständige Details in einem Seitenpanel zu sehen.

Szenarioübersicht

  • Hauptkomponente: Zeigt eine Liste von Konten in einer Datentabelle an

  • Panel-Komponente: Zeigt detaillierte Kontoinformationen an

  • Interaktion: Klicken Sie auf eine "Details anzeigen"-Schaltfläche in einer Zeile, um das Panel für dieses Konto zu öffnen

1

Erstellen Sie die Panel-Komponente

  • Neue Dynamische Komponente erstellen

    • Name: "Konto-Detail-Panel"

    • Beschreibung: "Zeigt detaillierte Kontoinformationen an"

  • Eingabevariable erstellen

    • Erstellen Sie eine neue Ressource und wählen Sie dann Variable

    • API-Name: inputAccountId

    • Datentyp: Text

    • Für Eingabe verfügbar: Angekreuzt (Nicht vergessen!)

    >> Diese Variable erhält die Konto-ID von der Hauptkomponente

  • Datensatzvariable erstellen

    • Erstellen Sie eine weitere neue Ressource und wählen Sie dann Variable

    • API-Name: accountRecord

    • Datentyp: Datensatz

    • Objekttyp: Account

    >> Diese Variable speichert den abgerufenen Account-Datensatz

  • "Beim Laden"-Interaktion hinzufügen, um Account abzurufen

    • Fügen Sie eine "Beim Laden"-Interaktion zu Ihrer Panel-Komponente hinzu

    • Aktion: Datensätze abrufen

    • Datensatzvariable: Wählen Sie accountRecord (die gerade erstellte Datensatzvariable)

    • Datensatz-ID: Auf inputAccountId (die Eingabevariable) abbilden

    >> Dies ruft den Account-Datensatz ab, wenn das Panel geladen wird, und verwendet die von der Hauptkomponente übergebene ID

  • Layout des Panels entwerfen

    • Fügen Sie Anzeige-Text-Komponenten für Account-Felder hinzu:

      • Kontoname: accountRecord.Name

      • Branche: accountRecord.Industry

      • Jahresumsatz: accountRecord.AnnualRevenue

      • Telefon: accountRecord.Phone

    • Fügen Sie alle anderen gewünschten Komponenten hinzu (Bilder, verwandte Listen usw.)

  • Speichern und aktivieren

    • Speichern Sie Ihre Panel-Komponente

    • Klicken Sie auf Aktivieren

2

Konfigurieren Sie die Hauptkomponente

  • Datentabelle hinzufügen

    • Fügen Sie Ihrer Hauptkomponente eine Avonni-Datentabelle hinzu

    • Konfigurieren Sie sie so, dass Account-Datensätze mithilfe einer Abfrage-Datenquelle angezeigt werden

  • Tab im Komponentenmenü.

    • Fügen Sie in der Spaltenkonfiguration der Datentabelle eine neue Spalte hinzu

    • Setzen Sie den Spaltentyp auf einen der folgenden:

      • Aktion

      • Schaltfläche

      • Schaltfläche Symbol

    • Dies erstellt ein anklickbares Element in jeder Zeile, auf das Benutzer klicken können, um das Panel zu öffnen

    • Bezeichnung: "Details anzeigen"

    • Wählen Sie ein geeignetes Symbol (optional, z. B. ein Auge- oder Info-Symbol)

  • Konfigurieren Sie die Interaktion

    • Wählen Sie die Zeilenaktion "Details anzeigen"

    • Typ: Dynamisches Komponenten-Panel öffnen

  • Panel-Einstellungen konfigurieren Dynamische Komponenten API-Name

    • Auswählen: Account_Details_Panel

    Eingabeeigenschaften:

    • Klicken Sie "Element hinzufügen"

    • Name: inputAccountId (aus dem Dropdown)

    • Wert: Datensatz: Id

    Beim Schließen:

    • Leer lassen (keine Aktualisierung nötig, da wir nur ansehen und nicht bearbeiten)

  • Speichern Sie Ihre Hauptkomponente

3

Testen Sie es

  • Aktivieren Sie sie und fügen Sie sie zu einer Seite hinzu

    • Fügen Sie Ihre Hauptkomponente einer Lightning-Seite hinzu

    • Speichern und aktivieren Sie die Seite

  • Testen Sie die Interaktion

    • Suchen Sie ein Konto in der Tabelle

    • Klicken Sie auf die Aktion "Details anzeigen"

    • Das Panel sollte von rechts hereinschieben

    • Kontodetails sollten für das angeklickte Konto angezeigt werden

    • Klicken Sie auf das X oder außerhalb des Panels, um es zu schließen

Fehlerbehebung

Panel öffnet sich, zeigt aber keine Daten an

  • Überprüfen Sie, ob Eingabevariablen in der Panel-Komponente als "Für Eingabe verfügbar" markiert sind.

  • Überprüfen Sie, ob Sie den richtigen Wert übergeben (verwenden Sie die Browser-Konsole zum Debuggen)

  • Stellen Sie sicher, dass die "Beim Laden"-Aktion der Panel-Komponente die Daten korrekt mit der Eingabevariable abruft

Eingabevariable erscheint nicht im Dropdown

  • Gehen Sie zur Panel-Komponente

  • Finden Sie die Variable

  • Stellen Sie sicher, dass das Kontrollkästchen "Für Eingabe verfügbar" aktiviert ist

  • Speichern und reaktivieren Sie die Panel-Komponente

  • Aktualisieren Sie die Konfigurationsseite Ihrer Hauptkomponente

Falsche Daten werden im Panel angezeigt

  • Überprüfen Sie den Eingabeeigenschafts-Wert — übergeben Sie das richtige Feld/die richtige Variable?

  • Vergewissern Sie sich, dass Sie .firstSelectedRow für Datentabellen verwenden

  • Verwenden Sie den Debug-Modus, um zu prüfen, welcher Wert tatsächlich übergeben wird

Panel öffnet sich überhaupt nicht

  • Überprüfen Sie, ob die Panel-Komponente aktiviert ist

  • Prüfen Sie die Browser-Konsole auf Fehler

  • Stellen Sie sicher, dass der API-Name der Panel-Komponente korrekt ist

  • Überprüfen Sie, ob die Interaktion der auslösenden Komponente korrekt konfiguriert ist

Nächste Schritte

Jetzt, wo Sie Panel-Interaktionen verstehen, sollten Sie erwägen:

  • Wiederverwendbare Panel-Komponenten für häufige Aufgaben zu erstellen

  • Eine Bibliothek von Detail-/Bearbeitungs-Panels für verschiedene Objekte anzulegen

  • Panels mit anderen Interaktionen für komplexe Workflows zu kombinieren

  • Panels innerhalb von Panels für hierarchische Navigation zu verwenden (fortgeschritten)

Brauchen Sie mehr Hilfe?

Wenn Sie Fragen zur Implementierung von Panel-Interaktionen, zur Konfiguration von Eingabevariablen oder zur Fehlerbehebung beim Panel-Verhalten haben, zögern Sie nicht, sich zu melden. Wir sind hier, um Ihnen zu helfen, intuitive Multi-Komponenten-Erlebnisse mit Avonni Dynamic Components zu erstellen.

Zuletzt aktualisiert

War das hilfreich?