# 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.

{% hint style="info" %}
Les composants d’expérience de données prêts pour la réactivité sont : le [Tableau de données](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tableau-de-donnees), [Liste](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-liste), [Carte](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-carte-1), [Chronologie](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-chronologie) et le bloc de texte Avonni.
{% endhint %}

### É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`.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FA1azYErbZk0m8nAPimi8%2F2024-01-29_21-22-15.png?alt=media&#x26;token=54501d17-7c8d-4c6b-b1b4-6a71168b8076" alt=""><figcaption></figcaption></figure>

### É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 `accountsDatatable`Par exemple, pour afficher le nom du contact associé au compte sélectionné, utilisez `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FrtipSKqwjQ5pxwb9xqpg%2F2024-01-29_21-37-28.png?alt=media&#x26;token=c4256efa-998c-437d-99fd-4152cc464312" alt=""><figcaption></figcaption></figure>

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.&#x20;

Bonne création !