# 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 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. Extrayez des données de n’importe quel objet standard ou personnalisé comportant des champs de date. Parfait pour les flux d’activité, les historiques de cas, les chronologies de suivi des commandes, les mises à jour de statut de projet, ou partout où les utilisateurs du portail doivent voir « ce qui s’est passé et quand » dans un format déroulable et chronologique. {% hint style="success" %} La chronologie Avonni est [Prête pour le réactif](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/composants-reactifs) {% 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 complémentaire pour la chronologie. | | **Texte du style de la légende** | Ajustez le style de police de la légende pour l’harmoniser avec 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 » en fonction du contenu et des contraintes d’espace. | | **Sens du tri** | Choisissez « asc » pour l’ordre chronologique croissant ou « desc » pour l’ordre décroissant. | | **Grouper par** | Organisez 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** | Formatez l’affichage des dates sur les éléments de la chronologie pour plus de clarté et de cohérence | | **Est relié** | Choisissez si les éléments de la chronologie sont visuellement reliés par une ligne ou un tracé | | **Fermé** | Activez ou désactivez le fait que la chronologie soit fermée ou ouverte | | **Réductible** | Permettez de réduire des sections de la chronologie pour améliorer l’interaction utilisateur | | **Recherchable** | Autorisez les utilisateurs à rechercher des éléments ou événements spécifiques dans la chronologie | | **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 l’activation 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 utilisateur. | | **Actions des é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 du texte indicatif et des paramètres de position | | **Options de pagination** | Ajustez l’alignement et personnalisez les libellés et 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 ex. solide, pointillée, en tirets). | | **Rayon de bordure** | Arrondit les coins de l’en-tête pour un aspect plus doux. | | **Couleur de la bordure inférieure (Est 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 (Est relié)** | Ajuste l’épaisseur de la bordure inférieure lorsque les éléments sont reliés. | | **Style de la bordure inférieure (Est relié)** | 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. | | **Poids de police** | Modifie l’épaisseur ou le gras 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. | | **Poids de police** | Modifie l’épaisseur ou le gras 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 ex. icône ou image). | | **Poids 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 %} | |