> 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/experience-components/ax-progress-indicator.md). # AX - Fortschrittsanzeige ## Übersicht **AX - Fortschrittsanzeige** ist eine Experience-Cloud-Komponente, die Prozessphasen als visuellen Schritt-Tracker basierend auf Picklist-Feldwerten auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Portalbenutzern zu zeigen, wo sich Datensätze in einem Workflow befinden – etwa bei Bestellstatus, Anwendungsphasen, Onboarding-Schritten oder Genehmigungsprozessen. Benutzer können den aktuellen Fortschritt und abgeschlossene Schritte sehen. Wählen Sie zwischen horizontalen, vertikalen oder pfadähnlichen Layouts und konfigurieren Sie alles im Experience Builder. Perfekt für die Sendungsverfolgung, die Anzeige des Anwendungsstatus, den Onboarding-Fortschritt, Genehmigungs-Workflows oder überall dort, wo Portalbenutzer visuelle Klarheit über den Status eines mehrstufigen Prozesses benötigen. {% hint style="warning" %} #### Hinweis Diese Komponente ist **nur zur Anzeige** — sie liest den aktuellen Picklist-Wert aus und stellt den entsprechenden Schritt visuell dar, aktualisiert jedoch den Datensatz nicht, wenn ein Benutzer auf einen Schritt klickt. Damit Benutzer den Status eines Datensatzes ändern können, müssen Sie sie mit einer separaten Komponente oder einer benutzerdefinierten Lösung koppeln, die die Aktualisierung des Datensatzes übernimmt (siehe den FAQ-Bereich unten). {% endhint %} ## Erste Schritte Nutzen Sie dieses einfache Tutorial, um die Grundlagen der Progress-Indicator-Komponente zu lernen und mit der Umsetzung Ihrer Anwendungsfälle zu beginnen. {% @arcade/embed url="" flowId="ZU4p8JnowZCmgWi7FUKf" %} ## Konfiguration ### Eigenschaften **Typ** wählt den Stil aus: **Basis**, **Vertikal**, **Balken**, **Kreis**, **Pfad**, oder **Vertikale Navigation**. **Format** steuert den Ablauf: **Linear** (standardmäßiger Fortschrittsablauf) oder **Nicht linear** (der Fortschritt folgt keiner sequentiellen Reihenfolge). **Schattiert** wendet einen Schattierungseffekt auf die Komponente an. **Aktueller Schritt** definiert den aktuellen Schritt im Fortschrittsablauf. **Ausrichtung des Symbols** platziert das Schrittsymbol: **Zentriert** (im Schritt) oder **Oben** (oben auf dem Schritt). **Symbolgröße** wählt Klein, Mittel oder Groß aus. **Schrittnummer anzeigen** zeigt die Nummer jedes Schritts an. **Schrittbezeichnung anzeigen** zeigt die Bezeichnungen für jeden Schritt an. **Balkenwert ausblenden** blendet den Wert/die Prozentzahl auf der Fortschrittsleiste aus. **Datenquelle** definiert die Schritte: **Manuell** (Fortschrittsdaten manuell eingeben) oder **Picklist-Werte** (Werte aus einer Picklist verwenden, um den Fortschritt zu definieren). **Alternativtext** stellt barrierefreien Text bereit, der den Fortschrittsanzeiger für Bildschirmleseprogramme beschreibt. ## Styling {% tabs %} {% tab title="Balken" %} Passen Sie Farbe und Abschlussfarbe an. {% endtab %} {% tab title="Symbol" %} Bietet umfangreiche Farbanpassungen, einschließlich: * **`Fokus`**, **`Standard`**, **`Füllung`**, **`Rahmen`**, **`Aktiv`**, **`Abgeschlossen`** und **`Fehlerfarben`** (und deren Füll- und Randvarianten). {% endtab %} {% tab title="Schrittbezeichnung" %} * **Textfarbe**: Legen Sie die Farbe des Beschriftungstextes fest. * **Schriftgröße**: Definieren Sie die Schriftgröße. * **Schriftfamilie**: Wählen Sie die Schriftart für die Beschriftung aus. * **Schriftgewicht**: Wählen Sie das Gewicht/die Stärke der Schrift aus. * **Textschatten**: Fügen Sie dem Text einen Schatteneffekt hinzu. * **Zeilenbegrenzung**: Begrenzen Sie die Anzahl der Zeilen für den Beschriftungstext {% endtab %} {% endtabs %} ## Anwendungsfälle ### Beispiel 1: Vertriebsprozess-Pfad {% @arcade/embed url="" flowId="WPNsAX5UXy9v9pc0SGSp" %} Führen Sie Ihre Partnerbenutzer mit einem visuellen, intuitiven Pfad durch jede Phase der Vertriebsreise, der die Akzeptanz fördert und Deals voranbringt. *** #### **Was Sie erreichen werden** * **Geführte Vertriebserfahrung:** Geben Sie Partnerbenutzern eine klare, visuelle Darstellung davon, wo sich jede Opportunity im Vertriebsprozess befindet * **Höhere Akzeptanz:** Verringern Sie Verwirrung und verbessern Sie das Engagement, indem Sie die richtigen Phaseninformationen direkt in der Experience-Site anzeigen * **Pipeline-Transparenz:** Helfen Sie Partnern, ohne das Portal zu verlassen, bei den nächsten Schritten auf dem gleichen Stand zu bleiben *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Komponente zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Progress Indicator in Experience Builder auf die gewünschte Seite {% endstep %} {% step %} #### **Datenquelle konfigurieren** * Wählen Sie **Prüfen Sie Picklist-Werte** als Ihren Datentypsource-Typ * Legen Sie die **Objekt-API-Name** auf `Opportunity` * Legen Sie die **Picklist-Feld** auf `Phase` * Legen Sie die **Datensatztyp** auf `Master` * Legen Sie die **Sortierreihenfolge** auf `Standard` {% endstep %} {% step %} #### **Anzeige anpassen** * Legen Sie die **Typ** auf `Pfad` * Legen Sie die **Aktueller Schritt** auf `{!Item.Stage}` um die aktive Phase jeder Opportunity dynamisch widerzuspiegeln {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Vorschau des Experience Builder, um zu überprüfen, ob der Pfad über verschiedene Opportunity-Phasen hinweg korrekt gerendert wird {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/a253f06b22ccd6ec4f2fe11cd4ee49a608cc1dce" %} [AX - Datensatzdetail](/experience-cloud/experience-cloud-de/experience-components/ax-record-detail.md) {% endcontent-ref %} *** ### Beispiel 2: Bestellstatus des Kunden {% @arcade/embed url="" flowId="MQbhk3KEUgyVjAfo4zfb" %} Geben Sie Ihren Kunden sofortige Klarheit darüber, wo sich ihre Bestellung befindet – von der Aufgabe bis zur Ausführung – mit einem klaren, leicht nachvollziehbaren vertikalen Fortschrittsanzeiger. *** #### **Was Sie erreichen werden** * **Bestellstatus in Echtzeit:** Zeigen Sie aktuelle Informationen zum Bestellstatus direkt im Kundenportal an * **Weniger Supportanfragen:** Ermöglichen Sie Kunden die Selbstbedienung bei der Bestellverfolgung und reduzieren Sie so die Notwendigkeit, den Support zu kontaktieren *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Komponente zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Progress Indicator in Experience Builder auf die gewünschte Seite {% endstep %} {% step %} #### **Datenquelle konfigurieren** * Wählen Sie **Prüfen Sie Picklist-Werte** als Ihren Datentypsource-Typ * Legen Sie die **Objekt-API-Name** auf `Bestellung` * Legen Sie die **Picklist-Feld** auf `Status` * Legen Sie die **Datensatztyp** auf `Master` * Legen Sie die **Sortierreihenfolge** auf `Standard` {% endstep %} {% step %} #### **Anzeige anpassen** * Legen Sie die **Typ** auf `Vertikal` * Legen Sie die **Aktueller Schritt** auf `{!Item.Status}` um den aktiven Status jeder Bestellung dynamisch widerzuspiegeln {% endstep %} {% step %} #### **Sehen Sie sich Ihre Arbeit in der Vorschau an** * Verwenden Sie die Vorschau des Experience Builder, um zu bestätigen, dass der vertikale Indikator über die gesamte Bandbreite der Bestellstatus korrekt angezeigt wird {% endstep %} {% endstepper %} ## FAQ **Können Benutzer auf einen Schritt klicken, um den Datensatzstatus zu aktualisieren?** Nein. AX - Progress Indicator ist eine Komponente zur reinen Anzeige. Sie spiegelt den aktuellen Wert eines Picklist-Feldes wider, schreibt aber nicht an Salesforce zurück, wenn ein Benutzer auf einen Schritt klickt. Der Progress Indicator selbst bietet in der Experience-Cloud-Version keine Interaktionen oder Aktionen an. **Tipp:** Wenn Sie auf einer Lightning-Seite arbeiten (nicht auf einer Experience-Site), [die Version von Avonni Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/) des [Fortschrittsanzeige](/dynamic-components/components/progress-indicator.md) unterstützt [Interaktionen](/dynamic-components/component-builder/interactions.md) mit Datensatz-Aktionen zur Aktualisierung über den Tab „Interaktion“ ## Links {% content-ref url="/pages/f7e73b487095b27023a6dfe197af45c0cb62a218" %} [AX - Karte](/experience-cloud/experience-cloud-de/experience-components/ax-map.md) {% endcontent-ref %} --- # 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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-progress-indicator.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.