Verwenden einer benutzerdefinierten React-Bibliothek zum Rendern eines Headless-Formulars

Sie können benutzerdefinierte Komponenten erstellen und implementieren, um das Erscheinungsbild und die Funktionalität (Verhalten) Ihrer adaptiven Headless-Formulare gemäß den Anforderungen und Richtlinien Ihres Unternehmens anzupassen.

Diese Komponenten dienen hauptsächlich dazu, das Erscheinungsbild oder den Stil von Formularfeldern festzulegen und die über diese Felder erfassten Daten in der Formularmodellinstanz zu speichern. Wenn dies verwirrend klingt, keine Sorge - Sie werden diese Zwecke in Kürze detaillierter erkunden. Zunächst konzentrieren wir uns auf die ersten Schritte: Erstellen benutzerdefinierter Komponenten, Rendern des Formulars mithilfe dieser Komponenten und Verwenden von Ereignissen zum Speichern und Senden von Daten an einen REST-Endpunkt.

In diesem Tutorial werden Komponenten der Google Material-Benutzeroberfläche verwendet, um zu demonstrieren, wie ein Headless-adaptives Formular mithilfe von benutzerdefinierten React-Komponenten gerendert werden kann. Sie sind jedoch nicht auf diese Bibliothek beschränkt und können beliebige React-Komponentenbibliotheken verwenden oder eigene benutzerdefinierte Komponenten entwickeln.

Nach Abschluss dieses Artikels erhält der Artikel Contact Us , der in Erstellen und Veröffentlichen eines Headless-Formulars mit dem Starter Kit erstellt wurde, folgende Fassung:

Die wichtigsten Schritte beim Rendern eines Formulars mit den Komponenten der Google Material-Benutzeroberfläche:

​1. Installieren der Google Material-Benutzeroberfläche

Standardmäßig verwendet das Starterkit Adobe Spectrum-Komponenten. Konfigurieren wir sie für die Verwendung der Google Material-Benutzeroberfläche:

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

Dadurch werden die npm-Bibliotheken der Google Material-Benutzeroberfläche installiert und zu den Abhängigkeiten des Starterkits hinzugefügt. Sie können Formularkomponenten jetzt mit den Komponenten der Material-Benutzeroberfläche rendern.

​2. Erstellen benutzerdefinierter React-Komponenten

Erstellen wir eine benutzerdefinierte Komponente, die die standardmäßige Komponente Texteingabe durch die Komponente Textfeld der Google- ersetzt.

Für jeden Komponententyp (fieldType oder ), ​ :type in einer Headless-Formulardefinition verwendet wird, ist eine separate Komponente erforderlich. Beispielsweise sind im Kontaktformular, das Sie im vorherigen Abschnitt erstellt haben, die Felder Name, E-Mail und Telefon vom Typ text-input (fieldType: "text-input") und das Meldungsfeld vom Typ multiline-input ("fieldType": "multiline-input").

Erstellen wir eine benutzerdefinierte Komponente, um alle Formularfelder, die die Eigenschaft „fieldType​ „text-input“ ​, mit der Komponente "​ UI Text Field zu überlagern.

So erstellen Sie die benutzerdefinierten Komponente und ordnen sie der Eigenschaft fieldType zu:

     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;

Der Teil state.visible überprüft, ob die Komponente als sichtbar festgelegt ist. Ist dies der Fall, wird die Feldbeschriftung abgerufen und mit richTextString(state?.label?.value) angezeigt.

Ihre benutzerdefinierte Komponente materialtextfield ist bereit. Legen wir diese benutzerdefinierte Komponente fest, um alle Instanzen von fieldType: "text-input" durch „Textfeld der Google Material-Benutzeroberfläche“ zu ersetzen.

​3. Ordnen Sie Headless-Formularfeldern benutzerdefinierten Komponenten zu

Der Prozess der Verwendung von Bibliothekskomponenten von Drittanbietern zum Rendern von Formularfeldern wird als Zuordnung bezeichnet. Sie ordnen jede fieldType einer entsprechenden Komponente einer Drittanbieterbibliothek zu.

Alle zuordnungsbezogenen Informationen werden zur Datei mappings.ts hinzugefügt. Die ...mappings-Anweisung in der mappings.ts bezieht sich auf die Standardzuordnungen, die die (fieldType oder :type) mit Adobe Spectrum-Komponenten überlagern.

So ordnen Sie die im letzten Schritt erstellte materialtextfield-Komponente zu:

Nächster Schritt

Sie haben das Formular erfolgreich mit benutzerdefinierten Komponenten, die die Google Material-Benutzeroberfläche verwenden, gerendert. Haben Sie versucht, das Formular zu senden, indem Sie auf die Senden-Schaltfläche geklickt haben (der entsprechenden Google Material-UI-Komponente zugeordnet)? Wenn nicht, versuchen Sie es.

Sendet das Formular die Daten an eine Datenquelle? Nein? Machen Sie sich keine Sorgen. Der Grund dafür ist, dass das Formular nicht für die Kommunikation mit der Laufzeitbibliothek konfiguriert ist.

Wie können Sie Ihr Formular so konfigurieren, dass es mit ihr kommuniziert? Bald wird ein Artikel erscheinen, in dem alles im Detail erklärt wird. Bleiben Sie dran!