YouTube ChannelSchedule a CallSubscribe for Updates

Dynamische Komponente

Die Avonni Dynamic Component-Komponente ermöglicht es Ihnen, eine Dynamic Component innerhalb einer anderen einzubetten.

Übersicht

Das Dynamic Component ist eine Containerkomponente, mit der Sie andere Avonni-Dynamic-Komponenten einbetten können. Dies ist der Schlüssel zum Erstellen wiederverwendbarer Komponenten und zum Aufbau komplexer, hierarchischer Layouts in Avonni Dynamic Components. Betrachten Sie es als Möglichkeit, eine vorgefertigte Komponente (oder einen Abschnitt einer Komponente) in eine andere Komponente einzufügen.

Dies bietet mehrere entscheidende Vorteile:

  • Wiederverwendbarkeit: Erstellen Sie ein komplexes UI-Element (z. B. eine benutzerdefinierte zugehörige Liste, ein spezialisiertes Formular, ein Mini-Dashboard) einmal als separate Dynamic Component. Verwenden Sie dann die Dynamic Component-Komponente, um diese vorgefertigte Komponente an mehreren Stellen einzubetten – auf verschiedenen Datensatzseiten, App-Seiten oder sogar innerhalb anderer Dynamic Components.

  • Modularität: Zerlegen Sie große, komplexe Komponenten in kleinere, besser handhabbare Teile. Dadurch werden Ihre Komponenten leichter verständlich, wartbar und aktualisierbar.

  • Organisation: Stellen Sie eine klare hierarchische Struktur für Ihre UI her, indem Sie verwandte Elemente logisch gruppieren.

  • Kapselung: Die inneren Funktionsweisen der verschachtelten Komponente sind vor der übergeordneten Komponente verborgen. Das reduziert Komplexität und verhindert Namenskonflikte.

So funktioniert es

  1. Erstellen Sie die "Child"-Komponente: Zuerst erstellen Sie die Dynamic Component, die Sie einbetten (die "Child"-Komponente). Diese gewöhnliche Dynamic Component wird mit einer beliebigen Kombination von Avonni-Komponenten aufgebaut. Definieren Sie alle Eingabe und Ausgabe- Variablen, die Sie zur Kommunikation mit der übergeordneten Komponente benötigen.

  2. Fügen Sie die Dynamic Component-Komponente hinzu: Ziehen Sie in Ihrer "Parent"-Dynamic-Component (dort, wo Sie das Child einbetten möchten) eine Dynamic Component Komponente aus der Komponentenbibliothek auf die Leinwand.

  3. Wählen Sie die anzuzeigende Komponente aus: Im Eigenschaftenbereich der Dynamic Component-Komponente finden Sie eine Einstellung (mit der Bezeichnung "Name"). Verwenden Sie den Komponentenselektor, um auszuwählen die Namen der Dynamic Component, die Sie in Schritt 1 erstellt haben.

Anwendungsfälle

  • Wiederverwendbare zugehörige Listen: Erstellen Sie einmal eine benutzerdefinierte "Related Contacts"-Komponente und verwenden Sie dann die Dynamic Component-Komponente, um sie auf Account-, Opportunity- oder anderen Datensatzseiten einzubetten. Übergeben Sie die ID des übergeordneten Datensatzes als Eingabevariable, um die zugehörige Liste zu filtern.

  • Benutzerdefinierte Formulare: Erstellen Sie spezialisierte Formulare als separate Dynamic Components und betten Sie diese bei Bedarf in andere Komponenten ein.

  • Mini-Dashboards: Erstellen Sie kleine, eigenständige Dashboards (z. B. ein Diagramm und eine Übersichtstabelle) als Dynamic Components und betten Sie diese dann in größere Dashboards oder Datensatzseiten ein.

  • Komplexe Layouts: Zerlegen Sie ein komplexes Seitenlayout in kleinere, besser handhabbare Abschnitte, die jeweils als separate Dynamic Component implementiert sind.

  • Bedingte Abschnitte: Verwenden Sie eine Dynamic Component-Komponente in Kombination mit Sichtbarkeitsregeln, um gesamte Abschnitte Ihrer Benutzeroberfläche je nach Bedingungen ein- oder auszublenden.

Beispiel: Wiederverwendbare "Related Contacts"

  1. Erstellen Sie die "RelatedContacts"-Komponente:

    • Erstellen Sie eine Listenansicht, benötigen Sie oft zusätzliche Konfiguration (die vom spezifischen Avonni-Komponenten abhängen kann). Lesen Sie die Dokumentation der Komponente für Details. Dynamic Component mit dem Namen RelatedContacts.

    • Setzen Sie deren Zielobjekt-API-Namens auf Konto (angenommen, Sie verwenden dies auf Account-Seiten).

    • Fügen Sie eine Datentabellen-Komponente hinzu, um Kontakte anzuzeigen.

    • Konfigurieren Sie die Abfrage der Datentabelle so, dass Kontakte abgerufen werden, die mit einem Account verknüpft sind. Verwenden Sie einen Filter: AccountId equals {!inputAccountId}.

    • Erstellen Sie eine Text Variablenressource namens inputAccountId und markieren Sie ihn als Für Eingabe verfügbar. Dies erhält die Account-ID von der übergeordneten Komponente.

    • Speichern und Aktivieren RelatedContacts.

  2. Erstellen Sie die "AccountDetailPage"-Komponente:

    • Erstellen Sie eine weitere Dynamic Component namens AccountDetailPage.

    • Setzen Sie deren Zielobjekt-API-Namens auf Konto.

    • Fügen Sie alle Komponenten hinzu, die Sie zur Anzeige der Account-Details wünschen.

  3. Betten Sie "RelatedContacts" ein:

    • In AccountDetailPage, ziehen Sie eine Dynamic Component Ziehen Sie eine Avonni-

    • Wählen Sie in den Eigenschaften der Dynamic Component-Komponente RelatedContacts als die anzuzeigende Komponente aus.

    • Sie sehen nun die inputAccountId Eingabevariable aufgelistet. Binden Sie dies an $Component.record.Id. Dadurch wird die ID des aktuellen Accounts an die verschachtelte Komponente übergeben.

  4. Zur Account-Seite hinzufügen: Fügen Sie die AccountDetailPage Komponente zu einer Account-Datensatzseite hinzu.

Nun wird auf jeder Account-Datensatzseite die AccountDetailPage Komponente angezeigt. Diese wird wiederum die einbetten die RelatedContacts Komponente aufrufen und ihr die ID des aktuellen Accounts übergeben. Die RelatedContacts Komponente verwendet diese ID, um ihre Datentabelle zu filtern und die zugehörigen Kontakte anzuzeigen.

Performance-Überlegungen

Während verschachtelte Komponenten große Flexibilität bieten, kann übermäßiges oder schlecht gestaltetes Verschachteln Interaktionen die Leistung beeinträchtigen. Hier sind einige Tipps:

  • Vermeiden Sie tiefes Verschachteln: Begrenzen Sie die Ebenen der Verschachtelung. Sehr tiefe Hierarchien können schwerer zu verwalten sein und das Rendern verlangsamen.

  • Verwenden Sie Eingabe-/Ausgabevariablen: Geben Sie Daten zwischen übergeordneten und untergeordneten Komponenten über Eingabe-/Ausgabevariablen weiter, anstatt jede verschachtelte Komponente ihre eigenen Daten unabhängig abfragen zu lassen.

  • Bedingte Sichtbarkeit: Verwenden Sie Sichtbarkeitsregeln, um zu verhindern, dass unnötige Komponenten geladen werden.

  • Überwachen Sie das Laden von Daten: Achten Sie darauf, wie Daten innerhalb verschachtelter Komponenten geladen werden. Vermeiden Sie redundante Abfragen.

Zuletzt aktualisiert

War das hilfreich?