Tabelle dati collegate

Mantenere le tabelle sincronizzate

Immagina di avere due tabelle sulla tua pagina:

1. Tabella Account: Questa tabella (accountsDatatable) elenca tutti i tuoi account cliente.
2. Tabella Contatti: Questa tabella (contactsDatatable) elenca tutti i contatti 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 quel account.

Come realizzarlo

La Tabella Account

• Trascina il componente Avonni Data Table
• Assicurati di aver assegnato a questa tabella il nome API accountsDatatable.
• Configura l'origine dati utilizzando Query Data Source
• Seleziona l'oggetto Account
• Configura le mappature dei dati per creare colonne

La Tabella Contatti

• Anche questa tabella è configurata 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 dei contatti (ad es., "Contact").
• Aggiungi una condizione di filtro:

  • Campo: ID Account (o qualunque campo colleghi i contatti agli account)
  • Operatore: Uguale a
  • 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 consultano l'elenco dei propri 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.

In questo modo le tabelle restano sincronizzate e l'esperienza utente risulta fluida e intuitiva.