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.

Los componentes de experiencia de datos listos para la reactividad son: el Tabla de datos, Lista, Mapa, Cronología y el bloque de texto de Avonni.

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.

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}}.

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!