Använd ett anpassat reaktionsbibliotek för att återge ett headless-formulär

Du kan skapa och implementera anpassade komponenter för att anpassa utseendet och funktionaliteten (beteendet) för dina formulär utan Headless-funktioner enligt organisationens krav och riktlinjer.

De här komponenterna har två primära syften: att styra utseendet eller formatet på formulärfält och att lagra data som samlats in via dessa fält i formulärmodellinstansen. Om det här låter förvirrande, var inte orolig - vi kommer snart att gå igenom dessa syften i detalj. Nu ska vi fokusera på de inledande stegen för att skapa anpassade komponenter, återge formuläret med dessa komponenter och använda händelser för att spara och skicka data till en REST-slutpunkt.

I den här självstudiekursen används komponenter i användargränssnittet för Google-material för att visa hur du återger ett Headless-formulär med anpassade React-komponenter. Du är dock inte begränsad till det här biblioteket och kan använda React Components Library eller utveckla egna anpassade komponenter.

När den här artikeln är avslutad omvandlas formuläret Kontakta oss som skapats i Skapa och publicera ett headless-formulär med hjälp av startkit till följande:

De största stegen som krävs för att återge ett formulär med hjälp av användargränssnittskomponenterna för Google-material är:

1. Installera Google Material UI

Som standard använder startsatsen Adobe Spectrum -komponenter. Låt oss ange att Google-materialets användargränssnitt ska användas:

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

Det installerar Google Material UI npm-biblioteken och lägger till biblioteken i startkit-beroenden. Nu kan du använda materialgränssnittskomponenter för att återge formulärkomponenter.

2. Skapa anpassade React-komponenter

Låt oss skapa en anpassad komponent som ersätter standardkomponenten för textindata med komponenten Google-textfält för material.

En separat komponent krävs för varje komponenttyp (fieldType eller :type) som används i en Headless-formulärdefinition. I formuläret Kontakta oss som du skapade i föregående avsnitt är till exempel fälten Namn, E-post och Telefon av typen text-input (fieldType: "text-input") och meddelandefältet av typen multiline-input ("fieldType": "multiline-input").

Låt oss skapa en anpassad komponent för att täcka över alla formulärfält som använder egenskapen fieldType: "text-input" med komponenten Material UI Text Field .

Så här skapar du den anpassade komponenten och mappar den anpassade komponenten med egenskapen 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;

Delen state.visible kontrollerar om komponenten är inställd på att vara synlig. Om den är det hämtas etiketten för fältet och visas med richTextString(state?.label?.value).

Din anpassade komponent materialtextfield är klar. Låt oss ställa in den här anpassade komponenten så att den ersätter alla förekomster av fieldType: "text-input" med Google materialgränssnittets textfält.

3. Mappa en anpassad komponent med headless-formulärfält

Processen med att återge formulärfält med hjälp av bibliotekskomponenter från tredje part kallas för mappning. Du mappar varje (fieldType) till motsvarande komponent i ett tredjepartsbibliotek.

All mappningsrelaterad information läggs till i filen mappings.ts. Programsatsen ...mappings i filen mappings.ts refererar till standardmappningarna, som överlappar (fieldType eller :type) med Adobe Spectrum -komponenter.

Så här lägger du till mappning för komponenten materialtextfield som skapades i det senaste steget:

Nästa steg

Du har återgett formuläret med anpassade komponenter som använder Google materialgränssnitt. Har du försökt skicka in formuläret genom att klicka på Skicka-knappen (mappad med motsvarande Google-materialgränssnittskomponent)? Om inte, försök då.

Skickar formuläret data till någon datakälla? Nej? Oroa dig inte. Detta beror på att formuläret inte har konfigurerats för att kommunicera med körningsbiblioteket.

Hur kan du konfigurera formuläret så att det kan kommunicera med det? Vi har en artikel på gång som kommer att förklara allt i detalj. Stanna kvar på kanalen!