Guide de mise en œuvre

Guide de mise en œuvre de la réactivité dans les composants Avonni

Transformez vos composants Avonni en une expérience dynamique et interactive grâce à notre guide de configuration des composants de données réactifs. Ce tutoriel vous guidera à travers le processus, en veillant à ce que vos composants affichent des données et réagissent aux interactions des utilisateurs 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 : attribution de noms d’API à vos composants de données

Commencez par attribuer à 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 le nommer accountsDatatable.

Étape 2 : configuration d’expressions réactives dans les composants cibles

Ensuite, déterminez 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 filtre.

• Le format d’expression réactive: utilisez le format {{componentApiName.selectedRecord.componentFieldApiName}} pour relier vos composants.

  • componentApiName: c’est ici que vous indiquez 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 d’activité).
• Par exemple:

  • Pour afficher le champ « Name » d’un enregistrement sélectionné dans votre accountsDatatable, utilisez {{accountsDatatable.selectedRecord.Name}}.
  • Pour afficher le champ « Industry » 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 nommé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é s’affiche dynamiquement en fonction de l’interaction de l’utilisateur.
2. Tableaux de données synchronisés pour les comptes et les contacts:

   • Imaginez que vous ayez un tableau affichant les comptes (accountsDatatable)contactsDatatable).
   • Vous pouvez configurer le contactsDatatable pour réagir aux sélections dans le accountsDatatable. Par exemple, pour afficher le nom du contact associé au compte sélectionné, utilisez {{accountsTable.selectedRecord.Id}}.

Ces étapes transformeront 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 sa capacité à faire en sorte que chaque interaction sur votre site paraisse connectée et porteuse de sens.

Bon développement !