> 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/tutoriels/reactive-components/guide-to-implementing.md).

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

{% hint style="info" %}
Les composants d’expérience de données prêts pour la réactivité sont : le [Tableau de données](/experience-cloud/experience-cloud-fr/experience-components/ax-data-table.md), [Liste](/experience-cloud/experience-cloud-fr/experience-components/ax-list.md), [Carte](/experience-cloud/experience-cloud-fr/experience-components/ax-map.md), [Chronologie](/experience-cloud/experience-cloud-fr/experience-components/ax-timeline.md) et le bloc de texte Avonni.
{% endhint %}

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

<figure><img src="/files/68012fc501ad44aa78c05f1ba76e5d7b2df9e24b" alt=""><figcaption></figcaption></figure>

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

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

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 !


---

# 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/tutoriels/reactive-components/guide-to-implementing.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.