> 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 par ordre chronologique sur les pages des sites Experience. Utilisez-le pour afficher aux utilisateurs du portail des activités datées — comme l’historique de leurs cas, la chronologie des commandes, les jalons d’un projet ou tout 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. Extrayez des données de n’importe quel objet standard ou personnalisé avec des champs de date. Parfait pour les flux d’activité, les historiques de cas, les chronologies de suivi des commandes, les mises à jour de l’état des projets, ou partout où les utilisateurs du portail doivent voir « ce qui s’est passé et quand » dans un format chronologique défilant. {% hint style="success" %} La chronologie Avonni est [Prête pour le réactif](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} ## Propriétés {% tabs %} {% tab title="Configuration de base" %} | Nom | Description | | -------------------------------- | -------------------------------------------------------------------------------- | | **Titre** | L’en-tête principal de la chronologie. | | **Texte du style du titre** | Personnalisez le style de police du titre pour le mettre visuellement en valeur. | | **Légende** | Une brève description ou un texte supplémentaire pour la chronologie. | | **Texte du style de la légende** | Ajustez le style de police de la légende pour qu’il complète le titre. | | {% endtab %} | | {% tab title="Éléments visuels et fonctionnels" %} | Nom | Description | | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | **Nom de l’icône** | Choisissez une icône du Salesforce Lightning Design System pour représenter les éléments de la chronologie. | | **Taille de l’icône** | Déterminez la taille de l’icône pour une cohérence visuelle. | | **Orientation** | Choisissez entre les dispositions « verticale » et « horizontale » selon le contenu et les contraintes d’espace. | | **Sens du tri** | Choisissez « asc » pour un ordre chronologique croissant ou « desc » pour un ordre décroissant. | | **Grouper par** | Organisez les éléments de la chronologie par « semaine », « mois » ou « année » pour une navigation et une compréhension plus faciles. | | **Format de date de l’élément** | Formatez l’affichage des dates sur les éléments de la chronologie pour plus de clarté et de cohérence. | | **Est joint** | Choisissez si les éléments de la chronologie sont visuellement reliés par une ligne ou un chemin. | | **Fermé** | Activez ou désactivez le caractère fermé ou ouvert de la chronologie. | | **Repliable** | Permettez aux sections de la chronologie d’être repliables, afin d’améliorer l’interaction utilisateur. | | **Recherchable** | Autorisez les utilisateurs à effectuer des recherches dans la chronologie pour trouver des éléments ou des événements spécifiques. | | **Afficher la pagination** | Mettez en place une pagination pour les chronologies comportant un grand nombre d’éléments. | | **Nombre maximal d’éléments visibles** | Définissez le nombre maximal d’éléments à afficher avant le déclenchement de la pagination. | | {% endtab %} | | {% tab title="Interactivité et personnalisation" %} | Nom | Description | | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Actions de l’en-tête** | Ajoutez des boutons d’action dans l’en-tête de la chronologie pour les commandes et interactions de l’utilisateur. | | **Actions sur les éléments** | Mettez en place des boutons d’action au niveau des éléments pour des fonctionnalités spécifiques. | | **Attributs des champs** | Configurez l’affichage des champs dans les éléments de la chronologie, y compris le nombre de colonnes et les variantes de présentation des champs. | | **Options de filtrage** | Incluez 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** | Personnalisez la fonctionnalité de recherche avec un texte de remplacement et des paramètres de position. | | **Options de pagination** | Ajustez l’alignement et personnalisez les libellés et les icônes des contrôles de pagination « premier », « dernier » et « suivant ». | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | | {% endtabs %} | | ## Paramètres de style {% tabs %} {% tab title="En-tête" %} | Nom | Description | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------ | | **Couleur d’arrière-plan** | Définit la couleur de l’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 exemple : solide, 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 joint)** | 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 joint)** | Ajuste l’épaisseur de la bordure inférieure lorsque les éléments sont reliés. | | **Style de la bordure inférieure (si joint)** | Choisit le style de la bordure inférieure pour les éléments reliés. | | **Marge intérieure (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 exemple : 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 de l’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 exemple : 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 dans les 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-timeline.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.