Utilizzare una libreria di react personalizzata per eseguire il rendering di un modulo headless

Puoi creare e implementare componenti personalizzati per personalizzare l’aspetto e la funzionalità (Comportamento) dei moduli adattivi headless in base ai requisiti e alle linee guida della tua organizzazione.

Questi componenti hanno due finalità principali: controllare l’aspetto o lo stile dei campi modulo e memorizzare i dati raccolti attraverso questi campi all’interno dell’istanza del modello di modulo. Se questo può sembrare confuso, non preoccuparti: esploreremo questi scopi in modo più dettagliato a breve. Per il momento, concentriamoci sui passaggi iniziali della creazione di componenti personalizzati, del rendering del modulo utilizzando questi componenti e dell’utilizzo di eventi per salvare e inviare dati a un endpoint REST.

In questo tutorial, vengono utilizzati i componenti dell’interfaccia utente di Google Material per dimostrare come eseguire il rendering di un modulo adattivo headless utilizzando i componenti React personalizzati. Tuttavia, non sei limitato a questa libreria e sei libero di utilizzare qualsiasi libreria di componenti React o di sviluppare componenti personalizzati.

Alla conclusione di questo articolo, il modulo Contattaci creato in Crea e pubblica un modulo headless utilizzando il kit di avvio si trasforma nel seguente:

I passaggi principali necessari per l’utilizzo dei componenti dell’interfaccia utente Materiale di Google per il rendering di un modulo sono i seguenti:

1. Installare l’interfaccia utente dei materiali di Google

Per impostazione predefinita, il kit di avvio utilizza i componenti Spectrum🔗 di Adobe. Impostiamolo per utilizzare l'interfaccia utente dei materiali di Google:

    npm install @mui/material @emotion/react @emotion/styled --force

Installa le librerie npm dell’interfaccia utente di Google Material e aggiunge le librerie alle dipendenze dei kit di avvio. È ora possibile utilizzare i componenti dell’interfaccia utente Materiale per eseguire il rendering dei componenti del modulo.

2. Creare componenti React personalizzati

Creiamo un componente personalizzato che sostituisce il componente predefinito immissione testo con il componente Campo di testo interfaccia utente materiale Google.

È necessario un componente separato per ogni tipo di componente (fieldType o :type) utilizzato in una definizione di modulo headless. Ad esempio, nel modulo Contattaci creato nella sezione precedente, i campi Nome, E-mail e Telefono di tipo text-input (fieldType: "text-input") e il campo del messaggio è di tipo multiline-input ("fieldType": "multiline-input").

Creiamo un componente personalizzato per sovrapporre tutti i campi modulo che utilizzano la proprietà fieldType: "text-input" con il componente Material UI Text Field.

Per creare il componente personalizzato e mappare il componente personalizzato con la proprietà fieldType:

     import React from 'react';
     import {useRuleEngine} from '@aemforms/af-react-renderer';
     import {FieldJson, State} from '@aemforms/af-core';
     import { TextField } from '@mui/material';
     import Box from '@mui/material/Box';
     import { richTextString } from '@aemforms/af-react-components';
     import Typography from '@mui/material/Typography';


     const MaterialtextField = function (props: State<FieldJson>) {

         const [state, handlers] = useRuleEngine(props);

         return(

         <Box>
             <Typography component="legend">{state.visible ? richTextString(state?.label?.value): ""} </Typography>
             <TextField variant="filled"/>
         </Box>

         )
     }

     export default MaterialtextField;

La parte state.visible controlla se il componente è impostato per essere visibile. In caso affermativo, l'etichetta del campo viene recuperata e visualizzata utilizzando richTextString(state?.label?.value).

Il componente personalizzato materialtextfield è pronto. Impostiamo questo componente personalizzato in modo da sostituire tutte le istanze di fieldType: "text-input" con il campo di testo dell'interfaccia utente di Google Material.

3. Mappatura del componente personalizzato con campi modulo headless

Il processo di utilizzo di componenti libreria di terze parti per il rendering dei campi modulo è noto come mappatura. Mappa ogni (fieldType) al componente corrispondente della libreria di terze parti.

Tutte le informazioni relative alla mappatura vengono aggiunte al file mappings.ts. L'istruzione ...mappings nel file mappings.ts fa riferimento alle mappature predefinite, che sovrappongono (fieldType o :type) con i componenti Adobe Spectrum.

Per aggiungere la mappatura per il componente materialtextfield, creato nell'ultimo passaggio:

Passaggio successivo

Il rendering del modulo con i componenti personalizzati che utilizzano l’interfaccia utente Materiale di Google è stato eseguito correttamente. Hai provato a inviare il modulo facendo clic sul pulsante Invia (mappato con il componente corrispondente dell’interfaccia utente di Google Material)? In caso contrario, prova.

Il modulo invia i dati a un'origine dati? No? Non preoccuparti. Questo perché il modulo non è configurato per comunicare con la libreria runtime.

Come configurare il modulo per comunicare con esso? Presto sarà disponibile un articolo che spiegherà tutto nel dettaglio. Continua a seguirci!