> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/quick-start-guide.md). # Schnellstartanleitung Experience Builder gibt Ihnen den Rahmen einer Site: ein Theme, eine Navigation, Seiten. Avonni Experience Components füllen ihn mit mehr als vierzig Komponenten (Tabellen, Karten, Kalendern, Galerien, Zeitachsen, Kennzahlen), die Ihre Salesforce-Datensätze lesen und auf der Seite miteinander kommunizieren, konfiguriert im Eigenschaftenbereich, ganz ohne Code. In den nächsten 15 Minuten erstellen Sie eine **Einen zertifizierten Installateur finden** Seite für ein Kundenportal: eine Tabelle mit Installateuren aus Ihren Accounts und eine Karte, die die Häuser zeigt, die der ausgewählte Installateur bereits ausgestattet hat.

Das haben Sie am Ende: Wählen Sie einen Installateur aus, und die Karte zeigt seine jüngsten Installationen.

{% hint style="success" %} **Was Sie lernen werden** * Wie Sie die AX-Komponenten im Experience Builder finden und eine auf eine Seite ziehen * Wie Sie eine Komponente mit einer Query-Datenquelle auf Ihre Salesforce-Datensätze ausrichten * Wie Sie eine Komponente auf das reagieren lassen, was der Besucher in einer anderen auswählt * Was Ihre Site-Mitglieder benötigen, bevor sie die Seite sehen {% endhint %} {% hint style="warning" %} **Bevor Sie beginnen** * Das [Avonni Experience Components-Paket](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840) ist installiert. Aktivieren Sie **Lightning Web Security** zuerst in **Setup** > **Session-Einstellungen**: Ohne sie schlägt die Installation fehl mit `LWC1503: Dynamische Imports sind nicht erlaubt`. * Aktivieren Sie auf einer Aura-Site außerdem **Lightning Web Security** in den **Einstellungen** > **Sicherheit & Datenschutz**. * Sie haben eine Site, an der Sie arbeiten können, und einige Datensätze, die angezeigt werden sollen. Diese Anleitung verwendet Accounts des Typs *Installationspartner* und ihre Contacts, wobei jeder Contact die Adresse eines installierten Hauses trägt. {% endhint %} *** ## Erstellen Sie den Installateursucher {% stepper %} {% step %} #### Öffnen Sie die Seite im Experience Builder In **Setup**suchen Sie nach **Digital Experiences**öffnen Sie **Alle Sites**und klicken Sie auf **Builder** neben Ihrer Site. Wählen Sie die Seite im Menü oben links aus (diese Anleitung verwendet **Home**), und fügen Sie einen Abschnitt mit zwei Spalten hinzu, in denen die Tabelle und die Karte platziert werden. {% endstep %} {% step %} #### Finden Sie die AX-Komponenten Klicken Sie auf das **Komponenten** -Symbol (der Blitz) in der linken Seitenleiste und geben Sie `AX` in das Suchfeld ein. Jede Avonni-Komponente ist unter **Benutzerdefinierte Komponenten**aufgeführt, jeweils mit dem **AX -** Präfix.

Das Komponenten-Panel, gefiltert auf AX.

{% hint style="info" %} Die Screen-Flow-Komponenten heißen **Avonni** *Komponente*, und die Experience-Komponenten **AX -** *Komponente*. Beide Pakete können in derselben Org vorhanden sein. {% endhint %} {% endstep %} {% step %} #### Ziehen Sie eine AX - Data Table hinein und benennen Sie sie Ziehen Sie **AX - Data Table** in die linke Spalte. Rechts öffnet sich ihr Eigenschaftenbereich. Für diese Seite sind zwei Einstellungen wichtig: * **API-Name**: `installers`. Das ist der Name, den die anderen Komponenten verwenden, um die Zeile zu lesen, die der Besucher auswählt. * **Maximale Zeilenauswahl**: `1`, damit der Besucher jeweils nur einen Installateur auswählt.

The AX - Data Table selected on the canvas, and its property panel with API Name set to installers and Max Row Selection set to 1 — Der Eigenschaftenbereich der Tabelle: API-Name und maximale Zeilenauswahl.

{% endstep %} {% step %} #### Richten Sie sie auf Ihre Accounts aus Scrollen Sie im Eigenschaftenbereich nach unten zu **Datenquelle** und klicken Sie auf **Abfrage**. 1. **Objekt-API-Name**: `Account`. 2. **Filter**: **Account-Typ** entspricht `Installationspartner`und **Rechnungsbundesland/Provinz** entspricht `CO`. 3. **Zusätzliche Felder**: **Account-Telefon**. Es ist keine Spalte, aber die Seite wird es anzeigen. 4. Unter **Datenzuordnungen**klicken Sie auf **Spalten hinzufügen** und wählen Sie Kontoname, Rechnungsstadt und Account-Beschreibung aus. Öffnen Sie jede Spalte, um ihr ein kürzeres Label zu geben: Installateur, Stadt, Spezialität. Die Tabelle füllt sich sofort auf der Arbeitsfläche mit Ihren Datensätzen.

The Data Source section of the AX - Data Table with Query selected, Object API Name Account, two filters (Account Type equals Installation Partner, Billing State equals CO) and the table on the canvas listing six Colorado installers — Eine Query-Datenquelle: das Objekt, die Filter und die Datensätze auf der Arbeitsfläche.

{% endstep %} {% step %} #### Ziehen Sie eine AX - Map hinein, die der Tabelle folgt Ziehen Sie **AX - Map** in die rechte Spalte und setzen Sie ihre **Datenquelle** auf **Abfrage**: 1. **Objekt-API-Name**: `Contact`. 2. **Filter**: **Account ID** entspricht `{{installers.selectedRecord.Id}}`. 3. Unter **Datenzuordnungen**, setzen Sie den **Titel** des Pins auf den Titel des Contacts und seinen Standort auf **Mailing Latitude** und **Mailing Longitude**. Dieser Filter ist der ganze Trick. `installers` ist der API-Name der Tabelle, `selectedRecord` ist die Zeile, die der Besucher ausgewählt hat, und `Id` ist das Feld, das daraus gelesen wird. Wenn der Besucher einen anderen Installateur auswählt, führt die Karte ihre Abfrage erneut aus, ganz ohne Code und ohne Neuladen der Seite.

The AX - Map selected, with its Data Source set to Query on Contact and a filter Account ID equals {{installers.selectedRecord.Id}}, and its Data Mappings below — Die Abfrage der Karte, gefiltert auf die in der Tabelle ausgewählte Zeile.

{% endstep %} {% step %} #### Den Installateur über der Karte benennen Ziehen Sie einen **AX - Text Block** über die Karte und schreiben Sie den Text mit derselben Syntax: ``` Jüngste Installationen {{installers.selectedRecord.Name}} {{installers.selectedRecord.Phone}} ``` Jedes Feld, das die Tabelle abgefragt hat, kann auf diese Weise gelesen werden, einschließlich des Telefons, das Sie als zusätzliches Feld hinzugefügt haben. {% endstep %} {% step %} #### In der Vorschau ansehen Klicken Sie auf **Vorschau** oben rechts. Wählen Sie einen Installateur aus: Sein Name und seine Telefonnummer erscheinen, und die Karte springt zu den Häusern, die er ausgestattet hat.

The same page with Pikes Peak Power selected in the table, its phone number above the map, and the map showing its installations around Colorado Springs — Ein anderer Installateur, ein anderer Satz von Markierungen: Die Seite reagiert auf die Wahl des Besuchers.

{% endstep %} {% step %} #### Veröffentlichen und Ihren Mitgliedern Zugriff gewähren 1. Klicken Sie auf **Veröffentlichen**. 2. Geben Sie Ihren Site-Mitgliedern auf der [Lizenzverwaltung](/experience-cloud/experience-cloud-de/erste-schritte/license-management.md) -Seite eine Avonni-Lizenz und den Berechtigungssatz. 3. Stellen Sie sicher, dass ihr Profil die Datensätze lesen kann: hier Account und Contact. Avonni-Komponenten folgen Ihren Freigabeeinstellungen und umgehen sie niemals, sodass ein Mitglied genau die Zeilen sieht, die Salesforce ihm erlaubt zu sehen. [Grundlagen lernen](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md) enthält die Details. {% endstep %} {% endstepper %} *** ## Was Sie gerade verwendet haben | Idee | Hier | Wiederverwenden für | | ---------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **AX-Komponenten im Experience Builder** | Datentabelle, Karte, Textblock | Mehr als vierzig Komponenten: Kalender, Galerie, Zeitachse, Kennzahl, Kanban und der Rest | | **Query-Datenquelle** | Installateure aus Account, Installationen aus Contact | Jedes Objekt, das Ihre Mitglieder lesen können, mit Filtern und einer Sortierreihenfolge | | **Reaktive Komponenten** | `{{installers.selectedRecord.Id}}` im Kartenfilter | Eine Tabelle, die eine zweite Tabelle steuert, eine Karte, die einen Textblock steuert, eine Liste, die eine Zeitachse steuert | | **Ihre Site, Ihre Marke** | Das SolarOps-Theme und die Navigation rund um die Komponenten | Jede Seite einer Aura- oder LWR-Site | ## Wenn etwas nicht stimmt | Was Sie sehen | Wahrscheinliche Ursache | Behebung | | ------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Keine AX-Komponenten im Komponenten-Panel | Das Paket ist nicht installiert, oder die Sicherheitsstufe der Site blockiert sie | Prüfen Sie die Installation, dann die Meldung oben in **Benutzerdefinierte Komponenten** | | Die Tabelle ist leer | Die Filter finden nichts, oder der Betrachter kann das Objekt nicht lesen | Testen Sie die Filter mit einem Datensatz, den Sie kennen, und prüfen Sie den Zugriff des Profils | | Die Karte bewegt sich nicht, wenn eine Zeile ausgewählt wird | Der API-Name im Filter stimmt nicht mit dem der Tabelle überein | `installers` in `{{installers.selectedRecord.Id}}` muss exakt dem der Tabelle entsprechen **API-Name** | | Die Karte zeigt vor der Auswahl einen Standardbereich an | Ihre Abfrage hat noch keine Zeile, auf die sie filtern kann | Erwartet. Sie füllt sich, sobald der Besucher eine Zeile auswählt | Immer noch festgefahren? [Reaktive Komponenten](/experience-cloud/experience-cloud-de/erste-schritte/reactive-components.md) geht die Fehlerbehebung ausführlicher durch. ## Machen Sie weiter

		Titelbild
Datenquellen	Query, CMS Collection oder Manuell: jede Möglichkeit, eine Komponente zu füttern, und wann Sie welche wählen sollten.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJKfTje5RpchEizxF30XE%2Fxp-quickstart-cover-query.png?alt=media	Datenquellen
Reaktive Komponenten	Die vollständige selectedRecord-Syntax, die Komponenten, die sie unterstützen, und die Fehlerbehebung.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqzYl3awWaUu4HRWqiwau%2Fxp-quickstart-cover-reactive.png?alt=media	Reaktive Komponenten
Eine Datentabelle und eine Karte verknüpfen	Dasselbe Tabellen-und-Karten-Muster, auf Accounts, Schritt für Schritt.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FMmoOE8XAYZIOdgI60QN0%2Fxp-quickstart-cover-map.png?alt=media	Datentabelle und Karte für dynamische Standorte verknüpfen
Alle Komponenten	Durchsuchen Sie jede AX-Komponente von Accordion bis Video, jeweils mit einer eigenen Seite.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FEE7PAy1DqgMswl2R1cUu%2Fxp-quickstart-cover-components.png?alt=media	Alle Komponenten anzeigen
AX - Data Table	Sortieren, Suche, Inline-Bearbeitung, Dateien in jeder Zeile: alles, was die Tabelle für Ihre Mitglieder tun kann.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdYBnT69WbVXtAxk8Po6r%2Fwelcome-portal-data-table.png?alt=media	AX - Data Table
Portale und Partner-Sites	Komplette Projekte, von Anfang bis Ende in einer echten Org erstellt, mit der Konfiguration hinter jedem einzelnen.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3KtJGDtgwDzuWVjJKH9n%2Fprojects-portals-and-partner-sites.png?alt=media	https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/quick-start-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.

Datenquellen

Reaktive Komponenten

Eine Datentabelle und eine Karte verknüpfen

Alle Komponenten

AX - Data Table

Portale und Partner-Sites