> 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-es/experience-components/ax-progress-indicator.md). # Indicador de progreso AX ## Resumen **Indicador de progreso AX** es un componente de Experience Cloud que muestra las etapas del proceso como un rastreador visual de pasos basado en valores de campos de lista de selección en páginas de Experience Sites. Úsalo para mostrar a los usuarios del portal dónde se encuentran los registros en un flujo de trabajo—como estados de pedidos, etapas de solicitud, 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 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 trabajo de aprobación o cualquier lugar donde 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 url="" flowId="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** | | | **Sombreado** | Aplica un efecto de sombreado al componente | | **Paso actual** | Define el paso actual en el flujo de progreso. | | **Alineación del icono** | | | **Tamaño del icono** | Selecciona entre Pequeño, Mediano o Grande. | | **Mostrar número del 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** | | | {% endtab %} | | {% tab title="🎨 Estilo" %} | Nombre | Descripción | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Barra** | Personaliza el color y el color de completado. | | **Icono** |

Ofrece una amplia personalización de colores, incluyendo:

| | **Etiqueta del paso** | | | {% endtab %} | | | {% endtabs %} | | *** ## Ejemplos de casos de uso ### Ejemplo 1: Ruta del proceso de ventas {% @arcade/embed url="" flowId="WPNsAX5UXy9v9pc0SGSp" %} Guía a tus usuarios asociados a través de cada etapa del recorrido de ventas con una ruta visual e intuitiva que impulsa la adopción y mantiene los acuerdos avanzando. *** #### **Lo que lograrás** * **Experiencia de ventas guiada:** Ofrece a los usuarios asociados una representación visual y 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 mostrando la información correcta de la etapa directamente en el sitio de Experience * **Visibilidad del pipeline:** Ayuda a los socios a mantenerse alineados con los próximos 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 %} #### **Configurar la fuente de datos** * Selecciona **Selecciona Valores de lista de selección** como tu tipo de fuente de datos * Establece el **Nombre de API del objeto** en `Opportunity` * Establece el **Campo de lista de selección** en `Etapa` * 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 renderiza correctamente en las distintas etapas de la oportunidad {% endstep %} {% endstepper %} *** #### **Enlaces** {% content-ref url="/pages/6a856c7c8b3637fb27d083fcab206f6a975dee64" %} [AX - Detalle del registro](/experience-cloud/experience-cloud-es/experience-components/ax-record-detail.md) {% endcontent-ref %} *** ### Ejemplo 2: Estado del pedido del cliente {% @arcade/embed url="" flowId="MQbhk3KEUgyVjAfo4zfb" %} Ofrece a tus clientes una claridad instantánea sobre el estado de su pedido, desde la realización hasta el cumplimiento, con un indicador de progreso vertical limpio y fácil de seguir. *** #### **Lo que lograrás** * **Visibilidad del pedido en tiempo real:** Muestra información actualizada del estado del pedido directamente en el portal del cliente * **Menos consultas al soporte:** Permite a los clientes hacer el seguimiento de sus pedidos por sí mismos, 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 %} #### **Configurar la fuente de datos** * Selecciona **Selecciona Valores de lista de selección** como tu tipo de fuente de datos * Establece el **Nombre de 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 toda la gama de estados del pedido {% endstep %} {% endstepper %} *** ## Preguntas frecuentes **¿Pueden los usuarios hacer clic en un paso para actualizar el estado del registro?** No. AX - Progress Indicator es un componente de visualización 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 Progress Indicator no expone interacciones ni acciones en la versión de Experience Cloud. **Consejo:** Si estás creando en una página de Lightning (no en un Experience Site), [la versión de Avonni Dynamic Components](https://docs.avonnicomponents.com/dynamic-components/) de [Indicador de progreso](/dynamic-components/components/progress-indicator.md) sí admite [interacciones](/dynamic-components/component-builder/interactions.md) con acciones de actualización de registros a través de su pestaña Interacción *** ## **Enlaces** {% content-ref url="/pages/4c35924eb5c00761a6bf9119ad8818da63a29b75" %} [AX - Mapa](/experience-cloud/experience-cloud-es/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-es/experience-components/ax-progress-indicator.md?ask=&goal= ``` `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.