> 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 ## Vue d'ensemble **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 des dates, comme l’historique de leurs dossiers, la chronologie des commandes, les jalons d’un projet ou tout autre enregistrement horodaté. Les utilisateurs peuvent rechercher et filtrer les entrées, ouvrir un enregistrement à partir d’un élément (avec une **Au clic** interaction sur les éléments) et voir les événements organisés par périodes. Récupérez des données depuis n’importe quel objet standard ou personnalisé avec des champs de date. Idéal pour les flux d’activité, les historiques de dossiers, le 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.

Une chronologie verticale regroupée par mois, la plus récente en premier. Les deux éléments les plus récents sont ouverts sur leurs champs, affichés en deux colonnes.

{% hint style="success" %} La chronologie Avonni est [prête pour la réactivité](/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md) {% endhint %} {% hint style="info" %} **Découvrez-la dans un projet réel** [Suivre mon installation](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/track-my-installation): Un suivi d’installation sur un portail client, regroupé par mois. {% endhint %} ## Configuration ### Éléments La **Éléments** propriété contient les entrées de la chronologie. Choisissez leur origine : | Nom | Description | | ----------- | -------------------------------------------------------------------------------------------------------- | | **Manuel** | Saisissez manuellement les éléments de la chronologie et leurs détails. | | **Requête** | Utilisez une requête pour renseigner automatiquement la chronologie avec des enregistrements Salesforce. | Chaque élément est construit à partir des mêmes paramètres. En mode **Manuel** manuel, vous les renseignez pour chaque élément ; en mode **Requête** requête, vous mappez chacun d’eux sur un champ de l’objet interrogé. | Paramètre | Ce qu’il fait | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Titre** | L’en-tête de l’élément. | | **Description** | Le texte sous le titre. | | **Avatar** | L’icône de l’élément : **Initiales**, **Nom de l’icône**, **Image**et un **Type de présence**. | | **Date** | Obligatoire. Place l’élément sur la chronologie. En mode Requête, il trie également la requête, dans la **Direction du tri**. | | **Est actif** | Marque l’élément comme étant l’élément courant. | | **A une case à cocher** | Ajoute une case à cocher à l’élément. | | **Champs** | Paires libellé/valeur, affichées lorsque l’utilisateur ouvre l’élément. **Attributs des champs** définit leur mise en page. | | **Nom** / **Champ clé** | L’identifiant unique de l’élément (Manuel : **Nom**; Requête : **Champ clé**, `{{Record.Id}}` par défaut). | | **Filtres** | Mode Requête uniquement. Les champs sur lesquels les utilisateurs peuvent filtrer, voir **Attributs du menu de filtre**. | | **Champs de recherche** | Mode Requête uniquement. Les champs dans lesquels la zone de recherche effectue la recherche. Nécessite **Recherchable**. | | **Au clic** | Ce qui se produit lorsqu’un utilisateur clique sur l’élément, par exemple la navigation vers l’enregistrement. Sans cela, un élément n’est pas cliquable. | ### Configuration de base **Titre** est le titre principal de la chronologie, et **Légende** est une brève description ou un texte supplémentaire en dessous. **Style du texte du titre** et **Style du texte de la légende** définissent la typographie de chacun : `Titre 1` sur `Titre 4`, ou `Paragraphe 1` / `Paragraphe 2`. ### Éléments visuels et fonctionnels | Paramètre | Ce qu’il fait | | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Nom de l’API** | Un identifiant unique utilisé pour référencer le composant. | | **Nom de l’icône** | Une icône du Salesforce Lightning Design System affichée à côté du titre de la chronologie. L’icône propre à chaque élément est définie sur l’élément, sous **Avatar**. | | **Taille de l’icône** | La taille de cette icône d’en-tête : `Xxs`, `Xs`, `Petit`, `Moyen` (par défaut) ou `Grand`. | | **Taille de l’icône de l’élément** | La taille des icônes par élément : `Xxs`, `Xs`, `Petit` (par défaut), `Moyen` ou `Grand`. | | **Orientation** | `Verticale` (par défaut) ou `Horizontale` mise en page. | | **Direction du tri** | `Ascendant` ou `Descendant` ordre chronologique (par défaut). | | **Regrouper par** | Regroupe les éléments par `Jour`, `Semaine`, `Mois`, ou `Année`. Laissez-le non défini pour lister les éléments sans regroupement. Les éléments datés après aujourd’hui sont regroupés sous **À venir**. | | **Format de date de l’élément** | La façon dont les dates s’affichent sur les éléments : **Standard**, **Relatif** (par exemple « il y a 2 jours »), **Prédéfini** (un préréglage Luxon, `DATE_MED` par défaut) ou **Personnalisé** (la valeur par défaut, `LLLL dd, yyyy, t`, qui se lit « September 02, 2026, 1:00 PM »). | | **Est joint** | Attache l’en-tête au corps de la chronologie, sans espace entre eux. Sa bordure inférieure est stylée sous **Bordure de l’en-tête**. Désactivé par défaut. | | **Réductible** | Permet aux utilisateurs de replier chaque groupe. Nécessite **Regrouper par**. Désactivé par défaut. | | **Fermé** | Commence ces groupes repliés. Nécessite **Réductible**. Désactivé par défaut. | | **Recherchable** | Ajoute une zone de recherche. En mode Manuel, elle recherche dans le titre et la description des éléments ; en mode Requête, elle recherche dans les champs listés sous **Champs de recherche** dans le mappage des éléments. Désactivé par défaut. | | **Afficher la pagination** | Divise les éléments en pages, avec **Nombre maximal d’éléments visibles** comme taille de page (20 si vide). | | **Nombre maximal d’éléments visibles** | Avec **Afficher la pagination** activé, la taille de page. Avec l’option désactivée, la chronologie verticale affiche autant d’éléments, puis un bouton **Afficher plus** . | | **Surlignage au clic** | Met visuellement en surbrillance un élément lorsqu’il est cliqué. | {% hint style="info" %} Le regroupement, les groupes réductibles, les actions sur les éléments, la taille des icônes des éléments, le surlignage au clic et le **Afficher plus** bouton s’appliquent uniquement à l’orientation verticale. {% endhint %}

Les mêmes éléments avec l’orientation définie sur Horizontale. La bande supérieure affiche une fenêtre de 15 jours ; la bande en dessous couvre tous les éléments, et les utilisateurs font glisser la fenêtre mise en surbrillance le long de celle-ci.

### Interactivité et personnalisation **Actions de l’en-tête** ajoutent des boutons d’action dans l’en-tête de la chronologie. Chaque action a un **Libellé**, un **Nom**, une **Nom de l’icône**, un **Titre**, **Texte alternatif** et une **Au clic** interaction. **Boutons d’action visibles** définit combien d’actions d’en-tête s’affichent sous forme de boutons avant que les autres ne soient déplacées dans un menu. **Actions de l’élément** ajoutent des boutons d’action au niveau de l’élément (orientation verticale uniquement). **Attributs des champs** définissent la mise en page de chaque **Champs**: * **Nombre de colonnes**: 1 par défaut. S’applique aux conteneurs plus étroits que 480 px, et chaque fois qu’aucune valeur spécifique à la taille n’est définie. * **Petit**, **Moyen** et **Colonnes du grand conteneur**: le nombre de colonnes pour chaque taille de conteneur. * **Variante**: `Standard` (par défaut), `Libellé masqué`, `Libellé en ligne` ou `Libellé empilé`. **Attributs du menu de filtre** définissent la présentation des filtres. Les filtres existent uniquement en mode Requête : choisissez d’abord les **Filtres** champs dans le mappage des éléments. **Type** les place `Horizontale` (par défaut), dans un `Popover`, ou dans un `Panneau`, et **Ordre de tri des listes de sélection**, **Utiliser les valeurs de liste de sélection de l’enregistrement** et **Utiliser les valeurs de filtre en cascade** contrôlent la façon dont les options de liste de sélection sont affichées. Chaque filtre comporte également un opérateur, choisi dans un menu en haut du filtre. Les filtres de texte, de liste de sélection, de liste de sélection à sélection multiple et de recherche proposent `Égal à` (par défaut), `Différent de`, `Vide` et `Non vide`. Les filtres numériques, de date et d’heure proposent `Entre` (par défaut), `Pas entre`, `Égal à`, `Différent de`, `Inférieur à`, `Inférieur ou égal à`, `Supérieur à`, `Supérieur ou égal à`, `Vide` et `Non vide`. `Vide` et `Non vide` ne prennent aucune valeur, donc les entrées du filtre sont masquées lorsque l’un ou l’autre est sélectionné. Les filtres à case à cocher n’ont pas de menu d’opérateurs. **Attributs du moteur de recherche** personnalisez la zone de recherche : son **Texte indicatif** (`Rechercher` par défaut) et sa **Position**, `Gauche` (par défaut), `Droite`, `Centre` ou `Remplir`. **Attributs de pagination** définissent les libellés et les icônes des boutons **Premier**, **Précédent**, **Suivant** et **Dernier** et leur alignement : `Gauche` (par défaut), `Centre` ou `Droite`. **Message d’absence de résultats** remplace l’état vide par défaut par votre propre texte lorsqu’aucun élément ne correspond à la recherche ou aux filtres — ou lorsque la source de données ne renvoie rien du tout. **Attributs du message d’absence de résultats** contrôlent ce que cet état vide affiche : **Masquer l’image d’absence de résultats** supprime l’illustration et **Masquer le message d’absence de résultats** supprime le texte. Les deux sont désactivés par défaut. ## Style Personnalisez l’apparence de la chronologie depuis la section **Style** de l’éditeur de propriétés. {% tabs %} {% tab title="Marge" %} Contrôle l’espacement externe autour de la chronologie. {% endtab %} {% tab title="Rembourrage" %} Contrôle l’espacement interne de la chronologie. {% endtab %} {% tab title="Taille" %} Contrôle les dimensions de la chronologie (Largeur / Hauteur / Débordement). {% endtab %} {% tab title="Bordure" %} Contrôle la bordure autour de la chronologie (Couleur / Taille / Style / Rayon). {% endtab %} {% 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. | | **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="Bordure de l’en-tête" %} | Nom | Description | | ------------------------------------------------ | ------------------------------------------------------------------------------------------- | | **Couleur de bordure** | Détermine la couleur de la bordure de l’en-tête. | | **Taille de 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. 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 (Est joint)** | Lorsque **Est joint** est activé, définit la couleur de la bordure inférieure de l’en-tête. | | **Taille de la bordure inférieure (Est joint)** | Ajuste l’épaisseur de cette bordure inférieure lorsque **Est joint** est activé. | | **Style de la bordure inférieure (Est joint)** | Choisit le style de cette bordure inférieure lorsque **Est joint** est activé. | | {% endtab %} | | {% tab title="Titre de l’en-tête" %} | Nom | Description | | --------------------- | ------------------------------------------------------------------------ | | **Couleur** | Modifie la couleur du texte du titre. | | **Taille de police** | Ajuste la taille du texte du titre. | | **Graisse de police** | Modifie le niveau de gras ou l’épaisseur du texte du titre. | | **Style de police** | Applique une mise en forme (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 niveau de gras ou l’épaisseur du texte de la légende. | | **Style de police** | Applique une mise en forme au texte de la légende | | {% endtab %} | | {% tab title="Avatar de l’en-tête" %} | Nom | Description | | --------------------------- | ----------------------------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur d’arrière-plan de l’avatar de l’en-tête. | | **Couleur de premier plan** | Définit la couleur du contenu de l’avatar (son icône ou ses initiales). | | **Rayon de bordure** | Arrondit les coins de l’avatar pour un aspect plus doux. | | {% endtab %} | | {% tab title="Élément" %} | Nom | Description | | ------------------------------------- | --------------------------------------------------------------------------------- | | **Limite de lignes** | Limite la description d’un élément à un nombre défini de lignes avant troncature. | | **Couleur d’arrière-plan de l’icône** | Définit la couleur d’arrière-plan de l’icône par élément. | | {% endtab %} | | {% tab title="Corps de l’élément" %} | Nom | Description | | ------------------------------------------ | ----------------------------------------------------------------------------------- | | **Couleur d’arrière-plan au survol** | Couleur d’arrière-plan d’un élément lorsque le pointeur est au-dessus. | | **Couleur d’arrière-plan en surbrillance** | Couleur d’arrière-plan d’un élément mis en surbrillance par **Surlignage au clic**. | | {% endtab %} | | {% tab title="Champs de l’élément" %} | Nom | Description | | -------------------------- | -------------------------------------------------------------------- | | **Espacement en ligne** | Espacement horizontal entre les champs à l’intérieur d’un élément. | | **Espacement en bloc** | Espacement vertical entre les champs à l’intérieur d’un élément. | | **Couleur d’arrière-plan** | Définit la couleur d’arrière-plan de la zone de champs de l’élément. | | **Couleur de bordure** | Détermine la couleur de la bordure de la zone de champs. | | **Taille de bordure** | Ajuste l’épaisseur de cette bordure. | | **Style de bordure** | Sélectionne le style de cette bordure. | | **Rayon de bordure** | Arrondit les coins de la zone de champs. | | {% endtab %} | | {% tab title="Boutons de pagination" %} | Nom | Description | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Couleur d’arrière-plan** | Modifie la couleur d’arrière-plan des boutons, avec des valeurs distinctes pour Actif, Survol et Désactivé. | | **Couleur du texte/de l’icône** | Ajuste la couleur du texte ou des icônes dans les boutons, avec des valeurs distinctes pour Actif, Survol et Désactivé. | | **Couleur de la bordure** | Définit la couleur de bordure des boutons, avec des valeurs distinctes pour Actif, Survol et Désactivé. | | **Taille / style de bordure** | Définit les propriétés de bordure des boutons de pagination. | | **Bouton actif …** | Les mêmes couleurs d’arrière-plan, de texte/d’icône et de bordure appliquées au bouton de la page actuellement affichée. | | {% endtab %} | | {% tab title="Pied de page" %} | Nom | Description | | -------------------------- | ----------------------------------------------------- | | **Couleur d’arrière-plan** | Définit la couleur de l’arrière-plan du pied de page. | | **Couleur de bordure** | Détermine la couleur de la bordure du pied de page. | | **Taille de bordure** | Ajuste l’épaisseur de la bordure du pied de page. | | **Style de bordure** | Sélectionne le style de la bordure du pied de page. | | **Rayon de bordure** | Arrondit les coins du pied de page. | | {% endtab %} | | {% tab title="Bouton Afficher plus" %} | Nom | Description | | ---------------------------------------- | ----------------------------------------------------------------------------------- | | **Début de bloc / Fin de bloc** | Espacement vertical au-dessus et au-dessous du bouton. | | **Début en ligne / Fin en ligne** | Espacement horizontal avant et après le bouton. | | **Couleur d’arrière-plan** | Couleur d’arrière-plan du bouton, avec des valeurs distinctes pour Actif et Survol. | | **Couleur du texte** | Couleur du texte du bouton, avec des valeurs distinctes pour Actif et Survol. | | **Couleur de bordure** | Couleur de bordure du bouton, avec des valeurs distinctes pour Actif et Survol. | | **Taille de bordure / Rayon de bordure** | Épaisseur et arrondi des coins de la bordure du bouton. | | {% endtab %} | | {% tab title="Dialogue et panneau Flow" %} Style la boîte de dialogue ou le panneau latéral ouvert par un **Ouvrir la boîte de dialogue de flux** ou **Ouvrir le panneau de flux** interaction. | Nom | Description | | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | **En-tête de la boîte de dialogue Flow** | Arrière-plan, bordure inférieure (couleur et taille) et typographie du libellé (couleur, taille de police, graisse de police). | | **Pied de page de la boîte de dialogue Flow** | Arrière-plan et bordure supérieure (couleur et taille). | | **Panneau Flow** | Couleur d’arrière-plan et bordure (couleur, taille, style, rayon) du panneau lui-même. | | **En-tête du panneau Flow** | Arrière-plan, bordure inférieure, typographie du libellé et couleurs de l’icône de fermeture. | | {% 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` 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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.