Schnellstartanleitung

Überblick

In diesem Tutorial erstellst du eine funktionierende "Meine aktiven Opportunities"-Komponente mit einer Datentabelle, Metriken und einer Schaltfläche zum Erstellen neuer Datensätze — alles ohne Code zu schreiben.

Was du bauen wirst: Eine Karte, die aktive Opportunities in einer Datentabelle anzeigt, mit drei Metriken, die sich basierend auf deiner Zeilenauswahl aktualisieren, sowie einer "Neue Opportunity"-Schaltfläche.

Zeit: ~15 Minuten

Was du lernen wirst

• Ziehen und Ablegen von Komponenten.

• Verbindung zu Salesforce-Daten herstellen (Opportunities).

• Erstellen reaktiver Komponenten (Metriken, die sich basierend auf Auswahl in der Datentabelle aktualisieren).

• Grundlegende Komponenten-Konfiguration.

---

Geführte Schritte

Bevor du beginnst: Installation und Einrichtung

Stelle sicher, dass du diese Schritte abgeschlossen hast, bevor du Komponenten erstellst:

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

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

Berechtigungen: Weise 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 Components verwenden müssen.

• Avonni Experiences Admin: Für Komponenten-Entwickler.

Siehe die Installationsseite für weitere Details

Wichtige Anforderung

Um das Avonni Dynamic Components-Paket erfolgreich zu installieren, aktiviere bitte Lightning Web Security in deiner Organisation.

1

Erstelle eine neue Komponente

1. Öffne die Avonni Experiences App über den Salesforce App Launcher.

2. Auf der Seite Alle Komponenten klicke auf Neu.

3. Gib einen Namen ein (z. B. MyActiveOpportunities) und eine optionale Beschreibung.

4. Klicke Speichern

2

Füge eine Karte hinzu

Die Kartenkomponente dient als Container für alles andere.

1. Ziehe aus der Komponentenbibliothek eine Karte auf die Arbeitsfläche.

2. Wähle die Karte aus und öffne das Eigenschaftenfenster.

3. Setze Titel auf Meine aktiven Opportunities.

4. (Optional) Füge ein Symbol über das Icon Name Eigenschaft hinzu oder passe Farben im Stil Tab an.

3

Füge eine "Neue Opportunity"-Schaltfläche hinzu

1. Ziehe eine Schaltfläche Komponente in den Kopfbereich der Karte.

2. Konfiguriere im Eigenschaftenfenster:

   • Beschriftung: Neue Opportunity

   • Variante: Wähle einen Stil (z. B. Brand, Neutral)

   • (Optional) Füge ein Symbol hinzu

3. Klicke Interaktion hinzufügen und wähle Beim Klicken.

4. Setze die Aktion auf Zur Objektseite navigieren und wähle Opportunity → Neuer Datensatz.

4

Füge eine Datentabelle hinzu

1. Ziehe eine Datentabelle in die Karte, unterhalb des Kopfbereichs.

2. Setze im Eigenschaftenfenster Datenquelle auf Avonni Query Data Source.

3. Konfiguriere die Abfrage:

   • Objekt: Opportunity

   • Filter: StageName nicht in Closed Won, Closed Lost

4. Unter Spaltenwähle die anzuzeigenden Felder aus (z. B. Name, StageName, Amount).

5

Füge ein Spalten-Layout für Metriken

1. Ziehe eine Spalten Komponente über der Datentabelle in die Karte ein.

2. Klicke auf die + Schaltfläche dreimal, um drei Spalten zu erstellen.

3. Stelle im Eigenschaftenfenster jede Spalte ein:

   • Größe: 4

   • Horizontale Ausrichtung: Zentriert

Dies erstellt drei gleich breite Spalten, um deine Metriken aufzunehmen.

6

Füge Metrikkomponenten hinzu

• Ziehe aus der Komponentenbibliothek eine Metrik in die erste Spalte.

• Verwende Kopieren/Einfügen um sie schnell in die zweite und dritte Spalte zu duplizieren

7

Konfiguriere reaktive Metriken

Jede Metrik zeigt eine Summe basierend auf den in der Datentabelle ausgewählten Zeilen.

Um die erste Metrik zu konfigurieren:

1. Wähle die Metrik und setze Datenquelle auf Query Data Source.

2. Konfiguriere die Abfrage:

   • Objekt: Opportunity

   • Felder: Nur Amount

   • Aggregatfunktion: SUMME

3. Füge einen Reaktiven Filter:

   • Feld: AccountId

   • Operator: in

   • Wert: !YourDataTableApiName.selectedRowsKeyValue (Ersetze YourDataTableApiName durch den tatsächlichen API-Namen deiner Datentabelle)

4. Setze die Beschriftung auf Gesamtbetrag.

5. Passe die Formatierung nach Bedarf an (Währung, Dezimalstellen usw.).

Wiederhole dies für die anderen beiden Metriken, ändere dabei die Beschriftung und die Aggregatfunktion (z. B. ANZAHL, DURCHSCHNITT).

8

Style die Metriken

(Optional) Verwende die Stil-Registerkarte, um Farben, Schriftarten und Abstände für jede Metrikkomponente anzupassen.

9

Aktiviere und füge zu einer Seite hinzu

Deine Komponente ist erstellt. Nun machen wir sie für Benutzer sichtbar.

Aktiviere die Komponente

1. Stelle in der Avonni Dynamic Components App sicher, dass deine Komponente auf Aktiv. (Nur aktive Komponenten erscheinen im Lightning App Builder.)

Füge sie zu einer Salesforce-Seite hinzu

1. Navigiere zu der Seite, auf der du die Komponente platzieren möchtest (z. B. eine Account-Datensatzseite).

2. Klicke auf die Zahnrad → Seite bearbeiten um den Lightning App Builder zu öffnen.

3. Scrolle im linken Bereich zur Benutzerdefiniert Sektion.

4. Ziehe die AX - Dynamic Components auf das Seitenlayout.

5. Wähle im rechten Bereich deine spezifische Komponente aus dem Dropdown aus.

6. Klicke Speichern, dann Aktivieren (falls aufgefordert).

---

Bringe deine Fähigkeiten auf die nächste Stufe!

Herzlichen Glückwunsch! Du hast den Schnellstart abgeschlossen und eine funktionierende Avonni Dynamic Components erstellt. Jetzt ist es Zeit, die gesamte Funktionsvielfalt zu erkunden.

Sieh dir unsere geführten Projekte an um ein Meister-Bauer zu werden 👇

Avonni Projects

Nächste Schritte:

• Erkunde die vollständige Komponentenbibliothek um zu sehen, was möglich ist

• Tritt unserer Trailblazer-Community bei um zu sehen, was andere bauen

Festgefahren oder Fragen?

Wenn du während dieses Tutorials auf Probleme gestoßen bist oder zeigen möchtest, was du gebaut hast:

Tritt unserer Trailblazer Community Group bei, wo du:

• Screenshots deiner Komponente für Feedback teilen kannst

• Varianten dieses Tutorials sehen kannst, die andere erstellt haben

• Fragen zu den nächsten Schritten deiner Lernreise stellen kannst

• Inspiration für dein nächstes Dynamic-Component-Projekt bekommen kannst

Viele Entwickler teilen ihre ersten Komponenten in der Community — das ist eine großartige Möglichkeit, Ermutigung zu bekommen und von anderen zu lernen, die sich auf derselben Reise befinden!