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

# Guía para implementar

## **Guía para implementar la reactividad en los componentes Avonni**

Transforma tus componentes Avonni en una experiencia dinámica e interactiva con nuestra guía para configurar componentes de datos reactivos. Este tutorial te guiará a través del proceso, asegurando que tus componentes muestren datos y respondan a las interacciones del usuario en tiempo real.

{% hint style="info" %}
Los componentes de experiencia de datos listos para la reactividad son: el [Tabla de datos](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md), [Lista](/experience-cloud/experience-cloud-es/experience-components/ax-list.md), [Mapa](/experience-cloud/experience-cloud-es/experience-components/ax-map.md), [Cronología](/experience-cloud/experience-cloud-es/experience-components/ax-timeline.md) y el bloque de texto de Avonni.
{% endhint %}

### Paso 1: Asignar nombres API a tus componentes de datos

Comienza dando a cada uno de tus componentes de datos un identificador único, conocido como nombre API. Este nombre actúa como punto de referencia y permite que distintas partes de tu página se comuniquen.

* **Por ejemplo**:
  * Si estás trabajando con un componente de tabla de datos, puedes nombrarlo `accountsDatatable`.

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

### Paso 2: Configurar expresiones reactivas en los componentes de destino

A continuación, decide dónde quieres que aparezcan los datos interactivos. Esto podría ser dentro de un Bloque de texto, otra Tabla de datos o cualquier componente que muestre datos. Aquí usarás expresiones reactivas para indicarle al componente qué datos mostrar y cuándo en el menú de filtros.

* **El formato de la expresión reactiva**: Usa el formato `{{componentApiName.selectedRecord.componentFieldApiName}}` para vincular tus componentes.
  * `componentApiName`: Aquí es donde colocas el nombre API de tu componente de datos (como el `accountsDatatable` que nombraste arriba).
  * `componentFieldApiName`: Esto se refiere al campo específico del registro que quieres mostrar (por ejemplo, `Nombre` o `Sector`).
* **Por ejemplo**:
  * Para mostrar el campo 'Name' de un registro seleccionado de tu `accountsDatatable`, usa `{{accountsDatatable.selectedRecord.Name}}`.
  * Para mostrar el campo 'Industry' de la misma selección, usa `{{accountsDatatable.selectedRecord.Industry}}`.

### Casos de uso prácticos:

1. **Mapas interactivos para la visualización de cuentas**:
   * Supón que tienes un mapa interactivo etiquetado como `accountMap`. Cuando un usuario selecciona una ubicación, puedes mostrar el nombre de la cuenta en un Bloque de texto usando una expresión como `{{accountMap.selectedRecord.Name}}`. Esto garantiza que el nombre de la cuenta seleccionada aparezca dinámicamente en función de la interacción del usuario.
2. **Tablas de datos sincronizadas para cuentas y contactos**:
   * Imagina que tienes una tabla que muestra cuentas (`accountsDatatable`) y otra que muestra contactos relacionados (`contactsDatatable`).
   * Puedes configurar el `contactsDatatable` para que reaccione a las selecciones en el `accountsDatatable`. Por ejemplo, para mostrar el nombre del contacto asociado con la cuenta seleccionada, usa `{{accountsTable.selectedRecord.Id}}`.

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

Estos pasos convertirán tus componentes estáticos en una experiencia rica y receptiva, haciendo que tus aplicaciones web sean más intuitivas y fáciles de usar. El poder de los datos reactivos reside en su capacidad para hacer que cada interacción en tu sitio se sienta conectada y con propósito.

¡Feliz desarrollo!


---

# 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-es/tutoriales/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.