> 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-it/experience-components/ax-timeline.md). # AX - Cronologia ## Panoramica **AX - Cronologia** è un componente di Experience Cloud che visualizza i record Salesforce in ordine cronologico nelle pagine di Experience Sites. Usalo per mostrare agli utenti del portale attività basate sulla data, come la cronologia dei loro casi, la timeline degli ordini, le tappe del 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 i dati da qualsiasi oggetto standard o personalizzato con campi data. Perfetto per feed di attività, cronologie dei casi, timeline di tracciamento degli 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" %} Avonni Timeline è [Pronta per la reattività](/experience-cloud/experience-cloud-it/per-iniziare/reactive-components.md) {% endhint %} ## Proprietà {% tabs %} {% tab title="Configurazione di base" %} | Nome | Descrizione | | ------------------------------------ | ------------------------------------------------------------------------ | | **Titolo** | Il titolo principale della timeline. | | **Stile del testo del titolo** | Personalizza lo stile del carattere del titolo per un'enfasi visiva. | | **Didascalia** | Una breve descrizione o testo supplementare per la timeline. | | **Stile del testo della 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 dell'icona** | Determina la dimensione dell'icona per una coerenza visiva. | | **Orientamento** | Seleziona tra i layout 'verticale' e 'orizzontale' in base ai contenuti e alle considerazioni di spazio. | | **Direzione di ordinamento** | Scegli 'asc' per l'ordine cronologico crescente o 'desc' per quello decrescente. | | **Raggruppa per** | Organizza gli elementi della timeline per 'settimana', 'mese' o 'anno' per una navigazione e una comprensione più semplici | | **Formato data dell'elemento** | Formatta la visualizzazione delle date negli elementi della timeline per maggiore 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 a estremità aperta | | **Riducibile** | Consenti di comprimere sezioni della timeline, migliorando l'interazione dell'utente | | **Ricercabile** | Consenti agli utenti di cercare nella timeline elementi o eventi specifici | | **Mostra paginazione** | Implementa la paginazione per timeline con un gran numero di elementi | | **Numero massimo di elementi visibili** | Imposta il numero massimo di elementi da mostrare prima che venga attivata la paginazione | | {% endtab %} | | {% tab title="Interattività e personalizzazione" %} | Nome | Descrizione | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Azioni dell'intestazione** | Aggiungi pulsanti di azione nell'intestazione della timeline per comandi e interazioni dell'utente. | | **Azioni degli 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, inclusi 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 'primo', 'ultimo' e 'successivo' | | {% endtab %} | | {% tab title="Origine dati" %} | Nome | Descrizione | | ---------------- | --------------------------------------------------------------------------------------- | | **Manuale** | Inserisci manualmente gli elementi della timeline e i loro 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. | | **Dimensione 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 del bordo inferiore (se unito)** | Se gli elementi della timeline sono uniti, questa impostazione definisce il colore del bordo inferiore. | | **Dimensione del bordo inferiore (se unito)** | Regola lo spessore del bordo inferiore quando gli elementi sono uniti. | | **Stile del bordo inferiore (se unito)** | Sceglie lo stile del bordo inferiore per gli elementi uniti. | | **Padding (alto, destra, basso, sinistra)** | Imposta lo spazio interno all'interno dell'intestazione. | | **Margine inferiore** | Determina lo spazio sotto l'intestazione. | | {% endtab %} | | {% tab title="Titolo dell'intestazione" %} | Nome | Descrizione | | ---------------------------- | ---------------------------------------------------------------- | | **Colore** | Cambia il colore del testo del titolo. | | **Dimensione del carattere** | Cambia il colore del testo del titolo. | | **Peso del carattere** | Altera il grassetto o lo spessore del testo del titolo. | | **Stile del font** | Applica uno stile (ad es. corsivo, normale) al testo del titolo. | | {% endtab %} | | {% tab title="Didascalia dell'intestazione" %} | Nome | Descrizione | | ---------------------------- | ------------------------------------------------------------- | | **Colore** | Imposta il colore del testo della didascalia. | | **Dimensione del carattere** | Regola la dimensione del testo della didascalia. | | **Peso del carattere** | Altera il grassetto o lo spessore del testo della didascalia. | | **Stile del font** | Applica uno stile al testo della didascalia | | {% endtab %} | | {% tab title="Avatar dell'intestazione" %} | Nome | Descrizione | | ---------------------------- | --------------------------------------------------------------------- | | **Colore** | Imposta il colore di sfondo dell'avatar. | | **Dimensione del carattere** | Cambia il colore del contenuto dell'avatar (ad es. icona o immagine). | | **Peso del carattere** | Regola il colore di utilità per contrasto o enfasi | | **Stile del font** | 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** | Cambia il colore di sfondo dei pulsanti. | | **Colore del testo/icona** | Regola il colore del testo o delle icone all'interno dei pulsanti. | | **Colore del pulsante attivo** | Specifica il colore del pulsante di paginazione quando è attivo o selezionato. | | {% 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-it/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.