Guida all'implementazione

Guida all’implementazione della reattività nei componenti Avonni

Trasforma i tuoi componenti Avonni in un’esperienza dinamica e interattiva con la nostra guida alla configurazione di componenti dati reattivi. Questo tutorial ti guiderà attraverso il processo, assicurando che i tuoi componenti visualizzino i dati e reagiscano alle interazioni dell’utente in tempo reale.

I componenti di esperienza dati pronti alla reattività sono: il Tabella dati, Elenco, Mappa, Cronologia e il Blocco di testo Avonni.

Passaggio 1: Assegnare i nomi API ai tuoi componenti dati

Inizia assegnando a ciascuno dei tuoi componenti dati un identificatore univoco, noto come nome API. Questo nome funge da punto di riferimento, consentendo alle diverse parti della tua pagina di comunicare.

• Ad esempio:

  • Se stai lavorando con un componente Tabella dati, puoi chiamarlo accountsDatatable.

Passaggio 2: Configurare espressioni reattive nei componenti di destinazione

Poi, decidi dove vuoi che compaiano i dati interattivi. Potrebbe essere all'interno di un Blocco di testo, in un'altra Tabella dati o in qualsiasi componente che visualizzi dati. Qui userai espressioni reattive per indicare al componente quali dati mostrare e quando nel menu filtro.

• Il formato dell'espressione reattiva: Usa il formato {{componentApiName.selectedRecord.componentFieldApiName}} per collegare i tuoi componenti.

  • componentApiName: Qui inserisci il nome API del tuo componente dati (come quello accountsDatatable che hai chiamato sopra).
  • componentFieldApiName: Si riferisce al campo specifico del record che vuoi visualizzare (per esempio, Nome oppure Industry).
• Ad esempio:

  • Per visualizzare il campo 'Name' di un record selezionato dal tuo accountsDatatable, usa {{accountsDatatable.selectedRecord.Name}}.
  • Per visualizzare il campo 'Industry' della stessa selezione, usa {{accountsDatatable.selectedRecord.Industry}}.

Casi d’uso pratici:

1. Mappe interattive per la visualizzazione degli account:

   • Supponiamo che tu abbia una mappa interattiva contrassegnata come accountMap. Quando un utente seleziona una posizione, puoi visualizzare il nome dell’account in un Blocco di testo usando un’espressione come {{accountMap.selectedRecord.Name}}. In questo modo il nome dell’account selezionato appare dinamicamente in base all’interazione dell’utente.
2. Tabelle dati sincronizzate per account e contatti:

   • Immagina di avere una tabella che mostra gli account (accountsDatatable) e un’altra che mostra i contatti correlati (contactsDatatable).
   • Puoi configurare il contactsDatatable per reagire alle selezioni nel accountsDatatable. Ad esempio, per visualizzare il nome del contatto associato all’account selezionato, usa {{accountsTable.selectedRecord.Id}}.

Questi passaggi trasformeranno i tuoi componenti statici in un’esperienza ricca e reattiva, rendendo le tue applicazioni web più intuitive e facili da usare. La potenza dei dati reattivi risiede nella loro capacità di far sembrare ogni interazione sul tuo sito connessa e significativa.

Buon sviluppo!