For the complete documentation index, see llms.txt. This page is also available as Markdown.

Tablas de datos vinculadas

Mantener las tablas sincronizadas

Imagina que tienes dos tablas en tu página:

  1. Tabla de cuentas: Esta tabla (accountsDatatable) enumera todas tus cuentas de clientes.

  2. Tabla de contactos: Esta tabla (contactsDatatable) enumera todas las personas de contacto de tus cuentas.

El objetivo: Cuando seleccionas una cuenta en la Tabla de cuentas, quieres que la Tabla de contactos se actualice automáticamente y muestre solo los contactos de esa cuenta.

Cómo lograrlo

La tabla de cuentas

  • Arrastra el componente Avonni Data Table

  • Asegúrate de haberle dado a esta tabla el nombre de API accountsDatatable.

  • Configura la fuente de datos usando Query Data Source

  • Selecciona el objeto Accounts

  • Configura los mapeos de datos para crear columnas

La tabla de contactos

  • Esta tabla también está configurada y muestra todos tus contactos.

  • Ve a la sección "Data Source" en la configuración de la tabla.

  • Elige la opción "Query Data Source".

  • Selecciona el objeto que contiene tu información de contacto (por ejemplo, "Contact").

  • Agrega una condición de filtro:

    • Campo: Id de cuenta (o cualquier campo que vincule los contactos con las cuentas)

    • Operador: Igual a

    • Valor: {{accountsDatatable.selectedRecord.Id}}

      • Este código de expresión indica a la Tabla de contactos que muestre solo los contactos cuyo ID de cuenta coincida con el ID de la fila seleccionada en la Tabla de cuentas.

  • Crea columnas agregando campos.

El resultado

  • Los usuarios recorren su lista de cuentas en la Tabla de cuentas.

  • Hacen clic en una cuenta.

  • La Tabla de contactos se actualiza al instante para mostrar solo los contactos asociados con esa cuenta elegida.

Esto mantiene tus tablas sincronizadas y ofrece una experiencia de usuario fluida e intuitiva.

Última actualización

¿Te fue útil?