# AX - Cronologia ## Panoramica **AX - Timeline** è un componente di Experience Cloud che mostra i record Salesforce in ordine cronologico nelle pagine dei siti Experience. Usalo per mostrare agli utenti del portale attività basate sulla data, come la cronologia dei casi, la timeline degli ordini, le tappe di progetto o qualsiasi record con data. Gli utenti possono cercare e filtrare le voci, fare clic sugli elementi per navigare ai record e vedere gli eventi organizzati per periodi di tempo. Recupera dati da qualsiasi oggetto standard o personalizzato con campi data. Perfetto per feed di attività, cronologie dei casi, timeline di tracciamento ordini, aggiornamenti sullo stato dei progetti o ovunque gli utenti del portale debbano vedere "cosa è successo e quando" in un formato cronologico scorrevole. {% hint style="success" %} La Avonni Timeline è [Pronta per Reactive](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/componenti-reattivi) {% endhint %} ## Proprietà {% tabs %} {% tab title="Configurazione di base" %} | Nome | Descrizione | | -------------------------- | ---------------------------------------------------------------------------------- | | **Titolo** | L'intestazione principale della timeline. | | **Testo stile titolo** | Personalizza lo stile del carattere del titolo per dargli maggiore risalto visivo. | | **Didascalia** | Una breve descrizione o testo supplementare per la timeline. | | **Testo stile didascalia** | Regola lo stile del carattere della didascalia per completare il titolo. | | {% endtab %} | | {% tab title="Elementi visivi e funzionali" %} | Nome | Descrizione | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Nome icona** | Scegli un'icona dal Salesforce Lightning Design System per rappresentare gli elementi della timeline. | | **Dimensione icona** | Determina la dimensione dell'icona per una coerenza visiva. | | **Orientamento** | Seleziona tra layout "verticale" e "orizzontale" in base al contenuto e allo spazio disponibile. | | **Direzione ordinamento** | Scegli "asc" per ordine cronologico crescente o "desc" per ordine cronologico decrescente. | | **Raggruppa per** | Organizza gli elementi della timeline per "settimana", "mese" o "anno" per una navigazione e una comprensione più facili | | **Formato data elemento** | Formatta la visualizzazione delle date sugli elementi della timeline per chiarezza e coerenza | | **È unito** | Scegli se gli elementi della timeline sono visivamente collegati da una linea o da un percorso | | **Chiuso** | Attiva o disattiva se la timeline è chiusa o aperta | | **Richiudibile** | Consenti di richiudere le sezioni della timeline, migliorando l'interazione dell'utente | | **Ricercabile** | Consenti agli utenti di cercare all'interno della timeline elementi o eventi specifici | | **Mostra paginazione** | Implementa la paginazione per timeline con un numero elevato di elementi | | **Numero massimo di elementi visibili** | Imposta il numero massimo di elementi da visualizzare prima che entri in azione la paginazione | | {% endtab %} | | {% tab title="Interattività e personalizzazione" %} | Nome | Descrizione | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Azioni intestazione** | Aggiungi pulsanti di azione nell'intestazione della timeline per i comandi e le interazioni dell'utente. | | **Azioni elementi** | Implementa pulsanti di azione a livello di elemento per funzionalità specifiche. | | **Attributi dei campi** | Configura la visualizzazione dei campi all'interno degli elementi della timeline, incluso il numero di colonne e le varianti per la presentazione dei campi | | **Opzioni di filtro** | Includi un meccanismo di filtro visualizzato come popover per ordinare o restringere gli elementi della timeline | | **Opzioni del motore di ricerca** | Personalizza la funzionalità di ricerca con testo segnaposto e impostazioni di posizione | | **Opzioni di paginazione** | Regola l'allineamento e personalizza le etichette e le icone per i controlli di paginazione "prima", "ultima" e "successiva" | | {% endtab %} | | {% tab title="Origine dati" %} | Nome | Descrizione | | ---------------- | --------------------------------------------------------------------------------------- | | **Manuale** | Inserisci manualmente gli elementi della timeline e i relativi dettagli. | | **Origine dati** | Usa una query per popolare automaticamente la timeline con elementi da un'origine dati. | | {% endtab %} | | | {% endtabs %} | | ## Impostazioni di stile {% tabs %} {% tab title="Intestazione" %} | Nome | Descrizione | | -------------------------------------- | ---------------------------------------------------------------------------------------- | | **Colore di sfondo** | Imposta il colore dello sfondo dell'intestazione. | | **Colore del bordo** | Determina il colore del bordo dell'intestazione. | | **Spessore del bordo** | Regola lo spessore del bordo attorno all'intestazione. | | **Stile del bordo** | Seleziona lo stile del bordo (ad es. solido, tratteggiato, puntinato). | | **Raggio del bordo** | Arrotonda gli angoli dell'intestazione per un aspetto più morbido. | | **Colore bordo inferiore (È unito)** | Se gli elementi della timeline sono uniti, questo imposta il colore del bordo inferiore. | | **Spessore bordo inferiore (È unito)** | Regola lo spessore del bordo inferiore quando gli elementi sono uniti. | | **Stile bordo inferiore (È unito)** | Sceglie lo stile del bordo inferiore per gli elementi uniti. | | **Padding (Top, Right, Bottom, Left)** | Imposta lo spazio interno all'interno dell'intestazione. | | **Margine inferiore** | Determina lo spazio sotto l'intestazione. | | {% endtab %} | | {% tab title="Titolo intestazione" %} | Nome | Descrizione | | ------------------------ | ---------------------------------------------------------------- | | **Colore** | Modifica il colore del testo del titolo. | | **Dimensione carattere** | Modifica il colore del testo del titolo. | | **Peso carattere** | Altera il grassetto o lo spessore del testo del titolo. | | **Stile carattere** | Applica uno stile (ad es. corsivo, normale) al testo del titolo. | | {% endtab %} | | {% tab title="Didascalia intestazione" %} | Nome | Descrizione | | ------------------------ | ------------------------------------------------------------- | | **Colore** | Imposta il colore del testo della didascalia. | | **Dimensione carattere** | Regola la dimensione del testo della didascalia. | | **Peso carattere** | Altera il grassetto o lo spessore del testo della didascalia. | | **Stile carattere** | Applica uno stile al testo della didascalia | | {% endtab %} | | {% tab title="Avatar intestazione" %} | Nome | Descrizione | | ------------------------ | ----------------------------------------------------------------------- | | **Colore** | Imposta il colore di sfondo dell'avatar. | | **Dimensione carattere** | Modifica il colore del contenuto dell'avatar (ad es. icona o immagine). | | **Peso carattere** | Regola il colore utility per contrasto o enfasi | | **Stile carattere** | Arrotonda gli angoli dell'avatar per un aspetto più morbido. | | {% endtab %} | | {% tab title="Pulsanti di paginazione" %} | Nome | Descrizione | | -------------------------- | ------------------------------------------------------------------------------ | | **Bordo** | Imposta le proprietà del bordo dei pulsanti di paginazione. | | **Sfondo** | Modifica il colore di sfondo dei pulsanti. | | **Colore testo/icona** | Regola il colore del testo o delle icone all'interno dei pulsanti. | | **Colore pulsante attivo** | Specifica il colore del pulsante di paginazione quando è attivo o selezionato. | | {% endtab %} | | | {% endtabs %} | |