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 das verwirrend klingt, machen Sie sich keine Sorgen – wir werden diese Aspekte in Kürze genauer untersuchen. Zunächst konzentrieren wir uns auf die ersten Schritte zur Erstellung benutzerdefinierter Komponenten, zum Rendern des Formulars mit diesen Komponenten und zur Verwendung von Ereignissen zum Speichern und Senden von Daten an einen REST-Endpunkt.

In diesem Tutorial wird anhand von Komponenten der Google Material-Benutzeroberfläche demonstriert, wie ein adaptives Headless-Formular mit benutzerdefinierten React-Komponenten wiedergegeben wird. Sie sind jedoch nicht auf diese Bibliothek beschränkt und können jede React-Komponentenbibliothek nutzen oder eigene benutzerdefinierte Komponenten entwickeln.

Am Ende dieses Artikels verwandelt sich das Kontakt-Formular, das im Artikel Erstellen und Veröffentlichen eines Headless-Formulars mit dem Starterkit erstellt wurde, in Folgendes:

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 Standardkomponente Texteingabe durch die Komponente Textfeld der Google Material-Benutzeroberfläche ersetzt.

Für jeden Komponententyp ist eine separate Komponente erforderlich (fieldType oder :type), die in einer Definition für Headless-Formulare verwendet wird. 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 zu überlagern, die die Eigenschaft fieldType: "text-input" mit der Komponente Textfeld der Material-Benutzeroberfläche verwenden.

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

Das Rendern von Formularfeldern mithilfe von Komponenten aus Drittanbieterbibliotheken wird als Zuordnung bezeichnet. Dabei ordnen Sie jeden (fieldType) der entsprechenden Komponente der Drittanbieterbibliothek zu.

Alle zuordnungsbezogenen Informationen werden zur Datei mappings.ts hinzugefügt. Die ...mappings-Anweisung in der Datei mappings.ts bezieht sich auf die Standardzuordnungen, die den (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 Schaltfläche „Senden“ geklickt haben (der entsprechenden Komponente der Google Material-Benutzeroberfläche zugeordnet)? Wenn nicht, versuchen Sie es.

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

Wie können Sie Ihr Formular so konfigurieren, dass es mit ihr kommuniziert? Wir veröffentlichen bald einen Artikel, der alles im Detail erklärt. Bleiben Sie dran!