# AX - Progress Indicator

## Panoramica

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

Usalo per mostrare agli utenti del portale in quale 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 corrente e i passaggi completati. Scegli tra layout orizzontali, verticali o in stile percorso e configura in Experience Builder.

Perfetto per il monitoraggio degli ordini, la visualizzazione dello stato delle richieste, l’avanzamento dell’onboarding, i flussi di approvazione o ovunque gli utenti del portale abbiano bisogno di chiarezza visiva sullo stato di un processo a più fasi.

{% hint style="warning" %}

#### Nota

Questo componente è **solo visualizzazione** — legge il valore corrente della picklist e rende 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, è necessario 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 flowId="ZU4p8JnowZCmgWi7FUKf" url="<https://app.arcade.software/share/ZU4p8JnowZCmgWi7FUKf>" %}

***

## Impostazioni

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

| Nome                            | Descrizione                                                                                                                                                                                |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Tipo**                        | Scegli tra **`Base`**, **`Verticale`**, **`Barra`**, **`Cerchio`**, **`Percorso`**, o **`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>                            |
| **In ombra**                    | Applica un effetto di ombreggiatura al componente                                                                                                                                          |
| **Fase corrente**               | Definisci la fase corrente nel flusso di avanzamento.                                                                                                                                      |
| **Allineamento icona**          | <ul><li><strong>Centro</strong>: centra l’icona nella fase.</li><li><strong>In alto</strong>: allinea l’icona nella parte superiore della fase</li></ul>                                   |
| **Dimensione icona**            | Seleziona tra Piccola, Media o Grande.                                                                                                                                                     |
| **Mostra numero della fase**    | Mostra il numero di ogni fase.                                                                                                                                                             |
| **Mostra etichetta della fase** | Mostra le etichette di ogni fase.                                                                                                                                                          |
| **Nascondi valore 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, inclusi:</p><ul><li><strong><code>Focus</code></strong>, <strong><code>Regolare</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 della fase** | <ul><li><strong>Colore del testo</strong>: imposta il colore del testo dell’etichetta.</li><li><strong>Dimensione carattere</strong>: definisci la dimensione del font.</li><li><strong>Famiglia di font</strong>: scegli il carattere tipografico per l’etichetta.</li><li><strong>Peso carattere</strong>: seleziona il peso/spessore del font.</li><li><strong>Ombra testo</strong>: aggiungi un effetto ombra al testo.</li><li><strong>Clamping righe</strong>: limita il numero di righe per il testo dell’etichetta</li></ul> |
| {% endtab %}             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| {% endtabs %}            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

***

## Esempi d’uso

### Esempio 1: Percorso del processo di vendita

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

Guida i tuoi 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 della posizione di ciascuna opportunità nel processo di vendita
* **Maggiore adozione:** Riduci la confusione e migliora il coinvolgimento mostrando le informazioni sulla fase corretta 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 – Indicatore di avanzamento in Experience Builder nella pagina desiderata
  {% endstep %}

{% step %}

#### **Configura l’origine dati**

* Seleziona **Controlla i valori della picklist** come tipo di origine dati
* Imposta il **Nome API oggetto** su `Opportunità`
* Imposta il **Campo picklist** su `Fase`
* Imposta il **Tipo di record** su `Master`
* Imposta il **Ordine di ordinamento** su `Predefinito`
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione**

* Imposta il **Tipo** su `Percorso`
* Imposta il **Fase corrente** su `{!Item.Stage}` per riflettere dinamicamente la fase attiva di ciascuna opportunità
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

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

***

#### **Link**

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

***

### Esempio 2: Stato ordine cliente

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

Offri ai tuoi clienti una chiarezza immediata su dove 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 supporto:** Consenti ai clienti di monitorare autonomamente l’ordine, riducendo la necessità di contattare l’assistenza

***

#### **Come configurarlo**

{% stepper %}
{% step %}

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

* Trascina il componente AX – Indicatore di avanzamento in Experience Builder nella pagina desiderata
  {% endstep %}

{% step %}

#### **Configura l’origine dati**

* Seleziona **Controlla i valori della picklist** come tipo di origine dati
* Imposta il **Nome API oggetto** su `Ordine`
* Imposta il **Campo picklist** su `Stato`
* Imposta il **Tipo di record** su `Master`
* Imposta il **Ordine di ordinamento** su `Predefinito`
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione**

* Imposta il **Tipo** su `Verticale`
* Imposta il **Fase corrente** su `{!Item.Status}` per riflettere dinamicamente lo stato attivo di ciascun ordine
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

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

***

## FAQ

**Gli utenti possono fare clic su una fase per aggiornare lo stato del record?**

No. AX - Indicatore di avanzamento è un componente di sola visualizzazione. Riflette il valore corrente di un campo picklist ma non scrive di nuovo su Salesforce quando un utente fa clic su una fase. Il Progress Indicator stesso non espone interazioni o azioni nella versione di Experience Cloud.

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

***

## **Link**

{% content-ref url="/pages/d51f70056d56fc3c16f74c3025a5e0ec81fbd3e7" %}
[AX - Map](/experience-cloud/experience-cloud-it/experience-components/ax-map.md)
{% endcontent-ref %}


---

# Agent Instructions: 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-it/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.
