> 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/primeros-pasos/reactive-components.md).

# Componentes reactivos

## Resumen

Los componentes reactivos se actualizan automáticamente cuando los usuarios interactúan con tu Experience Site. Cuando un usuario hace clic o selecciona algo en un componente, otros componentes conectados se actualizan al instante para mostrar información relacionada, creando una experiencia fluida e interactiva.

{% hint style="success" %}

## Componentes clave

Los componentes reactivos son:

* [AX - Tabla de datos](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md)[Mapa](/experience-cloud/experience-cloud-es/experience-components/ax-map.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md)[Lista](/experience-cloud/experience-cloud-es/experience-components/ax-list.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md)[Cronología](/experience-cloud/experience-cloud-es/experience-components/ax-timeline.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-data-table.md)[Bloque de texto](/experience-cloud/experience-cloud-es/experience-components/ax-text-block.md)
  {% endhint %}

### **Cómo ayuda esto**

Los componentes reactivos te permiten crear páginas interactivas donde los usuarios pueden explorar datos de forma dinámica. Por ejemplo, hacer clic en un registro en AX - Tabla de datos puede actualizar automáticamente un AX - Mapa para mostrar la ubicación de ese registro, o filtrar una AX - Línea de tiempo para mostrar actividades relacionadas, todo sin refrescar la página ni navegar.

Esto crea experiencias de portal más atractivas, donde la información se actualiza al instante según lo que los usuarios están viendo o seleccionando

***

## Casos de uso prácticos

### Detalles dinámicos de cuentas con mapas

Configura un Avonni Map para mostrar ubicaciones de cuentas. Cuando un usuario selecciona una ubicación, los detalles relacionados de la cuenta (p. ej., nombre, descripción, sector) aparecen automáticamente en un Avonni Text Block, ofreciendo una forma intuitiva de explorar los datos.

<figure><img src="/files/9f3921543e82d367c61a5f39e09bad65ba8faf7f" alt=""><figcaption></figcaption></figure>

### Tablas de datos interconectadas

Configura una Tabla de datos de Avonni para listar cuentas. Al seleccionar una cuenta, una segunda Tabla de datos se actualiza y muestra los contactos asociados, permitiendo una navegación fluida por grandes conjuntos de datos.

<figure><img src="/files/9343983f754ac8d7e6a31075fd2c53f0edb2c1e7" alt=""><figcaption></figcaption></figure>

***

## Por qué importan los componentes reactivos

Los componentes reactivos permiten que tu Experience Site responda y se comunique entre elementos, haciéndolo más dinámico y fácil de usar. Esta interactividad ayuda a los visitantes a descubrir y acceder a la información de forma eficiente, lo que se traduce en una experiencia más atractiva y productiva.

***

## **Cómo configurar tus componentes reactivos de Avonni**

Incorpora estos componentes reactivos en tu Experience Site mediante un proceso de configuración sencillo para mejorar la interactividad:

### **¿Qué hace que un componente sea "reactivo"?**

Un componente se vuelve reactivo al vincular sus datos con otros componentes, lo que permite actualizaciones automáticas basadas en las acciones del usuario. Esto se logra con dos pasos sencillos

### Pasos para habilitar la reactividad

{% stepper %}
{% step %}

#### Asigna nombres a tus componentes de datos (componentApiName)

* Asigna un apodo único a cada componente en el panel de propiedades. Por ejemplo, nombra una Tabla de datos que enumera cuentas como accountsDatatable.
* *¿Por qué?* El apodo identifica el componente para la reactividad, permitiendo que otros componentes hagan referencia a sus datos
  {% endstep %}

{% step %}

#### Indica a otros componentes cómo reaccionar

* Especifica qué componentes deben actualizarse cuando un usuario interactúa con otro. Usa la siguiente sintaxis en las propiedades del componente de destino: texto`{{componentApiName.selectedRecord.componentFieldApiName}}`
* **Desglose:**
  * `componentApiName`: El apodo que asignaste (p. ej., `accountsDatatable`).
  * `selectedRecord`: La fila o elemento que selecciona el usuario.
  * `componentFieldApiName`: El campo específico que se mostrará (p. ej., `Nombre`, `Sector`).
* *¿Por qué?* Esta sintaxis vincula los datos seleccionados (p. ej., los de una cuenta `Nombre`) a otro componente, activando una actualización automática
  {% endstep %}
  {% endstepper %}

***

## Solución de problemas comunes

<details>

<summary><strong>Los componentes no se actualizan</strong></summary>

Asegúrate de que cada componente tenga un `componentApiName` y de que la sintaxis (`{{componentApiName.selectedRecord.componentFieldApiName}}`) se haya introducido correctamente en las propiedades del componente de destino.

</details>

<details>

<summary><strong>No se muestran datos</strong></summary>

Verifica que el componente de origen (p. ej., `accountsDatatable`) tenga datos y que el `componentFieldApiName` coincida con un campo disponible (p. ej., `Nombre`).

</details>

<details>

<summary><strong>Retraso de reactividad</strong></summary>

Revisa si hay conjuntos de datos complejos; simplifica las consultas o reduce el número de enlaces reactivos para mejorar el rendimiento.

</details>

<details>

<summary><strong>Si los problemas persisten</strong></summary>

Contacta a nuestro equipo de soporte en <support@avonni.com> para obtener ayuda.

</details>

***

## **Ejemplos guiados**

<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/08d3498c613cfdee24b2c91717240021c5ce0785"><strong>Vincular una tabla de datos y un mapa para ubicaciones dinámicas</strong></a></td><td>Aprende a conectar una tabla de datos y un mapa de Avonni en Experience Site para mostrar dinámicamente ubicaciones según las cuentas seleccionadas por el usuario.</td><td><a href="/files/f48e47dc711531102bd57aea60c402772230b699">/files/f48e47dc711531102bd57aea60c402772230b699</a></td></tr><tr><td><a href="/pages/084fe3a3a3ac6354db325020b470ab248e6c5d42"><strong>Tablas de datos vinculadas</strong></a></td><td>Descubre cómo vincular una tabla de datos de Avonni para cuentas con una tabla de contactos, actualizando la tabla de contactos de forma dinámica para mostrar solo los contactos de la cuenta seleccionada</td><td><a href="/files/785b70a6f7f6c3445549d0e3ce43f5d64ece3c96">/files/785b70a6f7f6c3445549d0e3ce43f5d64ece3c96</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-es/primeros-pasos/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.