Tabelle Dati collegate

Mantenere le tabelle sincronizzate

Immagina di avere due tabelle nella tua pagina:

1. Tabella Account: Questa tabella (accountsDatatable) elenca tutti i tuoi account cliente.

2. Tabella Contatti: Questa tabella (contactsDatatable) elenca tutte le persone di contatto per i tuoi account.

L'obiettivo: Quando selezioni un account nella Tabella Account, vuoi che la Tabella Contatti si aggiorni automaticamente e mostri solo i contatti per quell' account specifico.

Come realizzarlo

La Tabella Account

• Trascina il componente Avonni Data Table

• Assicurati di aver assegnato a questa tabella il nome API accountsDatatable.

• Configura la sorgente dati usando la Query Data Source

• Seleziona l'oggetto Accounts

• Configura le mappature dei dati per creare colonne

La Tabella Contatti

• Anche questa tabella è impostata e mostra tutti i tuoi contatti.

• Vai alla sezione "Data Source" nelle impostazioni della tabella.

• Scegli l'opzione "Query Data Source".

• Seleziona l'oggetto che contiene le informazioni di contatto (es., "Contact").

• Aggiungi una condizione di filtro:

  • Campo: Id Account (o quale campo collega i contatti agli account)

  • Operatore: Uguale

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

    • Questo codice di espressione indica alla Tabella Contatti di mostrare solo i contatti il cui Id Account corrisponde all'ID della riga selezionata nella Tabella Account.

• Crea colonne aggiungendo campi.

Il risultato

• Gli utenti sfogliano la lista dei loro account nella Tabella Account.

• Fanno clic su un account.

• La Tabella Contatti si aggiorna istantaneamente per mostrare solo i contatti associati a quell'account scelto.

Questo mantiene le tue tabelle sincronizzate e offre un'esperienza utente fluida e intuitiva.