> 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-it/experience-components/ax-progress-indicator.md).

# AX - Indicatore di avanzamento

## Panoramica

**AX - Indicatore di avanzamento** è un componente di Experience Cloud che mostra le fasi di un processo come un tracker visivo a passi basato sui valori di un campo picklist nelle pagine dei siti Experience.

Usalo per mostrare agli utenti del portale a che punto si trovano i record in un flusso di lavoro, come stati degli ordini, fasi delle applicazioni, passaggi di onboarding o processi di approvazione. Gli utenti possono vedere l'avanzamento attuale e i passaggi completati. Scegli tra layout orizzontali, verticali o in stile percorso e configura tutto in Experience Builder.

Perfetto per il tracciamento degli ordini, la visualizzazione dello stato delle applicazioni, l'avanzamento dell'onboarding, i flussi di approvazione o qualsiasi situazione in cui gli utenti del portale abbiano bisogno di una chiarezza visiva sullo stato di un processo in più passaggi.

{% hint style="warning" %}

#### Nota

Questo componente è **solo visualizzazione** — legge il valore attuale della picklist e rappresenta visivamente il passaggio corrispondente, ma non aggiorna il record quando un utente fa clic su un passaggio. Per consentire agli utenti di modificare lo stato di un record, devi abbinarlo a un componente separato o a una soluzione personalizzata che gestisca l'aggiornamento del record (vedi la sezione FAQ qui sotto)
{% endhint %}

***

## Per iniziare

Usa questo semplice tutorial per imparare le basi del componente Indicatore di avanzamento e iniziare a costruire i tuoi casi d'uso.

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

***

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                               | Descrizione                                                                                                                                                                                |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Tipo**                           | Scegli tra **`Base`**, **`Verticale`**, **`Barra`**, **`Cerchio`**, **`Percorso`**, oppure **`Verticale`** Stili di navigazione.                                                           |
| **Formato**                        | <ul><li><strong>Lineare</strong>: Flusso di avanzamento standard.</li><li><strong>Non lineare</strong>: L'avanzamento non segue un ordine sequenziale</li></ul>                            |
| **Ombreggiato**                    | Applica un effetto ombreggiatura al componente                                                                                                                                             |
| **Passaggio attuale**              | Definisci il passaggio attuale nel flusso di avanzamento.                                                                                                                                  |
| **Allineamento icona**             | <ul><li><strong>Centro</strong>: Centra l'icona nel passaggio.</li><li><strong>In alto</strong>: Allinea l'icona nella parte superiore del passaggio</li></ul>                             |
| **Dimensione dell'icona**          | Seleziona tra Piccolo, Medio o Grande.                                                                                                                                                     |
| **Mostra numero del passaggio**    | Visualizza il numero di ciascun passaggio.                                                                                                                                                 |
| **Mostra etichetta del passaggio** | Visualizza le etichette di ciascun passaggio.                                                                                                                                              |
| **Nascondi valore della barra**    | Nascondi il valore/la percentuale sulla barra di avanzamento.                                                                                                                              |
| **Origine dati**                   | <ul><li><strong>Manuale</strong>: Inserisci manualmente i dati di avanzamento.</li><li><strong>Valori picklist</strong>: Usa i valori di una picklist per definire l'avanzamento</li></ul> |
| {% endtab %}                       |                                                                                                                                                                                            |

{% tab title="🎨 Stile" %}

| Nome                        | Descrizione                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Barra**                   | Personalizza il colore e il colore dei completati.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Icona**                   | <p>Offre un'ampia personalizzazione dei colori, tra cui:</p><ul><li><strong><code>Focus</code></strong>, <strong><code>Normale</code></strong>, <strong><code>Riempimento</code></strong>, <strong><code>Bordo</code></strong>, <strong><code>Attivo</code></strong>, <strong><code>Completato</code></strong>, e <strong><code>Colori di errore</code></strong> (e le relative varianti Riempimento e Bordo).</li></ul>                                                                                                                                        |
| **Etichetta del passaggio** | <ul><li><strong>Colore del testo</strong>: Imposta il colore del testo dell'etichetta.</li><li><strong>Dimensione del carattere</strong>: Definisci la dimensione del font.</li><li><strong>Famiglia di caratteri</strong>: Scegli il tipo di carattere per l'etichetta.</li><li><strong>Peso del carattere</strong>: Seleziona il peso/spessore del carattere.</li><li><strong>Ombra del testo</strong>: Aggiungi un effetto ombra al testo.</li><li><strong>Limitazione delle righe</strong>: Limita il numero di righe per il testo dell'etichetta</li></ul> |
| {% endtab %}                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| {% endtabs %}               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

***

## Esempi di casi d'uso

### Esempio 1: Percorso del processo di vendita

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

Guida gli utenti partner attraverso ogni fase del percorso di vendita con un percorso visivo e intuitivo che favorisce l'adozione e mantiene le trattative in movimento.

***

#### **Cosa otterrai**

* **Esperienza di vendita guidata:** Offri agli utenti partner una rappresentazione chiara e visiva di a che punto si trova ciascuna opportunità nel processo di vendita
* **Maggiore adozione:** Riduci la confusione e migliora il coinvolgimento mostrando le informazioni giuste sulla fase direttamente nel sito Experience
* **Visibilità della pipeline:** Aiuta i partner a restare allineati sui prossimi passi senza uscire dal portale

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente alla tua pagina**

* Trascina il componente AX – Progress Indicator in Experience Builder nella pagina desiderata
  {% endstep %}

{% step %}

#### **Configura la fonte dati**

* Seleziona **Valori picklist** come tipo di origine dati
* Imposta l' **Nome API dell'oggetto** su `Opportunity`
* Imposta l' **Campo picklist** su `Fase`
* Imposta l' **Tipo di record** su `Master`
* Imposta l' **Ordine di ordinamento** su `Predefinito`
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione**

* Imposta l' **Tipo** su `Percorso`
* Imposta l' **Passaggio attuale** su `{!Item.Stage}` per riflettere dinamicamente la fase attiva di ciascuna opportunità
  {% endstep %}

{% step %}

#### **Visualizza l'anteprima del tuo lavoro**

* Usa l'anteprima di Experience Builder per verificare che il percorso venga visualizzato correttamente nelle diverse fasi dell'opportunità
  {% endstep %}
  {% endstepper %}

***

#### **Collegamenti**

{% content-ref url="/pages/32c41c4ec20b132e395248826b7548bf488451b2" %}
[AX - Dettagli record](/experience-cloud/experience-cloud-it/experience-components/ax-record-detail.md)
{% endcontent-ref %}

***

### Esempio 2: Stato dell'ordine del cliente

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

Offri ai tuoi clienti una chiarezza immediata su a che punto si trova il loro ordine, dall'inserimento all'evasione, con un indicatore di avanzamento verticale pulito e facile da seguire.

***

#### **Cosa otterrai**

* **Visibilità dell'ordine in tempo reale:** Mostra informazioni aggiornate sullo stato dell'ordine direttamente nel portale clienti
* **Riduzione delle richieste di assistenza:** Consenti ai clienti di gestire autonomamente il tracciamento degli ordini, riducendo la necessità di contattare l'assistenza

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente alla tua pagina**

* Trascina il componente AX – Progress Indicator in Experience Builder nella pagina desiderata
  {% endstep %}

{% step %}

#### **Configura la fonte dati**

* Seleziona **Valori picklist** come tipo di origine dati
* Imposta l' **Nome API dell'oggetto** su `Ordine`
* Imposta l' **Campo picklist** su `Stato`
* Imposta l' **Tipo di record** su `Master`
* Imposta l' **Ordine di ordinamento** su `Predefinito`
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione**

* Imposta l' **Tipo** su `Verticale`
* Imposta l' **Passaggio attuale** su `{!Item.Status}` per riflettere dinamicamente lo stato attivo di ciascun ordine
  {% endstep %}

{% step %}

#### **Visualizza l'anteprima del tuo lavoro**

* Usa l'anteprima di Experience Builder per confermare che l'indicatore verticale venga visualizzato correttamente su l'intera gamma di stati dell'ordine
  {% endstep %}
  {% endstepper %}

***

## FAQ

**Gli utenti possono fare clic su un passaggio per aggiornare lo stato del record?**

No. AX - Progress Indicator è un componente di visualizzazione in sola lettura. Riflette il valore attuale di un campo picklist, ma non scrive di nuovo in Salesforce quando un utente fa clic su un passaggio. Il Progress Indicator stesso non espone interazioni o azioni nella versione di Experience Cloud.

**Suggerimento:** Se stai sviluppando su una pagina Lightning (non su un sito Experience), [la versione di Avonni Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/) di [Indicatore di avanzamento](/dynamic-components/components/progress-indicator.md) supporta [interazioni](/dynamic-components/component-builder/interactions.md) con azioni di aggiornamento record tramite la sua scheda Interazioni

***

## **Collegamenti**

{% content-ref url="/pages/d51f70056d56fc3c16f74c3025a5e0ec81fbd3e7" %}
[AX - Mappa](/experience-cloud/experience-cloud-it/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-it/experience-components/ax-progress-indicator.md?ask=<question>&goal=<endgoal>
```

`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.
