Chronologie

Le composant Chronologie transforme des listes d’événements en chronologies visuelles interactives pour une meilleure compréhension des données chronologiques.

Configurer votre chronologie

1. Configurer la source de données

Avant que votre chronologie puisse afficher des informations, vous devez lui indiquer où obtenir les données. Le composant Avonni Timeline offre des options de sources de données flexibles pour se connecter à différentes sources.

2. Intégrer les mappings de données (pour les sources Variable et Query)

Lorsque vous utilisez une source de données Variable ou Query avec le composant Timeline, vous devez mapper les champs de votre source de données aux attributs de la Timeline. Considérez les mappings de données comme les « instructions » qui indiquent au composant Timeline quelle les champs contiennent la date de début, la date de fin, le titre, la description, etc., pour chaque élément de la chronologie.

Exemple (Opportunités) :

Si votre source de données récupère Opportunité enregistrements avec des champs tels que Name, Description__c, et CloseDate, vous mapperiez :

• Titre : Name

• Description : Description__c

• Date de début : CloseDate

Cela indique à la Timeline d'utiliser le Nom de l'Opportunity pour le titre de l'élément, le champ de description personnalisé et la Date de clôture pour la date de début.

3. Choisir l'orientation de la chronologie

Orientation	Description	Illustration
Horizontale	Les événements sont affichés de gauche à droite. Elle est idéale pour présenter des événements sur une période plus longue.
Verticale	Les événements sont empilés verticalement. Elle convient pour mettre en évidence l'ordre chronologique ou lorsque l'espace est limité.

4. Configurer le tri et le regroupement (pour les chronologies verticales)

Pour les chronologies verticales, vous pouvez organiser les événements en utilisant ces paramètres :

• Direction de tri : Choisissez Ascendant (du plus ancien au plus récent) ou Descendant (du plus récent au plus ancien) pour contrôler l'ordre des événements.

• Grouper par : Regroupez les événements par intervalles de temps : Aucun, Jour, Semaine, Mois, ou Année. Cela crée des sections visuelles au sein de la chronologie, facilitant la navigation.

5. Afficher et personnaliser des champs supplémentaires

Affichez des champs supplémentaires de votre source de données dans chaque élément de la chronologie et personnalisez leur apparence.

Ajout de champs :

• Trouvez la section « Fields » ou « Item Fields » dans les propriétés du composant Timeline.

• Ajoutez les champs souhaités depuis votre source de données.

Personnalisation de l'affichage des champs : Mise en page des champs

Utilisez le Mise en page des champs paramètres pour organiser et styliser les champs supplémentaires au sein de chaque élément de la chronologie.

Paramètres clés :

• Nombre de colonnes : Définit la mise en page globale de la grille au sein de chaque élément (par ex., 1, 2, 3 colonnes). Ceci concerne la taille d'écran par défaut/très petite.

• Nombre de colonnes Conteneur Petit/Moyen/Grand : Définissez le nombre de colonnes en fonction des tailles d'écran.

• Variante : Contrôle le style visuel global de l'affichage des champs (les options peuvent varier).

Personnalisation individuelle des champs : depuis le panneau Style, vous pouvez personnaliser le style des Item Fields.

6. Ajouter des actions aux éléments

Ajoutez des boutons interactifs à chaque élément de la chronologie en utilisant les paramètres « Item Actions ». Ces actions permettent aux utilisateurs d'interagir avec les données pour cet élément spécifique.

Pour ajouter et configurer des actions :

1. Trouvez la section « Item Actions » dans les propriétés du composant Timeline.

2. Ajoutez une nouvelle action.

3. Définissez Étiquette et Nom de l'icône (optionnel).

4. Ajoutez une interaction à l'action depuis le onglet Interactions (« On Item Action Click »).

5. Choisissez un Type d'action (Naviguer, Exécuter un Flow, etc.) et configurez-le, en utilisant les données de l'élément de chronologie courant si nécessaire (en référant aux champs mappés dans vos Data Mappings)

7. Configurer les options de filtrage

Ajoutez des filtres à votre Avonni Timeline pour permettre aux utilisateurs de restreindre les événements affichés.

Pour activer le filtrage :

1. Sélectionnez le composant Timeline.

2. Trouvez l'attribut « Filters » dans le panneau Propriétés sous la section Data Mappings

3. Choisissez quels champs de votre source de données doivent être filtrables.

4. Définissez les types de filtres et personnalisez.

La Timeline affichera une interface de filtrage, et les utilisateurs pourront ensuite sélectionner des critères pour filtrer les événements. La chronologie est filtrable par défaut.

Personnaliser le composant Timeline

Une fois que vous avez connecté vos données et configuré le filtrage/les actions d'élément, vous pouvez personnaliser l'apparence et le comportement du composant Avonni Timeline en utilisant ses propriétés.

Propriétés de l'en-tête

L'en-tête apparaît au-dessus la chronologie elle-même et fournit un contexte et des actions globales.

• Titre : (Texte) Saisissez le titre principal de votre chronologie (par ex., « Project Timeline », « Opportunity History »). Il est affiché de manière proéminente dans l'en-tête.

• Légende : (Texte, optionnel) Une description courte ou un sous-titre affiché sous le titre. Utilisez-le pour fournir un contexte supplémentaire.

• Nom de l'icône : (Texte, optionnel) Le nom d'une icône Avonni ou SLDS à afficher dans l'en-tête (par ex., utility:date_time, standard:event).

• Actions : (Actions, optionnel) Ajoutez boutons à l'en-tête pour fournir des actions globales liées à la entière chronologie (pas aux événements individuels). Exemples :

  • Bouton « Actualiser les données » : Actualise la source de données de la chronologie.

  • Bouton « Exporter les données » : Permet aux utilisateurs d'exporter les données de la chronologie.

  • Bouton « Ajouter un événement » : Pourrait ouvrir une fenêtre modale ou naviguer vers une page pour créer un nouveau événement (mais il s'agirait d'une action générale « ajouter », non liée à un créneau temporel spécifique comme la création par glisser).

  • Ces actions d'en-tête utilisent le système Avonni standard Interactions (On Click, etc.).

• Joint : (Booléen - Case à cocher) Contrôle si l'en-tête est visuellement connecté au contenu de la chronologie ou apparaît comme un élément séparé au-dessus de celle-ci.

Propriétés d'interaction

Ces propriétés définissent la façon dont la chronologie répond aux interactions des utilisateurs avec les éléments de la chronologie eux-mêmes (pas aux actions de l'en-tête).

• Au clic sur un élément : Définissez une interaction qui se déclenche lorsque l'utilisateur clique sur un élément de la chronologie (un événement). Vous pouvez utiliser les données de l'élément cliqué dans l'interaction. Actions courantes :

  • Naviguer : Aller à la page de détail de l'enregistrement représenté par l'élément cliqué. Vous utiliseriez généralement la valeur Item Name (que vous avez mappée à l'ID de l'enregistrement) dans l'action Naviguer.

  • Afficher un Toast : Afficher un message.

  • .). Lancer un Flow, en passant les données de l'élément cliqué comme variables d'entrée.

  • Ouvrir une boîte de dialogue/panneau Flow : Lancer un Screen Flow.

  • Mettre à jour un enregistrement : Mettre à jour l'enregistrement