# Componentes reactivos

## Resumen

Los Componentes Reactivos se actualizan automáticamente cuando los usuarios interactúan con su Sitio de Experiencia. 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 interactiva y fluida.

{% hint style="success" %}

## Componentes clave

Los componentes reactivos son:

* [AX - Tabla de Datos](/experience-cloud/experience-cloud-es/experience-components/ax-tabla-de-datos.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-tabla-de-datos.md)[Mapa](/experience-cloud/experience-cloud-es/experience-components/ax-mapa.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-tabla-de-datos.md)[Lista](/experience-cloud/experience-cloud-es/experience-components/ax-lista.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-tabla-de-datos.md)[Cronología](/experience-cloud/experience-cloud-es/experience-components/ax-cronologia.md)
* [AX - ](/experience-cloud/experience-cloud-es/experience-components/ax-tabla-de-datos.md)[Bloque de Texto](/experience-cloud/experience-cloud-es/experience-components/ax-bloque-de-texto.md)
  {% endhint %}

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

Los componentes reactivos le permiten crear páginas interactivas donde los usuarios pueden explorar datos dinámicamente. 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 un AX - Cronología para mostrar actividades relacionadas, todo sin recargas de página ni navegación.

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

***

## Casos de uso prácticos

### Detalles dinámicos de cuentas con mapas

Configure un Mapa Avonni para mostrar ubicaciones de cuentas. Cuando un usuario selecciona una ubicación, los detalles relacionados de la cuenta (p. ej., nombre, descripción, industria) aparecen automáticamente en un Bloque de Texto Avonni, proporcionando una forma intuitiva de explorar los datos.

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

### Tablas de datos interconectadas

Configure una Tabla de Datos Avonni para listar cuentas. Seleccionar una cuenta desencadena que una segunda Tabla de Datos se actualice y muestre los contactos asociados, permitiendo una navegación fluida a través de grandes conjuntos de datos.

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

***

## Por qué los componentes reactivos son importantes

Los componentes reactivos permiten que su Sitio de Experiencia 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 manera eficiente, conduciendo a una experiencia más atractiva y productiva.&#x20;

***

## **Configuración de sus componentes Avonni reactivos**

Incorpore estos componentes reactivos en su Sitio de Experiencia con 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 a otros componentes, permitiendo actualizaciones automáticas basadas en las acciones del usuario. Esto se logra con dos pasos simples

### Pasos para habilitar la reactividad

{% stepper %}
{% step %}

#### Nombre sus componentes de datos (componentApiName)

* Asigne un apodo único a cada componente en el Panel de Propiedades. Por ejemplo, nombre una Tabla de Datos que lista cuentas como accountsDatatable.
* *¿Por qué esto?* El apodo identifica el componente para la reactividad, permitiendo que otros componentes hagan referencia a sus datos
  {% endstep %}

{% step %}

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

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

***

## Solución de problemas comunes

<details>

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

Asegúrese de que cada componente tenga un único `componentApiName` y que la sintaxis (`{{componentApiName.selectedRecord.componentFieldApiName}}`) esté correctamente ingresada en las propiedades del componente de destino.

</details>

<details>

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

Verifique 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 en la reactividad</strong></summary>

Revise conjuntos de datos complejos; simplifique las consultas o reduzca el número de enlaces reactivos para mejorar el rendimiento.

</details>

<details>

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

Contacte 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 Tabla de Datos y Mapa para ubicaciones dinámicas</strong></a></td><td>Aprenda a conectar una Tabla de Datos y un Mapa Avonni en Experience Site para mostrar dinámicamente ubicaciones basadas en 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>Descubra cómo vincular una Tabla de Datos Avonni para cuentas con una Tabla de Contactos, actualizando la Tabla de Contactos dinámicamente para mostrar solo los contactos de la cuenta seleccionada</td><td><a href="/files/785b70a6f7f6c3445549d0e3ce43f5d64ece3c96">/files/785b70a6f7f6c3445549d0e3ce43f5d64ece3c96</a></td></tr></tbody></table>


---

# Agent Instructions: 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-es/primeros-pasos/componentes-reactivos.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.