> 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 site Experience. Lorsqu’un utilisateur clique sur quelque chose ou le sélectionne dans un composant, les autres composants connectés se rafraîchissent instantanément pour afficher les informations associées, 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 automatiquement mettre à 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 la 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 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 site Experience de réagir et de communiquer entre les éléments, le rendant plus dynamique et plus convivial. Cette interactivité aide les visiteurs à découvrir et à accéder efficacement aux informations, offrant ainsi une expérience plus engageante et productive.

***

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

Intégrez ces composants réactifs à votre site Experience 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 un surnom unique à chaque composant dans le panneau Propriétés. Par exemple, nommez un tableau de données qui répertorie les comptes accountsDatatable.
* *Pourquoi cela ?* Le surnom identifie le composant pour la réactivité, permettant aux autres composants de faire référence à ses données
  {% endstep %}

{% step %}

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

* Précisez quels composants doivent être mis à 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 que l’utilisateur sélectionne.
  * `componentFieldApiName`: Le champ spécifique à afficher (par ex., `Nom`, `Secteur d’activité`).
* *Pourquoi cela ?* Cette syntaxe relie 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 possède 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>Retard de réactivité</strong></summary>

Vérifiez les 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 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="/pages/a6da40dd7d8a3a1052c77553240b1acf45d10f68"><strong>Lier un tableau de données et une carte pour des emplacements dynamiques</strong></a></td><td>Apprenez à connecter un tableau de données Avonni et une carte dans un site Experience afin d’afficher dynamiquement les 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:

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

The question should be specific, self-contained, and written in natural language.
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.