> 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-timeline.md). # AX - Línea de tiempo ## Resumen **AX - Línea de tiempo** es un componente de Experience Cloud que muestra registros de Salesforce en orden cronológico en las páginas de Experience Sites. Úsalo para mostrar a los usuarios del portal actividad basada en fechas—como su historial de casos, cronología de pedidos, hitos de proyectos o cualquier registro con fecha. Los usuarios pueden buscar y filtrar entradas, hacer clic en elementos para navegar a los registros y ver eventos organizados por períodos de tiempo. Extrae datos de cualquier objeto estándar o personalizado con campos de fecha. Perfecto para feeds de actividad, historiales de casos, cronologías de seguimiento de pedidos, actualizaciones del estado de proyectos o cualquier lugar donde los usuarios del portal necesiten ver "qué pasó y cuándo" en un formato desplazable y cronológico. {% hint style="success" %} La Avonni Timeline es [Preparada para Reactive](/experience-cloud/experience-cloud-es/primeros-pasos/reactive-components.md) {% endhint %} ## Propiedades {% tabs %} {% tab title="Configuración básica" %} | Nombre | Descripción | | --------------------------------- | --------------------------------------------------------------------- | | **Título** | El encabezado principal de la línea de tiempo. | | **Texto de estilo del título** | Personaliza el estilo de fuente del título para darle énfasis visual. | | **Subtítulo** | Una breve descripción o texto complementario para la línea de tiempo. | | **Texto de estilo del subtítulo** | Ajusta el estilo de fuente del subtítulo para complementar el título. | | {% endtab %} | | {% tab title="Elementos visuales y funcionales" %} | Nombre | Descripción | | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Nombre del icono** | Elige un icono del Salesforce Lightning Design System para representar los elementos de la línea de tiempo. | | **Tamaño del icono** | Determina el tamaño del icono para mantener la coherencia visual. | | **Orientación** | Selecciona entre los diseños 'vertical' y 'horizontal' según el contenido y las consideraciones de espacio. | | **Dirección de orden** | Elige 'asc' para ascendente o 'desc' para descendente en orden cronológico. | | **Agrupar por** | Organiza los elementos de la línea de tiempo por 'semana', 'mes' o 'año' para facilitar la navegación y la comprensión | | **Formato de fecha del elemento** | Da formato a la visualización de las fechas en los elementos de la línea de tiempo para lograr claridad y coherencia | | **Está unido** | Elige si los elementos de la línea de tiempo están conectados visualmente por una línea o un recorrido | | **Cerrado** | Alterna si la línea de tiempo está cerrada o abierta | | **Plegable** | Permite que las secciones de la línea de tiempo se puedan plegar, mejorando la interacción del usuario | | **Buscable** | Permite a los usuarios buscar elementos o eventos específicos dentro de la línea de tiempo | | **Mostrar paginación** | Implementa paginación para líneas de tiempo con una gran cantidad de elementos | | **Máximo de elementos visibles** | Define el número máximo de elementos que se mostrarán antes de que entre en acción la paginación | | {% endtab %} | | {% tab title="Interactividad y personalización" %} | Nombre | Descripción | | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Acciones del encabezado** | Añade botones de acción en el encabezado de la línea de tiempo para comandos e interacciones del usuario. | | **Acciones de los elementos** | Implementa botones de acción a nivel de elemento para funcionalidades específicas. | | **Atributos de campo** | Configura la visualización de los campos dentro de los elementos de la línea de tiempo, incluido el número de columnas y las variantes para la presentación de campos | | **Opciones de filtrado** | Incluye un mecanismo de filtrado mostrado como un popover para ordenar o acotar los elementos de la línea de tiempo | | **Opciones del motor de búsqueda** | Personaliza la funcionalidad de búsqueda con texto de marcador de posición y ajustes de posición | | **Opciones de paginación** | Ajusta la alineación y personaliza las etiquetas e iconos para los controles de paginación 'primero', 'último' y 'siguiente' | | {% endtab %} | | {% tab title="Fuente de datos" %} | Nombre | Descripción | | ------------------- | -------------------------------------------------------------------------------------------------------- | | **Manual** | Introduce manualmente los elementos de la línea de tiempo y sus detalles. | | **Fuente de datos** | Usa una consulta para completar automáticamente la línea de tiempo con elementos de una fuente de datos. | | {% endtab %} | | | {% endtabs %} | | ## Ajustes de estilo {% tabs %} {% tab title="Encabezado" %} | Nombre | Descripción | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------ | | **Color de fondo** | Establece el color de fondo del encabezado. | | **Color del borde** | Determina el color del borde del encabezado. | | **Tamaño del borde** | Ajusta el grosor del borde alrededor del encabezado. | | **Estilo del borde** | Selecciona el estilo del borde (por ejemplo, sólido, discontinuo, punteado). | | **Radio del borde** | Redondea las esquinas del encabezado para darle un aspecto más suave. | | **Color del borde inferior (Está unido)** | Si los elementos de la línea de tiempo están unidos, esto establece el color del borde inferior. | | **Tamaño del borde inferior (Está unido)** | Ajusta el grosor del borde inferior cuando los elementos están unidos. | | **Estilo del borde inferior (Está unido)** | Elige el estilo del borde inferior para los elementos unidos. | | **Relleno (Arriba, Derecha, Abajo, Izquierda)** | Establece el espacio interno dentro del encabezado. | | **Margen inferior** | Determina el espacio debajo del encabezado. | | {% endtab %} | | {% tab title="Título del encabezado" %} | Nombre | Descripción | | -------------------- | ----------------------------------------------------------------- | | **Color** | Cambia el color del texto del título. | | **Tamaño de fuente** | Cambia el color del texto del título. | | **Peso de fuente** | Altera el grosor o la negrita del texto del título. | | **Estilo de fuente** | Aplica estilo (por ejemplo, cursiva, normal) al texto del título. | | {% endtab %} | | {% tab title="Subtítulo del encabezado" %} | Nombre | Descripción | | -------------------- | ------------------------------------------------------ | | **Color** | Establece el color del texto del subtítulo. | | **Tamaño de fuente** | Ajusta el tamaño del texto del subtítulo. | | **Peso de fuente** | Altera el grosor o la negrita del texto del subtítulo. | | **Estilo de fuente** | Aplica estilo al texto del subtítulo | | {% endtab %} | | {% tab title="Avatar del encabezado" %} | Nombre | Descripción | | -------------------- | ----------------------------------------------------------------------- | | **Color** | Establece el color de fondo del avatar. | | **Tamaño de fuente** | Cambia el color del contenido del avatar (por ejemplo, icono o imagen). | | **Peso de fuente** | Ajusta el color de utilidad para contraste o énfasis | | **Estilo de fuente** | Redondea las esquinas del avatar para un aspecto más suave. | | {% endtab %} | | {% tab title="Botones de paginación" %} | Nombre | Descripción | | -------------------------- | ------------------------------------------------------------------------------ | | **Borde** | Establece las propiedades del borde de los botones de paginación. | | **Fondo** | Cambia el color de fondo de los botones. | | **Color del texto/icono** | Ajusta el color del texto o los iconos dentro de los botones. | | **Color del botón activo** | Especifica el color del botón de paginación cuando está activo o seleccionado. | | {% endtab %} | | | {% endtabs %} | | --- # 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-timeline.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.