# AX - Indicador de progreso

## Descripción general

**AX - Indicador de progreso** es un componente de Experience Cloud que muestra las etapas del proceso como un rastreador visual de pasos basado en los valores de un campo de lista de selección en páginas de Experience Sites.

Úsalo para mostrar a los usuarios del portal en qué punto están los registros en un flujo de trabajo, como estados de pedidos, etapas de solicitudes, pasos de incorporación o procesos de aprobación. Los usuarios pueden ver el progreso actual y los pasos completados. Elige entre diseños horizontales, verticales o de estilo de ruta y configúralo en Experience Builder.

Perfecto para el seguimiento de pedidos, la visualización del estado de solicitudes, el progreso de incorporación, los flujos de aprobación o cualquier situación en la que los usuarios del portal necesiten claridad visual sobre el estado de un proceso de varios pasos.

{% hint style="warning" %}

#### Nota

Este componente es **solo de visualización** — lee el valor actual de la lista de selección y representa visualmente el paso correspondiente, pero no actualiza el registro cuando un usuario hace clic en un paso. Para permitir que los usuarios cambien el estado de un registro, debes combinarlo con un componente separado o una solución personalizada que gestione la actualización del registro (consulta la sección de preguntas frecuentes a continuación)
{% endhint %}

***

## Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Indicador de progreso y empezar a crear tus casos de uso.

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

***

## Configuración

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

| Nombre                        | Descripción                                                                                                                                                                                                    |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tipo**                      | Elige entre **`Base`**, **`Vertical`**, **`Barra`**, **`Círculo`**, **`Ruta`**, o **`Vertical`** estilos de navegación.                                                                                        |
| **Formato**                   | <ul><li><strong>Lineal</strong>: Flujo de progreso estándar.</li><li><strong>No lineal</strong>: El progreso no sigue un orden secuencial</li></ul>                                                            |
| **Sombreado**                 | Aplicar efecto de sombreado al componente                                                                                                                                                                      |
| **Paso actual**               | Define el paso actual en el flujo de progreso.                                                                                                                                                                 |
| **Alineación del icono**      | <ul><li><strong>Centro</strong>: Centrar el icono en el paso.</li><li><strong>Superior</strong>: Alinear el icono en la parte superior del paso</li></ul>                                                      |
| **Tamaño del icono**          | Selecciona entre Pequeño, Mediano o Grande.                                                                                                                                                                    |
| **Mostrar número de paso**    | Muestra el número de cada paso.                                                                                                                                                                                |
| **Mostrar etiqueta del paso** | Muestra las etiquetas de cada paso.                                                                                                                                                                            |
| **Ocultar valor de la barra** | Oculta el valor/porcentaje en la barra de progreso.                                                                                                                                                            |
| **Fuente de datos**           | <ul><li><strong>Manual</strong>: Introduce manualmente los datos de progreso.</li><li><strong>Valores de lista de selección</strong>: Usa valores de una lista de selección para definir el progreso</li></ul> |
| {% endtab %}                  |                                                                                                                                                                                                                |

{% tab title="🎨 Estilo" %}

| Nombre                | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Barra**             | Personaliza el color y el color de completado.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Icono**             | <p>Ofrece una amplia personalización de color, que incluye:</p><ul><li><strong><code>En foco</code></strong>, <strong><code>Regular</code></strong>, <strong><code>Relleno</code></strong>, <strong><code>Borde</code></strong>, <strong><code>Activo</code></strong>, <strong><code>Completado</code></strong>, y <strong><code>colores de error</code></strong> (y sus variantes de relleno y borde).</li></ul>                                                                                                             |
| **Etiqueta del paso** | <ul><li><strong>Color del texto</strong>: Establece el color del texto de la etiqueta.</li><li><strong>Tamaño de fuente</strong>: Define el tamaño de la fuente.</li><li><strong>Familia tipográfica</strong>: Elige la tipografía para la etiqueta.</li><li><strong>Peso de fuente</strong>: Selecciona el grosor/peso de la fuente.</li><li><strong>Sombra del texto</strong>: Añade un efecto de sombra al texto.</li><li><strong>Límite de líneas</strong>: Limita el número de líneas del texto de la etiqueta</li></ul> |
| {% endtab %}          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| {% endtabs %}         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

***

## Ejemplos de casos de uso

### Ejemplo 1: Ruta del proceso de ventas

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

Guía a tus usuarios asociados a través de cada etapa del proceso de ventas con una ruta visual e intuitiva que impulsa la adopción y mantiene los acuerdos avanzando.

***

#### **Qué conseguirás**

* **Experiencia de ventas guiada:** Ofrece a los usuarios asociados una representación visual clara de en qué punto se encuentra cada oportunidad en el proceso de ventas
* **Mayor adopción:** Reduce la confusión y mejora la participación al mostrar la información de la etapa correcta directamente en el sitio de Experience
* **Visibilidad del pipeline:** Ayuda a los socios a mantenerse alineados con los siguientes pasos sin salir del portal

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade el componente a tu página**

* Arrastra el componente AX – Indicador de progreso a Experience Builder en la página que desees
  {% endstep %}

{% step %}

#### **Configura la fuente de datos**

* Selecciona **Comprobar valores de lista de selección** como tipo de fuente de datos
* Establece el **Nombre API del objeto** en `Opportunity`
* Establece el **Campo de lista de selección** en `Stage`
* Establece el **Tipo de registro** en `Master`
* Establece el **Orden de clasificación** en `Predeterminado`
  {% endstep %}

{% step %}

#### **Personaliza la visualización**

* Establece el **Tipo** en `Ruta`
* Establece el **Paso actual** en `{!Item.Stage}` para reflejar dinámicamente la etapa activa de cada oportunidad
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Usa la vista previa de Experience Builder para verificar que la ruta se muestra correctamente en las distintas etapas de la oportunidad
  {% endstep %}
  {% endstepper %}

***

#### **Enlaces**

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

***

### Ejemplo 2: Estado del pedido del cliente

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

Ofrece a tus clientes claridad inmediata sobre en qué punto está su pedido, desde la realización hasta la entrega, con un indicador de progreso vertical limpio y fácil de seguir.

***

#### **Qué conseguirás**

* **Visibilidad del pedido en tiempo real:** Muestra información actualizada del estado del pedido directamente dentro del portal de clientes
* **Menos consultas al soporte:** Permite a los clientes autogestionar el seguimiento de sus pedidos, reduciendo la necesidad de contactar con soporte

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añade el componente a tu página**

* Arrastra el componente AX – Indicador de progreso a Experience Builder en la página que desees
  {% endstep %}

{% step %}

#### **Configura la fuente de datos**

* Selecciona **Comprobar valores de lista de selección** como tipo de fuente de datos
* Establece el **Nombre API del objeto** en `Pedido`
* Establece el **Campo de lista de selección** en `Estado`
* Establece el **Tipo de registro** en `Master`
* Establece el **Orden de clasificación** en `Predeterminado`
  {% endstep %}

{% step %}

#### **Personaliza la visualización**

* Establece el **Tipo** en `Vertical`
* Establece el **Paso actual** en `{!Item.Status}` para reflejar dinámicamente el estado activo de cada pedido
  {% endstep %}

{% step %}

#### **Previsualiza tu trabajo**

* Usa la vista previa de Experience Builder para confirmar que el indicador vertical se muestra correctamente en todo el rango de estados del pedido
  {% endstep %}
  {% endstepper %}

***

## Preguntas frecuentes

**¿Pueden los usuarios hacer clic en un paso para actualizar el estado del registro?**

No. AX - Indicador de progreso es un componente de solo lectura. Refleja el valor actual de un campo de lista de selección, pero no escribe de vuelta en Salesforce cuando un usuario hace clic en un paso. El propio Indicador de progreso no expone interacciones ni acciones en la versión de Experience Cloud.

**Consejo:** Si estás creando en una Lightning Page (no en un Experience Site), [la versión de Avonni Dynamic Components](https://app.gitbook.com/o/9SPYZVrIHB81fz19OpSr/s/ODPvvv7Cx9Z9RECLn3oV/) de [Indicador de progreso](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/progress-indicator) sí admite [interacciones](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/component-builder/interactions) con acciones de actualización de registros a través de su pestaña de Interacción

***

## **Enlaces**

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