> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md).

# 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 s’actualisent instantanément pour afficher des informations connexes, créant ainsi une expérience fluide et interactive.

{% hint style="success" %}

## Composants clés

Les composants réactifs sont :

* [AX - Tableau de données](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md)
* [AX - ](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md)[Carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map.md)
* [AX - ](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md)[Liste](/experience-cloud/experience-cloud-fr/experience-components/ax-list.md)
* [AX - ](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md)[Chronologie](/experience-cloud/experience-cloud-fr/experience-components/ax-timeline.md)
* [AX - ](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md)[Bloc de texte](/experience-cloud/experience-cloud-fr/experience-components/ax-text-block.md)
  {% 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 mettre automatiquement à jour un AX - Carte pour afficher l’emplacement de cet enregistrement, ou filtrer une AX - Chronologie pour afficher les activités associées, le tout sans actualisation de page ni navigation.

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

***

## Cas d'utilisation pratiques

### Détails de compte dynamiques avec des 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 une manière intuitive d’explorer les données.

<figure><img src="/files/5120acfa0b544940e2519c1d6b636a4ae85fdcc0" alt=""><figcaption></figcaption></figure>

### Tableaux de données interconnectés

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

<figure><img src="/files/a6a92beea2f15bb8f2b4d43fa105c2b1072d5aa3" alt=""><figcaption></figcaption></figure>

***

## Pourquoi les composants réactifs sont importants

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

***

## **Configuration de vos composants Avonni réactifs**

Intégrez ces composants réactifs à votre Experience Site grâce à 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 reliant ses données à celles d’autres composants, ce qui permet des mises à jour automatiques en fonction des actions de l’utilisateur. Cela se fait en deux étapes simples

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

{% stepper %}
{% step %}

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

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

{% step %}

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

* Indiquez 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 : texte`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Détail :**
  * `componentApiName`: Le surnom que vous avez attribué (par ex., `accountsDatatable`).
  * `selectedRecord`: La ligne ou l’élément sélectionné par l’utilisateur.
  * `componentFieldApiName`: Le champ spécifique à afficher (par ex., `Nom`, `Secteur`).
* *Pourquoi cela ?* Cette syntaxe relie les données sélectionnées (par ex., celles d’un compte `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 possède un identifiant unique `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 s’il s’agit d’ensembles 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 le problème persiste</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="/pages/a6da40dd7d8a3a1052c77553240b1acf45d10f68"><strong>Liaison d’un tableau de données et d’une carte pour des emplacements dynamiques</strong></a></td><td>Apprenez à connecter un tableau de données et une carte Avonni dans Experience Site afin d’afficher dynamiquement des emplacements en fonction des comptes sélectionnés par l’utilisateur.</td><td><a href="/files/a88612bee06b70589e2060b937d14b9d9330b94f">/files/a88612bee06b70589e2060b937d14b9d9330b94f</a></td></tr><tr><td><a href="/pages/a2bada4c0d3a0b32a35da201e10a981fbd6c5dd6"><strong>Tableaux de données liés</strong></a></td><td>Découvrez comment lier un tableau de données Avonni pour les comptes à un tableau des contacts, en mettant à jour dynamiquement le tableau des contacts pour n’afficher que les contacts du compte sélectionné</td><td><a href="/files/02d91555522e02d11944d39f52c4361685daf9a1">/files/02d91555522e02d11944d39f52c4361685daf9a1</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/premiers-pas/reactive-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.