# AX - Cronograma ## Descripción general **AX - Cronograma** 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 actividades basadas en fechas, como su historial de casos, cronograma de pedidos, hitos del proyecto 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. Obtén datos de cualquier objeto estándar o personalizado con campos de fecha. Perfecto para feeds de actividad, historiales de casos, cronogramas de seguimiento de pedidos, actualizaciones del estado de proyectos o cualquier lugar donde los usuarios del portal necesiten ver "qué ocurrió y cuándo" en un formato desplazable y cronológico. {% hint style="success" %} El Cronograma Avonni es [Listo para Reactividad](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/componentes-reactivos) {% endhint %} ## Propiedades {% tabs %} {% tab title="Configuración básica" %} | Nombre | Descripción | | --------------------------------- | --------------------------------------------------------------------- | | **Título** | El encabezado principal del cronograma. | | **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 el cronograma. | | **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 del cronograma. | | **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 necesidades de espacio. | | **Dirección de ordenación** | Elige 'asc' para orden ascendente o 'desc' para orden cronológico descendente. | | **Agrupar por** | Organiza los elementos del cronograma por 'semana', 'mes' o 'año' para facilitar la navegación y la comprensión | | **Formato de fecha del elemento** | Formatea la visualización de las fechas en los elementos del cronograma para lograr claridad y coherencia | | **Está unido** | Elige si los elementos del cronograma están visualmente conectados por una línea o un trayecto | | **Cerrado** | Activa o desactiva si el cronograma está cerrado o abierto | | **Plegable** | Permite que las secciones del cronograma sean plegables, mejorando la interacción del usuario | | **Se puede buscar** | Permite a los usuarios buscar dentro del cronograma elementos o eventos específicos | | **Mostrar paginación** | Implementa paginación para cronogramas con una gran cantidad de elementos | | **Máximo de elementos visibles** | Establece 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 del cronograma 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 del cronograma, 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 reducir los elementos del cronograma | | **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 de los controles de paginación de 'primero', 'último' y 'siguiente' | | {% endtab %} | | {% tab title="Fuente de datos" %} | Nombre | Descripción | | ------------------- | ----------------------------------------------------------------------------------------------------- | | **Manual** | Introduce manualmente los elementos del cronograma y sus detalles. | | **Fuente de datos** | Usa una consulta para rellenar automáticamente el cronograma con elementos desde una fuente de datos. | | {% endtab %} | | | {% endtabs %} | | ## Configuración 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 del cronograma 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 (Superior, Derecho, Inferior, Izquierdo)** | Establece el espaciado 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 dar contraste o énfasis | | **Estilo de fuente** | Redondea las esquinas del avatar para darle una apariencia 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 de 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 %} | |