> 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-fr/experience-components/ax-timeline.md). # AX - Chronologie ## Aperçu **AX - Chronologie** est un composant Experience Cloud qui affiche les enregistrements Salesforce dans l'ordre chronologique sur les pages des sites Experience. Utilisez-le pour afficher aux utilisateurs du portail des activités basées sur une date — comme l'historique de leurs cas, la chronologie des commandes, les jalons de projet ou tout autre enregistrement horodaté. Les utilisateurs peuvent rechercher et filtrer les entrées, cliquer sur des éléments pour accéder aux enregistrements et voir les événements organisés par périodes. Récupérez les données à partir de n'importe quel objet standard ou personnalisé comportant des champs de date. Idéal pour les fils d'activité, les historiques de cas, le suivi des commandes, les mises à jour d'état de projet, ou partout où les utilisateurs du portail doivent voir « ce qui s'est passé et quand » dans un format chronologique défilable. {% hint style="success" %} La chronologie Avonni est [Prêt pour la réactivité](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} ## Configuration ### Source de données | Nom | Description | | --------------------- | --------------------------------------------------------------------------------------------------------------------- | | **Manuel** | Saisissez manuellement les éléments de la chronologie et leurs détails. | | **Source de données** | Utilisez une requête pour remplir automatiquement la chronologie avec des éléments provenant d'une source de données. | ### Configuration de base **Titre** est l'en-tête principal de la chronologie, et **Légende** est une brève description ou un texte complémentaire en dessous. **Texte du style du titre** et **Texte du style de la légende** personnalisez le style de police de chacun pour mettre en valeur visuellement. ### Éléments visuels et fonctionnels **Nom de l'icône** choisit une icône du Salesforce Lightning Design System pour représenter les éléments de la chronologie, et **Taille de l’icône** définit sa taille pour assurer une cohérence visuelle. **Orientation** sélectionne une `vertical` ou `horizontal` mise en page en fonction du contenu et des contraintes d'espace. **Direction du tri** choisit `asc` (croissant) ou `desc` (décroissant) de l'ordre chronologique. **Grouper par** organise les éléments de la chronologie par `semaine`, `mois`, ou `année` pour faciliter la navigation et la compréhension. **Format de date de l'élément** formate l'affichage des dates sur les éléments de la chronologie pour plus de clarté et de cohérence. **Est relié** détermine si les éléments de la chronologie sont visuellement connectés par une ligne ou un chemin. **Fermée** active ou désactive le caractère fermé ou ouvert de la chronologie. **Réductible** permet de replier des sections de la chronologie, améliorant ainsi l'interaction avec l'utilisateur. **Recherchable** permet aux utilisateurs de rechercher des éléments ou événements spécifiques dans la chronologie. **Afficher la pagination** implémente la pagination pour les chronologies comportant un grand nombre d'éléments, et **Nombre maximal d'éléments visibles** définit le nombre maximal d'éléments affichés avant le déclenchement de la pagination. **Nom de l'API** est un identifiant unique utilisé pour référencer le composant. **Taille de l'icône de l'élément** définit la taille des icônes par élément, et **Mettre en surbrillance au clic** met visuellement un élément en surbrillance lorsqu'il est cliqué. ### Interactivité et personnalisation **Actions de l'en-tête** ajoutent des boutons d'action dans l'en-tête de la chronologie pour les commandes et interactions de l'utilisateur, et **Actions des éléments** ajoutent des boutons d'action au niveau de l'élément pour des fonctionnalités spécifiques. **Attributs des champs** configurent l'affichage des champs dans les éléments de la chronologie, y compris le nombre de colonnes et la variante utilisée pour la présentation des champs. **Options de filtrage** incluent un mécanisme de filtrage affiché sous forme de popover pour trier ou affiner les éléments de la chronologie. **Options du moteur de recherche** personnalisent la fonctionnalité de recherche avec du texte d'espace réservé et des paramètres de position. **Options de pagination** ajustent l'alignement et personnalisent les libellés et les icônes pour les `premier`, `dernier`, et `suivant` contrôles de pagination. ## Style {% tabs %} {% tab title="En-tête" %} | Nom | Description | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------ | | **Couleur d'arrière-plan** | Définit la couleur d'arrière-plan de l'en-tête. | | **Couleur de la bordure** | Détermine la couleur de la bordure de l'en-tête. | | **Taille de la bordure** | Ajuste l'épaisseur de la bordure autour de l'en-tête. | | **Style de bordure** | Sélectionne le style de la bordure (par ex., pleine, en tirets, en pointillés). | | **Rayon de bordure** | Arrondit les coins de l'en-tête pour un aspect plus doux. | | **Couleur de la bordure inférieure (si relié)** | Si les éléments de la chronologie sont reliés, cela définit la couleur de la bordure inférieure. | | **Taille de la bordure inférieure (si relié)** | Ajuste l'épaisseur de la bordure inférieure lorsque les éléments sont reliés. | | **Style de la bordure inférieure (si relié)** | Choisit le style de la bordure inférieure pour les éléments reliés. | | **Rembourrage (haut, droite, bas, gauche)** | Définit l'espacement interne dans l'en-tête. | | **Marge inférieure** | Détermine l'espace sous l'en-tête. | | {% endtab %} | | {% tab title="Titre de l'en-tête" %} | Nom | Description | | --------------------- | ---------------------------------------------------------------- | | **Couleur** | Modifie la couleur du texte du titre. | | **Taille de police** | Modifie la couleur du texte du titre. | | **Graisse de police** | Modifie le gras ou l'épaisseur du texte du titre. | | **Style de police** | Applique un style (par ex., italique, normal) au texte du titre. | | {% endtab %} | | {% tab title="Légende de l'en-tête" %} | Nom | Description | | --------------------- | ------------------------------------------------------ | | **Couleur** | Définit la couleur du texte de la légende. | | **Taille de police** | Ajuste la taille du texte de la légende. | | **Graisse de police** | Modifie le gras ou l'épaisseur du texte de la légende. | | **Style de police** | Applique un style au texte de la légende | | {% endtab %} | | {% tab title="Avatar d’en-tête" %} | Nom | Description | | --------------------- | -------------------------------------------------------------------- | | **Couleur** | Définit la couleur d'arrière-plan de l'avatar. | | **Taille de police** | Modifie la couleur du contenu de l'avatar (par ex., icône ou image). | | **Graisse de police** | Ajuste la couleur utilitaire pour le contraste ou la mise en valeur | | **Style de police** | Arrondit les coins de l'avatar pour un aspect plus doux. | | {% endtab %} | | {% tab title="Boutons de pagination" %} | Nom | Description | | ------------------------------- | ------------------------------------------------------------------------------- | | **Bordure** | Définit les propriétés de bordure des boutons de pagination. | | **Arrière-plan** | Modifie la couleur d'arrière-plan des boutons. | | **Couleur du texte/de l'icône** | Ajuste la couleur du texte ou des icônes à l'intérieur des boutons. | | **Couleur du bouton actif** | Spécifie la couleur du bouton de pagination lorsqu'il est actif ou sélectionné. | | {% 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-fr/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.