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

# Guide to Implementing

## **Guide to Implementing Reactivity in Avonni Components**

Transform your Avonni components into a dynamic and interactive experience with our guide on setting up reactive data components. This tutorial will walk you through the process, ensuring that your components display data and respond to user interactions in real-time.

{% hint style="info" %}
Reactive-Ready Data Experience Components are: the [Data Table](/experience-cloud/experience-components/ax-data-table.md), [List](/experience-cloud/experience-components/ax-list.md), [Map](/experience-cloud/experience-components/ax-map.md), [Timeline](/experience-cloud/experience-components/ax-timeline.md) and the Avonni Text Block.
{% endhint %}

### Step 1: Assigning API Names to Your Data Components

Start by giving each of your data components a unique identifier, known as an API name. This name acts as a reference point, allowing different parts of your page to communicate.

* **For Example**:
  * If you're working with a Data Table component, you can name it `accountsDatatable`.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-22bedd057f10ccf976296f165ee5a175c8938e16%2F2024-01-29_21-22-15.png?alt=media" alt=""><figcaption></figcaption></figure>

### Step 2: Configuring Reactive Expressions in Target Components

Next, decide where you want the interactive data to appear. This could be within a Text Block, another Data Table, or any component displaying data. Here, you'll use reactive expressions to instruct the component on what data to show and when in the filter menu.

* **The Reactive Expression Format**: Use the format `{{componentApiName.selectedRecord.componentFieldApiName}}` to link your components.
  * `componentApiName`: This is where you put the API name of your data component (like the `accountsDatatable` you named above).
  * `componentFieldApiName`: This refers to the specific field from the record you want to display (for instance, `Name` or `Industry`).
* **For Example**:
  * To show the 'Name' field of a record selected from your `accountsDatatable`, use `{{accountsDatatable.selectedRecord.Name}}`.
  * To display the 'Industry' field from the same selection, use `{{accountsDatatable.selectedRecord.Industry}}`.

### Practical Use Cases:

1. **Interactive Maps for Account Visualization**:
   * Suppose you have an interactive map tagged as `accountMap`. When a user selects a location, you can display the Account Name in a Text Block by using an expression like `{{accountMap.selectedRecord.Name}}`. This ensures the selected account's name appears dynamically based on user interaction.
2. **Synchronized Data Tables for Accounts and Contacts**:
   * Imagine you have one table showing accounts (`accountsDatatable`) and another showing related contacts (`contactsDatatable`).
   * You can configure the `contactsDatatable` to react to selections in the `accountsDatatable`. For instance, to display the contact name associated with the selected account, use `{{accountsTable.selectedRecord.Id}}`.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-cef3192c393b5583c5c773218458381ccce14064%2F2024-01-29_21-37-28.png?alt=media" alt=""><figcaption></figcaption></figure>

These steps will turn your static components into a rich, responsive experience, making your web applications more intuitive and user-friendly. The power of reactive data lies in its ability to make every interaction on your site feel connected and purposeful.

Happy Building!


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/tutorials/reactive-components/guide-to-implementing.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.