YouTube ChannelSchedule a CallSubscribe for Updates

Schnellstart-Anleitung

Übersicht

Dieses Tutorial führt Sie durch das Erstellen einer "Meine aktiven Opportunities"-Komponente. Sie lernen, ein Karte, Datentabelleund reaktive Metriken zu kombinieren, um eine gefilterte Liste aktiver Opportunities und wichtige Zusammenfassungsinformationen anzuzeigen. Dies demonstriert grundlegende Avonni Dynamic Components-Fähigkeiten, ganz ohne Code.

Was Sie lernen werden

  • Ziehen und Ablegen von Komponenten.

  • Verbindung zu Salesforce-Daten (Opportunities).

  • Erstellen von reaktive Komponenten (Metriken, die sich basierend auf Auswahlen in der Datentabelle aktualisieren).

  • Grundlegende Komponenten-Konfiguration.

Dieses Beispiel ist als sanfte Einführung gedacht. Obwohl es nicht die komplexeste Komponente ist, die Sie bauen können, zeigt es Kernkonzepte, die Sie anwenden können, um robustere Lösungen zu erstellen.

Geführte Schritte

Bevor Sie beginnen: Installation und Einrichtung

Stellen Sie sicher, dass Sie diese Schritte abgeschlossen haben, bevor Sie Komponenten erstellen:

Installieren: Installieren Sie das Avonni Experiences Components-Paket aus dem AppExchange.

Lizenzen: Weisen Sie Lizenzen den Benutzern zu, die die Komponenten erstellen oder verwenden werden, über Setup > Installierte Pakete.

Berechtigungen: Weisen Sie die entsprechenden Berechtigungssätze zu:

  • Avonni Dynamic Components User: Für Endbenutzer, die Dynamic Components verwenden müssen.

  • Avonni Experience Cloud Components User: Für Endbenutzer, die den App Builder und Experience-Site-Komponenten verwenden müssen.

  • Avonni Experiences Admin: Für Komponentenersteller.

Siehe die Installationsseite für weitere Details

Wichtige Voraussetzung

Um das Avonni Dynamic Components-Paket erfolgreich zu installieren, aktivieren Sie bitte Lightning Web Security in Ihrer Organisation.

Schritt 1: Erstellen einer neuen Dynamic Component

Beginnen Sie, indem Sie die Avonni Components-App über den Salesforce App Launcher öffnen. Dann klicken Sie auf der "Alle Komponenten"-Seite auf "Neu" um eine neue Dynamic Component zu erstellen. Geben Sie Ihrer Komponente einen aussagekräftigen Namen (z. B. "MyActiveOpportunities") und eine optionale Beschreibung.

Schritt 2: Hinzufügen und Anpassen der Kartenkomponente

  • Ziehen Sie eine Kartenkomponente aus der Komponentenbibliothek auf die Leinwand.

  • Wählen Sie die Karte aus und setzen Sie den Titel im Eigenschaftenbereich auf "Meine aktiven Opportunities".

  • Optional können Sie ein Symbol mit dem Symbolnamen Eigenschaft hinzufügen oder das Styling über die Registerkarte Stil anpassen,

Schritt 3: Hinzufügen und Konfigurieren der Schaltfläche "Neue Opportunity"

  • Fügen Sie der Kopfzeile der Karte eine Schaltflächenkomponente hinzu. Im Eigenschaftenbereich

  • Setzen Sie das Label der Schaltfläche auf "Neue Opportunity"

  • Wählen Sie eine Varianteund fügen Sie optional ein Symbol hinzu.

  • Fügen Sie dann der Schaltfläche eine "Beim Klicken"-Interaktion hinzu. Konfigurieren Sie die Interaktion so, dass sie Navigiert zur Objektseite für einen neuen Opportunity Datensatz.

Schritt 4: Hinzufügen und Konfigurieren der Datentabelle

  • Fügen Sie eine Avonni-Datentabelle-Komponente innerhalb der Karte, unterhalb der Kopfzeile hinzu.

  • Stellen Sie im Eigenschaftenbereich die Datenquelle auf Avonni Query Data Sourceein und erstellen Sie eine Abfrage, um Opportunity Datensätze abzurufen.

  • Filtern Sie die Abfrage so, dass nur aktive Opportunities angezeigt werden (z. B. StageName nicht in 'Closed Won, Closed Lost').

  • Konfigurieren Sie abschließend die Spalten der Datentabelle, um die gewünschten Felder anzuzeigen. Wählen Sie die Felder aus, die Sie sehen möchten, wie Name, Phase und Betrag.

Schritt 5: Hinzufügen und Konfigurieren der Spalten-Komponente

  • Fügen Sie eine Spaltenkomponente aus der Komponentenbibliothek über der Datentabelle innerhalb in der Karte hinzu. Diese wird unsere Metriken aufnehmen.

  • Klicken Sie dreimal auf die Plus-Schaltfläche, um drei Spalten zu erstellen.

  • Stellen Sie dann im Eigenschaftenbereich für jede Spalte die Größe auf 4 und horizontale Ausrichtung auf x-klein ein, für gleiche Breiten und Abstände.

Schritt 6: Hinzufügen von Metrikkomponenten

  • Wir fügen Platzhalter-Metrikkomponenten zu den drei erstellten Spalten hinzu. Finden Sie die Metrikkomponente in der Komponentenbibliothek und ziehen Sie jeweils eine Instanz in jede Spalte innerhalb der Spaltenkomponente.

Sie können die Kopier- und Einfüge-Schaltflächen verwenden, um den Vorgang zum Erstellen mehrerer identischer Komponenten zu beschleunigen. Das hilft Ihnen, Ihre Komponenten schneller zu erstellen.

Schritt 7: Konfigurieren der Metrikkomponente zur Anzeige von Daten.

Konfigurieren Sie die Metrikkomponenten so, dass sie reaktive Summen basierend auf der Auswahl in der Datentabelle anzeigen. Wir richten eine Metrik ein und wiederholen dies für die anderen.

  1. Wählen Sie eine Metrikkomponente aus.

  2. Setzen Sie Datenquelle auf Avonni Query Data Source. Erstellen Sie eine Abfrage:

    • Objekt: Opportunity

    • Felder: Nur auswählen Betrag.

    • Aggregatfunktion: SUMME

  3. Fügen Sie der Abfrage einen reaktiven Filter hinzu:

    • Feld: AccountId

    • Operator: in

    • Wert: !DataTableApiName.selectedRowsKeyValue (ersetzen Sie DataTableApiName durch den API-Namen Ihrer Datentabelle).

  4. Setzen Sie die Label der Metrik (z. B. "Gesamtbetrag") und passen Sie die Formatierung an.

  5. Wiederholen Sie dies für die anderen Metriken und ändern Sie die Label und die Aggregatfunktion nach Bedarf.

Schritt 8: Stil der Metrikkomponente

Schritt 9: Aktivieren und fügen Sie Ihre Dynamic Component einer Seite hinzu

Glückwunsch! Sie haben Ihre erste Avonni Dynamic Component gebaut. Aktivieren Sie sie jetzt und fügen Sie sie einer Salesforce-Seite hinzu, damit Benutzer sie sehen können.

  1. Aktivieren Sie die Komponente

    • Stellen Sie sicher, dass Ihre Avonni Dynamic Component aktiviert ist. Nur aktivierte Komponenten können Seiten hinzugefügt werden.

  2. Gehen Sie zur Zielseite

    • Navigieren Sie in Salesforce zu der spezifischen App-Seite oder Datensatzseite, auf der Sie Ihre neue Komponente anzeigen möchten. Beispielsweise könnten Sie einen bestimmten Account-Datensatz öffnen und die "Accounts"-Registerkarte auswählen.

  3. Öffnen Sie den Lightning App Builder

    • Klicken Sie auf das Setup Zahnrad-Symbol (normalerweise in der oberen rechten Ecke von Salesforce).

    • Wählen Sie Seite bearbeiten. Dies öffnet den Lightning App Builder, in dem Sie das Seitenlayout anpassen können.

  4. Finden Sie Ihre Komponente

    • Sehen Sie sich das linke Bedienfeld im Lightning App Builder an, das verfügbare Komponenten auflistet.

    • Scrollen Sie nach unten zum Benutzerdefiniert Abschnitt. Ihre Avonni Dynamic Component wird hier aufgelistet.

  5. Ziehen und Ablegen

    • Klicken und ziehen Sie Ihre Avonni Dynamic Component aus der Liste an die gewünschte Stelle im Seitenlayout. Sie können sie in jedem der vorgesehenen Komponentenbereiche platzieren.

  6. Bestätigen der Auswahl

    • Sobald die Komponente platziert ist, erscheint ein Eigenschaftsbereich auf der rechten Seite des App Builders. Wählen Sie die spezifische Avonni Dynamic Component, die Sie in der verfügbaren Liste anzeigen möchten. Dies stellt sicher, dass die richtige Komponente geladen wird, insbesondere wenn Sie mehrere Avonni-Komponenten mit ähnlichen Namen haben.

  7. Seite speichern und aktivieren (Wichtig!):

    • Klicken Sie auf Speichern im App Builder.

Bringen Sie Ihre Fähigkeiten auf die nächste Stufe!

Herzlichen Glückwunsch! Sie haben die Schnellstartanleitung abgeschlossen und verfügen über funktionierende Avonni Dynamic Components. Jetzt ist es an der Zeit, den vollen Funktionsumfang zu erkunden.

Schauen Sie sich unsere geführten Projekte an um ein Meisterbauer zu werden 👇

Avonni Projects

Nächste Schritte:

Festgefahren oder Fragen?

Wenn Sie während dieses Tutorials auf Probleme gestoßen sind oder zeigen möchten, was Sie gebaut haben:

Treten Sie unserer Trailblazer Community Group bei, wo Sie:

  • Screenshots Ihrer Komponente zur Rückmeldung teilen können

  • Varianten dieses Tutorials sehen können, die andere erstellt haben

  • Fragen zu den nächsten Schritten Ihrer Lernreise stellen können

  • Inspiration für Ihr nächstes Dynamic Component-Projekt erhalten können

Viele Entwickler teilen ihre ersten Komponenten in der Community – es ist eine großartige Möglichkeit, Ermutigung zu bekommen und von anderen zu lernen, die dieselbe Reise antreten!

Zuletzt aktualisiert

War das hilfreich?