> 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 Schrittverfolger basierend auf Picklist-Feldwerten auf Experience-Site-Seiten anzeigt.

Verwenden Sie sie, um Portalbenutzern zu zeigen, wo sich Datensätze in einem Workflow befinden – etwa Bestellstatus, Antragsphasen, Onboarding-Schritte oder Genehmigungsprozesse. 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 Auftragsverfolgung, die Anzeige von Antragsstatus, den Onboarding-Fortschritt, Genehmigungs-Workflows oder überall dort, wo Portalbenutzer visuelle Klarheit über den Status mehrstufiger Prozesse 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 kombinieren, die die Datensatzaktualisierung übernimmt (siehe den FAQ-Abschnitt unten)
{% endhint %}

***

## Erste Schritte

Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Progress Indicator-Komponente kennenzulernen und mit dem Aufbau Ihrer Anwendungsfälle zu beginnen.

{% @arcade/embed url="<https://app.arcade.software/share/ZU4p8JnowZCmgWi7FUKf>" flowId="ZU4p8JnowZCmgWi7FUKf" %}

***

## Einstellungen

{% tabs %}
{% tab title="🎛️ Eigenschaften" %}

| Name                       | Beschreibung                                                                                                                                                                                  |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Typ**                    | Wählen Sie aus **`Basis`**, **`Vertikal`**, **`Leiste`**, **`Kreis`**, **`Pfad`**, oder **`Vertikal`** Navigationsstile.                                                                      |
| **Format**                 | <ul><li><strong>Linear</strong>: Standardmäßiger Fortschrittsablauf.</li><li><strong>Nicht linear</strong>: Der Fortschritt folgt keiner sequenziellen Reihenfolge</li></ul>                  |
| **Abgeschattet**           | Anwendung eines Schattierungseffekts auf die Komponente                                                                                                                                       |
| **Aktueller Schritt**      | Definieren Sie den aktuellen Schritt im Fortschrittsablauf.                                                                                                                                   |
| **Symbolausrichtung**      | <ul><li><strong>Zentriert</strong>: Zentriert das Symbol im Schritt.</li><li><strong>Oben</strong>: Richtet das Symbol oben im Schritt aus</li></ul>                                          |
| **Symbolgröße**            | Wählen Sie zwischen Klein, Mittel oder Groß.                                                                                                                                                  |
| **Schrittnummer anzeigen** | Die Nummer jedes Schritts anzeigen.                                                                                                                                                           |
| **Schrittnamen anzeigen**  | Beschriftungen für jeden Schritt anzeigen.                                                                                                                                                    |
| **Balkenwert ausblenden**  | Den Wert/Prozentsatz auf der Fortschrittsleiste ausblenden.                                                                                                                                   |
| **Datenquelle**            | <ul><li><strong>Manuell</strong>: Fortschrittsdaten manuell eingeben.</li><li><strong>Picklist-Werte</strong>: Werte aus einer Picklist verwenden, um den Fortschritt zu definieren</li></ul> |
| {% endtab %}               |                                                                                                                                                                                               |

{% tab title="🎨 Gestaltung" %}

| Name                    | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Leiste**              | Farbe und abgeschlossene Farbe anpassen.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Symbol**              | <p>Bietet umfangreiche Farbanpassungen, einschließlich:</p><ul><li><strong><code>Fokus</code></strong>, <strong><code>Standard</code></strong>, <strong><code>Füllung</code></strong>, <strong><code>Rahmen</code></strong>, <strong><code>Aktiv</code></strong>, <strong><code>Abgeschlossen</code></strong>, und <strong><code>Fehlerfarben</code></strong> (und deren Varianten für Füllung und Rahmen).</li></ul>                                                                                                          |
| **Schrittbeschriftung** | <ul><li><strong>Textfarbe</strong>: Legt die Farbe des Beschriftungstextes fest.</li><li><strong>Schriftgröße</strong>: Definiert die Schriftgröße.</li><li><strong>Schriftfamilie</strong>: Wählen Sie die Schriftart für die Beschriftung.</li><li><strong>Schriftstärke</strong>: Wählen Sie die Schriftstärke/-dicke aus.</li><li><strong>Textschatten</strong>: Fügt dem Text einen Schatteneffekt hinzu.</li><li><strong>Zeilenbegrenzung</strong>: Beschränkt die Anzahl der Zeilen für den Beschriftungstext</li></ul> |
| {% endtab %}            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| {% endtabs %}           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

***

## Anwendungsbeispiele

### Beispiel 1: Sales-Process-Pfad

{% @arcade/embed url="<https://app.arcade.software/share/WPNsAX5UXy9v9pc0SGSp>" flowId="WPNsAX5UXy9v9pc0SGSp" %}

Führen Sie Ihre Partnerbenutzer mit einem visuellen, intuitiven Pfad durch jede Phase der Vertriebsreise, der die Akzeptanz fördert und Deals vorantreibt.

***

#### **Was Sie erreichen werden**

* **Geführte Vertriebserfahrung:** Geben Sie Partnerbenutzern eine klare visuelle Darstellung, wo sich jede Opportunity im Verkaufsprozess befindet
* **Höhere Akzeptanz:** Reduzieren Sie Verwirrung und verbessern Sie die Interaktion, indem Sie die richtigen Phaseninformationen direkt in der Experience-Site anzeigen
* **Pipeline-Transparenz:** Helfen Sie Partnern, sich über die nächsten Schritte abzustimmen, ohne das Portal zu verlassen

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Fügen Sie die Komponente Ihrer Seite hinzu**

* Ziehen Sie die Komponente AX – Fortschrittsanzeige im Experience Builder auf die gewünschte Seite
  {% endstep %}

{% step %}

#### **Datenquelle konfigurieren**

* Wählen Sie **Wählen Sie Picklist-Werte** als Typ der Datenquelle
* Setzen Sie den **Objekt-API-Name** auf `Opportunity`
* Setzen Sie den **Picklist-Feld** auf `Phase`
* Setzen Sie den **Datensatztyp** auf `Master`
* Setzen Sie den **Sortierreihenfolge** auf `Standard`
  {% endstep %}

{% step %}

#### **Anzeige anpassen**

* Setzen Sie den **Typ** auf `Pfad`
* Setzen Sie den **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 dargestellt wird
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="/pages/a253f06b22ccd6ec4f2fe11cd4ee49a608cc1dce" %}
[AX - Datensatzdetails](/experience-cloud/experience-cloud-de/experience-components/ax-record-detail.md)
{% endcontent-ref %}

***

### Beispiel 2: Kundenbestellstatus

{% @arcade/embed url="<https://app.arcade.software/share/MQbhk3KEUgyVjAfo4zfb>" flowId="MQbhk3KEUgyVjAfo4zfb" %}

Geben Sie Ihren Kunden sofortige Klarheit darüber, wo sich ihre Bestellung befindet, von der Aufgabe bis zur Auslieferung, mit einer sauberen, leicht nachvollziehbaren vertikalen Fortschrittsanzeige.

***

#### **Was Sie erreichen werden**

* **Echtzeit-Transparenz beim Bestellstatus:** Aktuelle Informationen zum Bestellstatus direkt im Kundenportal anzeigen
* **Weniger Support-Anfragen:** Ermöglichen Sie Kunden, die Bestellverfolgung selbst durchzuführen, und reduzieren Sie so die Notwendigkeit, den Support zu kontaktieren

***

#### **So richten Sie es ein**

{% stepper %}
{% step %}

#### **Fügen Sie die Komponente Ihrer Seite hinzu**

* Ziehen Sie die Komponente AX – Fortschrittsanzeige im Experience Builder auf die gewünschte Seite
  {% endstep %}

{% step %}

#### **Datenquelle konfigurieren**

* Wählen Sie **Wählen Sie Picklist-Werte** als Typ der Datenquelle
* Setzen Sie den **Objekt-API-Name** auf `Bestellung`
* Setzen Sie den **Picklist-Feld** auf `Status`
* Setzen Sie den **Datensatztyp** auf `Master`
* Setzen Sie den **Sortierreihenfolge** auf `Standard`
  {% endstep %}

{% step %}

#### **Anzeige anpassen**

* Setzen Sie den **Typ** auf `Vertikal`
* Setzen Sie den **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 die vertikale Anzeige über das gesamte Spektrum der Bestellstatus korrekt dargestellt wird
  {% endstep %}
  {% endstepper %}

***

## FAQ

**Können Benutzer auf einen Schritt klicken, um den Datensatzstatus zu aktualisieren?**

Nein. Die Komponente AX - Fortschrittsanzeige ist eine schreibgeschützte Anzeige-Komponente. Sie spiegelt den aktuellen Wert eines Picklist-Feldes wider, schreibt aber nicht in Salesforce zurück, wenn ein Benutzer auf einen Schritt klickt. Die Fortschrittsanzeige selbst bietet in der Experience-Cloud-Version keine Interaktionen oder Aktionen an.

**Tipp:** Wenn Sie auf einer Lightning-Seite (nicht auf einer Experience-Site) entwickeln, [die Version von Avonni Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/) der [Fortschrittsanzeige](/dynamic-components/components/progress-indicator.md) unterstützt [Interaktionen](/dynamic-components/component-builder/interactions.md) mit Datensatzaktualisierungsaktionen über die Registerkarte „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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-progress-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
