Een aangepaste reactiebibliotheek gebruiken om een koploze vorm te genereren

U kunt aangepaste componenten maken en implementeren om de weergave en functionaliteit (Gedrag) van uw Zwaarloze adaptieve formulieren aan te passen aan de vereisten en richtlijnen van uw organisatie.

Deze componenten hebben twee hoofddoelen: de weergave of stijl van formuliervelden bepalen en de gegevens die via deze velden worden verzameld, opslaan in de formuliermodelinstantie. Als dit verwarrend klinkt, maak je geen zorgen - we zullen deze doelen binnenkort gedetailleerder onderzoeken. Voor nu, laten de nadruk op de aanvankelijke stappen van het creëren van douanecomponenten, die de vorm teruggeven gebruikend deze componenten, en het gebruiken van gebeurtenissen om gegevens aan een REST eindpunt te bewaren en voor te leggen.

In deze zelfstudie worden UI-componenten voor materiaal van Google gebruikt om te tonen hoe een Zwaartepunt-adaptief formulier kan worden gegenereerd met behulp van aangepaste React-componenten. U bent echter niet beperkt tot deze bibliotheek en u kunt elke React-componentenbibliotheek gebruiken of uw eigen aangepaste componenten ontwikkelen.

Door de conclusie van dit artikel, de vorm van het Contact van ons die in wordt gecreeerd creeert en publiceert een hoofdloze vorm gebruikend starter kitartikel zet in het volgende om:

De belangrijkste stappen die nodig zijn voor het weergeven van een formulier met UI-componenten voor Google-materiaal zijn:

1. Interface voor Google-materiaal installeren

Door gebrek, gebruikt de aanzetuitrusting 🔗 componenten van het Spectrum van de Adobe . Laat het plaatsen om Materiële UI van Google te gebruiken:

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

De Npm-bibliotheken voor materiaal van Google worden geïnstalleerd en de bibliotheken worden toegevoegd aan afhankelijkheden van startsets. U kunt nu Materiële UI-componenten gebruiken om formuliercomponenten te genereren.

2. Aangepaste Reactie-componenten maken

Laten wij een douanecomponent tot stand brengen die standaard 🔗 component van de tekstinput met de Materiële UI van Google component van het Gebied van de Tekstvervangt.

Een afzonderlijke component wordt vereist voor elk componenttype ( fieldTypeof :type) dat in een definitie van de Vorm zonder titel wordt gebruikt. Bijvoorbeeld, in de vorm van het Contact Us die u in de vorige sectie creeerde, zijn de Naam, E-mail, en de gebieden van de Telefoon van type text-input ( fieldType: "text-input") en het berichtgebied van type multiline-input ( "fieldType": "multiline-input").

Laten wij een douanecomponent tot stand brengen om alle vormgebieden te bedekken die fieldType gebruiken: "text-input" bezit met Materiële UI de component van het Gebied van de Tekst.

Om de douanecomponent tot stand te brengen en de douanecomponent met het fieldTypebezit in kaart te brengen:

     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;

Het state.visible -onderdeel controleert of de component is ingesteld op zichtbaar. Als dit het geval is, wordt het label van het veld opgehaald en weergegeven met richTextString(state?.label?.value) .

Uw aangepaste component materialtextfield is gereed. Laten wij deze douanecomponent plaatsen om alle instanties van fieldType te vervangen: "text-input" met het Materiële UI- Gebied van de Tekst van Google.

3. Aangepaste component toewijzen met formuliervelden zonder kop

Het proces van het gebruik van bibliotheekcomponenten van derden voor het weergeven van formuliervelden wordt ook wel aangeduid als toewijzing. U brengt elk ( fieldType) aan overeenkomstige component van derdebibliotheek in kaart.

Alle informatie over toewijzingen wordt toegevoegd aan het mappings.ts -bestand. De ...mappings verklaring in het mappings.ts dossier verwijst naar de standaardafbeeldingen, die ( fieldTypeof :type) met componenten van het Spectrum van de Adobebedekken.

Als u toewijzingen wilt toevoegen voor de component materialtextfield , die u in de laatste stap hebt gemaakt:

Volgende stap

U hebt het formulier gegenereerd met aangepaste componenten die gebruikmaken van de gebruikersinterface van Google-materiaal. Hebt u geprobeerd het formulier te verzenden door op de knop Verzenden te klikken (toegewezen aan de overeenkomstige UI-component voor Google-materiaal)? Zo niet, ga dan maar door en probeer het.

Verzendt het formulier de gegevens naar een gegevensbron? Nee? Maak je geen zorgen. Dit komt omdat het formulier niet is geconfigureerd voor communicatie met de runtimebibliotheek.

Hoe kunt u uw formulier configureren om ermee te communiceren? Er komt binnenkort een artikel dat alles in detail zal uitleggen. Blijf op de hoogte!