Guide de mise en œuvre

Guide pour implémenter la réactivité dans les composants Avonni

Transformez vos composants Avonni en une expérience dynamique et interactive avec notre guide sur la mise en place de composants de données réactifs. Ce didacticiel vous guidera tout au long du processus, en veillant à ce que vos composants affichent les données et répondent aux interactions de l’utilisateur en temps réel.

Les composants d’expérience de données prêts pour la réactivité sont : le Tableau de données, Liste, Carte, Chronologie et le bloc de texte Avonni.

Étape 1 : Attribuer des noms d’API à vos composants de données

Commencez par donner à chacun de vos composants de données un identifiant unique, appelé nom d’API. Ce nom sert de point de référence, permettant aux différentes parties de votre page de communiquer.

• Par exemple:

  • Si vous travaillez avec un composant Tableau de données, vous pouvez l’appeler accountsDatatable.

Étape 2 : Configurer des expressions réactives dans les composants cibles

Ensuite, décidez où vous souhaitez que les données interactives apparaissent. Cela peut être dans un bloc de texte, un autre tableau de données ou tout composant affichant des données. Ici, vous utiliserez des expressions réactives pour indiquer au composant quelles données afficher et quand, dans le menu de filtrage.

• Le format de l’expression réactive: Utilisez le format {{componentApiName.selectedRecord.componentFieldApiName}} pour lier vos composants.

  • componentApiName: C’est ici que vous mettez le nom d’API de votre composant de données (comme le accountsDatatable que vous avez nommé ci‑dessus).

  • componentFieldApiName: Cela fait référence au champ spécifique de l’enregistrement que vous souhaitez afficher (par exemple, Nom ou Secteur).

• Par exemple:

  • Pour afficher le champ « Nom » d’un enregistrement sélectionné depuis votre accountsDatatable, utilisez {{accountsDatatable.selectedRecord.Name}}.

  • Pour afficher le champ « Secteur » de la même sélection, utilisez {{accountsDatatable.selectedRecord.Industry}}.

Cas d’utilisation pratiques :

1. Cartes interactives pour la visualisation des comptes:

   • Supposons que vous ayez une carte interactive étiquetée accountMap. Lorsqu’un utilisateur sélectionne un emplacement, vous pouvez afficher le nom du compte dans un bloc de texte en utilisant une expression comme {{accountMap.selectedRecord.Name}}. Cela garantit que le nom du compte sélectionné apparaît dynamiquement en fonction de l’interaction de l’utilisateur.

2. Tableaux de données synchronisés pour comptes et contacts:

   • Imaginez que vous avez un tableau affichant les comptes (accountsDatatable) et un autre affichant les contacts associés (contactsDatatable).

   • Vous pouvez configurer le contactsDatatable pour réagir aux sélections dans le accountsDatatablePar exemple, pour afficher le nom du contact associé au compte sélectionné, utilisez {{accountsTable.selectedRecord.Id}}.

Ces étapes convertiront vos composants statiques en une expérience riche et réactive, rendant vos applications web plus intuitives et conviviales. La puissance des données réactives réside dans leur capacité à rendre chaque interaction sur votre site connectée et significative.

Bonne création !