# AX - Fortschrittsanzeige

## Übersicht

**AX - Fortschrittsanzeige** ist eine Experience-Cloud-Komponente, die Prozessphasen als visuellen Schritt-Tracker basierend auf den Werten eines Auswahllistenfelds auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um Portalbenutzern zu zeigen, wo sich Datensätze in einem Workflow befinden – etwa bei Bestellstatus, Antragsphasen, Onboarding-Schritten oder Genehmigungsprozessen. Benutzer können den aktuellen Fortschritt und abgeschlossene Schritte sehen. Wählen Sie zwischen horizontalen, vertikalen oder pfadartigen Layouts und konfigurieren Sie alles im Experience Builder.

Perfekt für die Bestellverfolgung, die Anzeige von Antragsstatus, 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 Auswahllistenwert und stellt den entsprechenden Schritt visuell dar, aktualisiert den Datensatz jedoch nicht, wenn ein Benutzer auf einen Schritt klickt. Um Benutzern zu ermöglichen, den Status eines Datensatzes zu ändern, 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

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

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

***

## Einstellungen

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

| Name                             | Beschreibung                                                                                                                                                                                          |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Typ**                          | Auswählen 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>                          |
| **Schattiert**                   | Wenden Sie einen Schattierungseffekt auf die Komponente an                                                                                                                                            |
| **Aktueller Schritt**            | Definieren Sie den aktuellen Schritt im Fortschrittsablauf.                                                                                                                                           |
| **Ausrichtung des Symbols**      | <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**       | Zeigt die Nummer jedes Schritts an.                                                                                                                                                                   |
| **Schrittbeschriftung anzeigen** | Zeigt Beschriftungen für jeden Schritt an.                                                                                                                                                            |
| **Leistenwert ausblenden**       | Blendet den Wert/Prozentsatz auf der Fortschrittsleiste aus.                                                                                                                                          |
| **Datenquelle**                  | <ul><li><strong>Manuell</strong>: Fortschrittsdaten manuell eingeben.</li><li><strong>Auswahllistenwerte</strong>: Werte aus einer Auswahlliste verwenden, um den Fortschritt zu definieren</li></ul> |
| {% endtab %}                     |                                                                                                                                                                                                       |

{% tab title="🎨 Gestaltung" %}

| Name                    | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Leiste**              | Passen Sie die Farbe und die Farbe für abgeschlossene Schritte an.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Symbol**              | <p>Bietet umfangreiche Farb-Anpassungsmöglichkeiten, 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 Füllungs- und Rahmenvarianten).</li></ul>                                                                                                            |
| **Schrittbeschriftung** | <ul><li><strong>Textfarbe</strong>: Legt die Farbe des Beschriftungstextes fest.</li><li><strong>Schriftgröße</strong>: Definiert die Größe der Schrift.</li><li><strong>Schriftart</strong>: Wählen Sie die Schriftart für die Beschriftung aus.</li><li><strong>Schriftstärke</strong>: Wählen Sie die Stärke/Dicke der Schrift aus.</li><li><strong>Textschatten</strong>: Fügt dem Text einen Schatteneffekt hinzu.</li><li><strong>Zeilenbegrenzung</strong>: Begrenzen Sie die Anzahl der Zeilen für den Beschriftungstext</li></ul> |
| {% endtab %}            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| {% endtabs %}           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |

***

## Beispiele für Anwendungsfälle

### Beispiel 1: Vertriebsprozess-Pfad

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

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

***

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

* **Geführte Vertriebserfahrung:** Geben Sie Partnermitgliedern eine klare, visuelle Darstellung davon, wo sich jede Opportunity im Vertriebsprozess befindet
* **Höhere Akzeptanz:** Reduzieren Sie Verwirrung und verbessern Sie das Engagement, indem Sie die richtigen Phaseninformationen direkt auf der Experience-Site anzeigen
* **Pipeline-Transparenz:** Helfen Sie Partnern, die nächsten Schritte im Blick zu behalten, ohne das Portal zu verlassen

***

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

{% stepper %}
{% step %}

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

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

{% step %}

#### **Datenquelle konfigurieren**

* Wählen Sie **Auswahllistenwerte prüfen** als Typ der Datenquelle aus
* Setzen Sie den **Objekt-API-Namen** auf `Opportunity`
* Setzen Sie den **Auswahllistenfeld** auf `Phase`
* Setzen Sie den **Datensatztyp** auf `Standard`
* 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 darzustellen
  {% endstep %}

{% step %}

#### **Vorschau Ihrer Arbeit**

* Verwenden Sie die Vorschau im Experience Builder, um zu überprüfen, ob der Pfad über verschiedene Opportunity-Phasen hinweg korrekt dargestellt wird
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="ax-datensatzdetails" %}
[ax-datensatzdetails](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datensatzdetails)
{% endcontent-ref %}

***

### Beispiel 2: Bestellstatus des Kunden

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

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

***

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

* **Bestelltransparenz in Echtzeit:** Aktuelle Bestellstatusinformationen direkt im Kundenportal anzeigen
* **Weniger Supportanfragen:** Ermöglichen Sie Kunden die Selbstbedienung bei der Bestellverfolgung und verringern Sie so den Bedarf, 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 – Fortschrittsanzeige in den Experience Builder auf die gewünschte Seite
  {% endstep %}

{% step %}

#### **Datenquelle konfigurieren**

* Wählen Sie **Auswahllistenwerte prüfen** als Typ der Datenquelle aus
* Setzen Sie den **Objekt-API-Namen** auf `Bestellung`
* Setzen Sie den **Auswahllistenfeld** auf `Status`
* Setzen Sie den **Datensatztyp** auf `Standard`
* 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 darzustellen
  {% endstep %}

{% step %}

#### **Vorschau Ihrer Arbeit**

* Verwenden Sie die Vorschau im Experience Builder, um zu bestätigen, dass die vertikale Anzeige über die gesamte Bandbreite der Bestellstatus hinweg korrekt dargestellt wird
  {% endstep %}
  {% endstepper %}

***

## FAQ

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

Nein. Die AX - Fortschrittsanzeige ist eine schreibgeschützte Anzeige-Komponente. Sie spiegelt den aktuellen Wert eines Auswahllistenfelds wider, schreibt aber nicht zu 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, [unterstützt die Avonni Dynamic Components-Version](https://app.gitbook.com/o/9SPYZVrIHB81fz19OpSr/s/ODPvvv7Cx9Z9RECLn3oV/) des [Fortschrittsanzeige](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/progress-indicator) Interaktionen [mit Datensatz-Aktionen zur Aktualisierung über den Tab „Interaktion“](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) }

***

## **Links**

{% content-ref url="ax-karte-1" %}
[ax-karte-1](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-karte-1)
{% endcontent-ref %}