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 per configurare componenti dati reattivi. Questo tutorial ti guiderà passo dopo passo, assicurando che i tuoi componenti mostrino i dati e rispondano alle interazioni dell'utente in tempo reale.

I componenti dell'esperienza dati pronti per la reattività sono: il Data Table, Elenco, Mappa, Timeline e il Blocco di Testo Avonni.

Passo 1: Assegnare 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, permettendo alle diverse parti della tua pagina di comunicare.

• Per esempio:

  • Se stai lavorando con un componente Data Table, puoi chiamarlo accountsDatatable.

Passo 2: Configurare espressioni reattive nei componenti di destinazione

Successivamente, decidi dove vuoi che appaiano i dati interattivi. Potrebbe essere all'interno di un Blocco di Testo, un altro Data Table o qualsiasi componente che visualizzi dati. Qui userai espressioni reattive per istruire il componente su quali dati mostrare e quando, nel menu dei filtri.

• 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 il accountsDatatable che hai nominato sopra).

  • componentFieldApiName: Si riferisce al campo specifico del record che vuoi visualizzare (per esempio, Nome o Industry).

• Per esempio:

  • Per mostrare il campo 'Name' di un record selezionato dal tuo accountsDatatable, usa {{accountsDatatable.selectedRecord.Name}}.

  • Per visualizzare il campo 'Industry' dalla 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 etichettata come accountMap. Quando un utente seleziona una posizione, puoi mostrare il Nome dell'Account in un Blocco di Testo usando un'espressione come {{accountMap.selectedRecord.Name}}. Questo garantisce che il nome dell'account selezionato appaia dinamicamente in base all'interazione dell'utente.

2. Data Table 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 mostrare 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 capacità di rendere ogni interazione sul tuo sito connessa e mirata.

Buona creazione!