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.
Componentes clave
Los componentes reactivos son:
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.
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.
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
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
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
Solución de problemas comunes
Los componentes no se actualizan
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.
No se muestran datos
Verifica que el componente de origen (p. ej., accountsDatatable) tenga datos y que el componentFieldApiName coincida con un campo disponible (p. ej., Nombre).
Retraso de reactividad
Revisa si hay conjuntos de datos complejos; simplifica las consultas o reduce el número de enlaces reactivos para mejorar el rendimiento.
Si los problemas persisten
Contacta a nuestro equipo de soporte en [email protected] para obtener ayuda.
Ejemplos guiados
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.
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
Última actualización
¿Te fue útil?