# Composants réactifs

## Aperçu

Les composants réactifs se mettent automatiquement à jour lorsque les utilisateurs interagissent avec votre Experience Site. Lorsqu'un utilisateur clique ou sélectionne quelque chose dans un composant, les autres composants connectés se rafraîchissent instantanément pour afficher des informations connexes — créant une expérience fluide et interactive.

{% hint style="success" %}

## Composants clés

Les composants réactifs sont :

* [AX - Tableau de données](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tableau-de-donnees)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tableau-de-donnees)[Carte](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-carte-1)
* [AX - ](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)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tableau-de-donnees)[Frise chronologique](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-chronologie)
* [AX - ](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-tableau-de-donnees)[Bloc de texte](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-bloc-de-texte)
  {% endhint %}

### **Comment cela aide**

Les composants réactifs vous permettent de créer des pages interactives où les utilisateurs peuvent explorer les données de manière dynamique. Par exemple, cliquer sur un enregistrement dans AX - Tableau de données peut automatiquement mettre à jour une AX - Carte pour afficher l'emplacement de cet enregistrement, ou filtrer une AX - Frise chronologique pour afficher des activités liées — le tout sans actualisation de la page ni navigation.

Cela crée des expériences de portail plus engageantes où l'information se met à jour instantanément en fonction de ce que les utilisateurs consultent ou sélectionnent

***

## Cas d'utilisation pratiques

### Détails dynamiques des comptes avec cartes

Configurez une carte Avonni pour afficher les emplacements des comptes. Lorsqu'un utilisateur sélectionne un emplacement, les détails du compte associés (par ex. : nom, description, secteur) apparaissent automatiquement dans un bloc de texte Avonni, offrant un moyen intuitif d'explorer les données.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVjhaFMV1pHEy9rtf7kQw%2FAvonni%20Components%204.2%20Jan%2031.webp?alt=media&#x26;token=d1a35dea-24dc-4323-8297-f6d77aa535b0" alt=""><figcaption></figcaption></figure>

### Tableaux de données interconnectés

Configurez un tableau de données Avonni pour lister les comptes. La sélection d'un compte déclenche la mise à jour d'un second tableau de données pour afficher les contacts associés, permettant une navigation fluide dans de grands ensembles de données.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FVvAnrlEXAdP1tcoOxM07%2F2024-02-04_16-43-22%20(1).gif?alt=media&#x26;token=c99e3f73-a58a-4378-bd93-00fdad6152a0" alt=""><figcaption></figcaption></figure>

***

## Pourquoi les composants réactifs sont importants

Les composants réactifs permettent à votre Experience Site de répondre et de communiquer entre les éléments, le rendant plus dynamique et convivial. Cette interactivité aide les visiteurs à découvrir et accéder efficacement aux informations, conduisant à une expérience plus engageante et productive.&#x20;

***

## **Configurer vos composants Avonni réactifs**

Intégrez ces composants réactifs à votre Experience Site avec un processus de configuration simple pour améliorer l'interactivité :

### **Qu'est-ce qui rend un composant « réactif » ?**

Un composant devient réactif en liant ses données à d'autres composants, permettant des mises à jour automatiques basées sur les actions des utilisateurs. Cela s'obtient en deux étapes simples

### Étapes pour activer la réactivité

{% stepper %}
{% step %}

#### Nommez vos composants de données (componentApiName)

* Attribuez un surnom unique à chaque composant dans le panneau des propriétés. Par exemple, nommez un tableau de données listant les comptes accountsDatatable.
* *Pourquoi ceci ?* Le surnom identifie le composant pour la réactivité, permettant aux autres composants de référencer ses données
  {% endstep %}

{% step %}

#### Indiquez aux autres composants comment réagir

* Spécifiez quels composants doivent se mettre à jour lorsqu'un utilisateur interagit avec un autre. Utilisez la syntaxe suivante dans les propriétés du composant cible :`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Décomposition :**
  * `componentApiName`: Le surnom que vous avez attribué (par ex., `accountsDatatable`).
  * `selectedRecord`: La ligne ou l'élément que l'utilisateur sélectionne.
  * `componentFieldApiName`: Le champ spécifique à afficher (par ex., `Nom`, `Secteur`).
* *Pourquoi ceci ?* Cette syntaxe lie les données sélectionnées (par ex., le `Nom`) à un autre composant, déclenchant une mise à jour automatique
  {% endstep %}
  {% endstepper %}

***

## Dépannage des problèmes courants

<details>

<summary><strong>Les composants ne se mettent pas à jour</strong></summary>

Assurez-vous que chaque composant a un `componentApiName` et que la syntaxe (`{{componentApiName.selectedRecord.componentFieldApiName}}`) est correctement saisie dans les propriétés du composant cible.

</details>

<details>

<summary><strong>Aucune donnée affichée</strong></summary>

Vérifiez que le composant source (par ex., `accountsDatatable`) contient des données et que le `componentFieldApiName` correspond à un champ disponible (par ex., `Nom`).

</details>

<details>

<summary><strong>Délai de réactivité</strong></summary>

Vérifiez les jeux de données complexes ; simplifiez les requêtes ou réduisez le nombre de liens réactifs pour améliorer les performances.

</details>

<details>

<summary><strong>Si les problèmes persistent</strong></summary>

Contactez notre équipe d'assistance à <support@avonni.com> pour obtenir de l'aide.

</details>

***

## **Exemples guidés**

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="../tutoriels/composants-reactifs/lier-le-tableau-de-donnees-et-la-carte-pour-des-emplacements-dynamiques"><strong>Lier Tableau de données et Carte pour des emplacements dynamiques</strong></a></td><td>Apprenez à connecter un tableau de données Avonni et une carte dans Experience Site pour afficher dynamiquement des emplacements en fonction des comptes sélectionnés par l'utilisateur.</td><td><a href="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FITT78gjzqT0HViqyTa1s%2FCSV%20Parser%20from%20Figma.png?alt=media&#x26;token=c39267bf-66c3-4ae6-9384-ef5412b6e9a7">CSV Parser from Figma.png</a></td></tr><tr><td><a href="../tutoriels/composants-reactifs/tableaux-de-donnees-lies"><strong>Tableaux de données liés</strong></a></td><td>Découvrez comment relier un tableau de données Avonni pour les comptes à un tableau Contacts, mettant à jour le tableau Contacts dynamiquement pour n'afficher que les contacts du compte sélectionné</td><td><a href="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZK2FJjsLqEUYMVFZyUjV%2FAvonni%20Component%20Builder%20Illustrations%20(4).png?alt=media&#x26;token=c3d6ff5a-5b6e-4294-ac66-37424de04ffc">Avonni Component Builder Illustrations (4).png</a></td></tr></tbody></table>