Guía de Implementación

Guía para implementar reactividad en componentes Avonni

Transforma tus componentes Avonni en una experiencia dinámica e interactiva con nuestra guía sobre cómo 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.

Los componentes de Experiencia de Datos Listos para Reactividad son: el Tabla de Datos, Lista, Mapa, Cronograma y el Bloque de Texto de Avonni.

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

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

• Por ejemplo:

  • Si estás trabajando con un componente Tabla de Datos, puedes nombrarlo accountsDatatable.

Paso 2: Configurar expresiones reactivas en los componentes objetivo

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í utilizarás expresiones reactivas para indicar 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 enlazar tus componentes.

  • componentApiName: Aquí es donde pones el nombre de API de tu componente de datos (como el accountsDatatable que nombraste arriba).

  • componentFieldApiName: Esto se refiere al campo específico del registro que deseas mostrar (por ejemplo, Nombre o Industria).

• Por ejemplo:

  • Para mostrar el campo 'Name' de un registro seleccionado en 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:

   • Supongamos 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 asegura que el nombre de la cuenta seleccionada aparezca dinámicamente según 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 la contactsDatatable para que reaccione a las selecciones en la accountsDatatable. Por ejemplo, para mostrar el nombre del contacto asociado con la cuenta seleccionada, usa {{accountsTable.selectedRecord.Id}}.

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 radica en su capacidad para que cada interacción en tu sitio se sienta conectada y con propósito.

¡Feliz desarrollo!