# AX - Indicatore di avanzamento

## Panoramica

**AX - Indicatore di avanzamento** è un componente di Experience Cloud che visualizza le fasi del processo come un tracker visivo a passaggi, 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 workflow, 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 il tutto in Experience Builder.

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

***

## Per iniziare

Usa questo semplice tutorial per apprendere le basi del componente Indicatore di avanzamento e iniziare a realizzare 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`**, 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 ombreggiato al componente                                                                                                                                               |
| **Passaggio corrente**         | Definisci il passaggio corrente nel flusso di avanzamento.                                                                                                                                 |
| **Allineamento icona**         | <ul><li><strong>Centro</strong>: centra l'icona nel passaggio.</li><li><strong>Alto</strong>: allinea l'icona nella parte superiore del passaggio</li></ul>                                |
| **Dimensione icona**           | Seleziona tra Piccolo, Medio o Grande.                                                                                                                                                     |
| **Mostra numero passaggio**    | Mostra il numero di ciascun passaggio.                                                                                                                                                     |
| **Mostra etichetta passaggio** | Mostra le etichette di ciascun passaggio.                                                                                                                                                  |
| **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, 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 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 carattere</strong>: definisci la dimensione del carattere.</li><li><strong>Famiglia di caratteri</strong>: scegli il font per l'etichetta.</li><li><strong>Peso carattere</strong>: seleziona il peso/spessore del carattere.</li><li><strong>Ombra del testo</strong>: aggiungi un effetto ombra al testo.</li><li><strong>Limite di 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 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 di dove si trova ciascuna opportunità nel processo di vendita
* **Maggiore adozione:** Riduci la confusione e migliora il coinvolgimento mostrando direttamente nel sito Experience le informazioni corrette sulla fase
* **Visibilità della pipeline:** Aiuta i partner a rimanere allineati sui prossimi passaggi 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 l'origine dati**

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

{% step %}

#### **Personalizza la visualizzazione**

* Imposta **Tipo** su `Percorso`
* Imposta **Passaggio 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 visualizzato correttamente nelle diverse fasi dell'opportunità
  {% endstep %}
  {% endstepper %}

***

#### **Collegamenti**

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

***

### Esempio 2: Stato ordine cliente

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

Offri ai tuoi clienti 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 al supporto:** Consenti ai clienti di gestire in autonomia il tracciamento degli ordini, riducendo la necessità di contattare il supporto

***

#### **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 l'origine dati**

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

{% step %}

#### **Personalizza la visualizzazione**

* Imposta **Tipo** su `Verticale`
* Imposta **Passaggio 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 in tutta la gamma degli stati dell'ordine
  {% endstep %}
  {% endstepper %}

***

#### **Collegamenti**

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