Quickstart-Anleitung

Übersicht

Dieses Tutorial führt Sie durch das Erstellen einer Komponente "Meine aktiven Opportunities". 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, alles ohne Code.

Was Sie lernen werden

• Ziehen und Ablegen von Komponenten.

• Verbindung mit 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 konzipiert. Obwohl es nicht die komplizierteste Komponente ist, die Sie bauen können, wird es zentrale Konzepte demonstrieren, 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 Dynamic Components-Paket aus dem AppExchange.

• Lizenzen: Weisen Sie Lizenzen den Benutzern zu, die die Komponenten erstellen oder verwenden werden (in der Regel über die License Management Application).

• Berechtigungen: Weisen Sie die entsprechenden Berechtigungssätze zu:

  • Avonni Dynamic Components Benutzer: Für Endbenutzer.

  • Avonni Dynamic Components Administrator: Für Komponenten-Ersteller.

  • Siehe diese Seite für weitere Details.

Wichtige Anforderung

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

Schritt 1: Erstellen Sie eine neue Dynamic Component

Öffnen Sie zunächst die Avonni Components-App über den Salesforce App Launcher. Klicken Sie dann 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: Fügen Sie die Card-Komponente hinzu und passen Sie sie an

• Ziehen Sie eine Card-Komponente aus der Komponentenbibliothek auf die Leinwand.

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

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

Schritt 3: Fügen Sie die Schaltfläche "Neue Opportunity" hinzu und konfigurieren Sie sie

• Fügen Sie der Kopfzeile der Card eine Button-Komponente hinzu. Im Eigenschaftenbereich

• Setzen Sie die Bezeichnung 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: Fügen Sie die Datentabelle hinzu und konfigurieren Sie sie

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

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

• abrufen. 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: Fügen Sie die Columns-Komponente hinzu und konfigurieren Sie sie Fügen Sie eine Columns-Komponente aus der Komponentenbibliothek oberhalb innerhalb der Datentabelle in der Card hinzu. Diese wird unsere Metriken enthalten.

• 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 die horizontale Ausrichtung auf x-klein für gleiche Breiten und Abstände ein.

Schritt 6: Metrik-Komponenten hinzufügen

• Wir fügen Platzhalter-Metrik-Komponenten in die drei erstellten Spalten ein. Finden Sie die Metrik-Komponente in der Komponentenbibliothek und ziehen Sie eine Instanz in jede Spalte innerhalb der Columns-Komponente.

Sie können die Kopier- und Einfüge-Schaltflächen verwenden, um den Prozess des Erstellens mehrerer identischer Komponenten zu beschleunigen. Das hilft Ihnen, Ihre Komponenten schneller zu bauen.

Schritt 7: Konfigurieren der Metrik-Komponente zur Anzeige von Daten.

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

1. Wählen Sie eine Metrik-Komponente aus.

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

   • Objekt: Opportunity

   • Felder: Wählen Sie nur aus 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 das Bezeichnung der Metrik (z. B. "Gesamtbetrag") und passen Sie die Formatierung an.

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

Schritt 8: Stil der Metrik-Komponente

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

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

1. Komponente aktivieren

   • Stellen Sie sicher, dass Ihre Avonni Dynamic Component aktiviert ist. Nur aktivierte Komponenten können zu 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. Zum Beispiel könnten Sie einen bestimmten Account-Datensatz öffnen und die Registerkarte "Accounts" wä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. Dadurch wird der Lightning App Builder geöffnet, 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 jeden der vorgesehenen Komponentenbereiche platzieren.

6. Auswahl bestätigen

   • Sobald die Komponente platziert ist, erscheint auf der rechten Seite des App Builders ein Eigenschaftenfenster. 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 im App Builder auf Speichern .

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

Glückwunsch! Sie haben das Quick Start abgeschlossen und verfügen über funktionierende Avonni Dynamic Components. Jetzt ist es Zeit, das gesamte Funktionsspektrum zu erkunden.

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

Avonni Projects