Utiliser une bibliothèque React personnalisée pour afficher un formulaire découplé

Vous pouvez créer et implémenter des composants personnalisés pour personnaliser l’apparence et les fonctionnalités (comportement) de vos formulaires adaptatifs découplés conformément aux exigences et directives de votre entreprise.

Ces composants ont deux objectifs principaux : contrôler l’aspect ou le style des champs des formulaires et stocker les données collectées à travers ces champs dans l’instance de modèle des formulaires. Si cela semble déroutant, ne vous inquiétez pas : vous allez bientôt explorer ces objectifs plus en détail. Pour l’instant, concentrons-nous sur les premières étapes de création de composants personnalisés, de rendu du formulaire à l’aide de ces composants et d’utilisation d’événements pour enregistrer et envoyer des données à un point d’entrée REST.

Dans ce tutoriel, les composants de l’interface utilisateur Material Google sont utilisés pour démontrer comment effectuer le rendu d’un formulaire adaptatif découplé à l’aide de composants React personnalisés. Cependant, vous n’êtes pas limité à cette bibliothèque et vous êtes libre d’utiliser n’importe quelle bibliothèque de composants React ou de développer vos propres composants personnalisés.

À la fin de cet article, l’article Nous contacter créé dans Créer et publier un formulaire découplé à l’aide du kit de démarrage se transforme en ce qui suit :

Les principales étapes nécessaires à l’utilisation des composants de l’interface utilisateur Material de Google pour générer un formulaire sont les suivantes :

​1. Installer l’interface utilisateur Material de Google

Par défaut, le kit de démarrage utilise les composants d’Adobe Spectrum. Commençons par la configuration pour utiliser l’interface utilisateur Material de Google :

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

Celle-ci installe les bibliothèques npm de l’interface utilisateur Material de Google et ajoute les bibliothèques aux dépendances des kits de démarrage. Vous pouvez désormais utiliser les composants de l’interface utilisateur Material pour effectuer le rendu des composants de formulaire.

​2. Créer des composants React personnalisés

Créons un composant personnalisé qui remplace le composant par défaut entrée de texte par le composant Champ de texte de l’interface utilisateur Material Google.

Un composant distinct est requis pour chaque type de composant (fieldType ou :type) utilisé dans une définition de formulaire découplé. Par exemple, dans le formulaire de contact que vous avez créé dans la section précédente, les champs Nom, Adresse e-mail et Téléphone sont de type text-input (fieldType: "text-input") et le champ du message est de type multiline-input ("fieldType": "multiline-input").

Créons un composant personnalisé pour superposer tous les champs de formulaire qui utilisent la propriété fieldType: « text-input » avec le composant Material UI Text Field.

Pour créer et mapper un composant personnalisé avec la propriété 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 partie state.visible vérifie si le composant est défini comme étant visible. Si tel est le cas, le libellé du champ est récupéré et affiché à l’aide de richTextString(state?.label?.value).

Votre composant personnalisé materialtextfield est prêt. Définissons ce composant personnalisé afin qu’il remplace toutes les instances de fieldType: "text-input" par le Champ de texte Interface utilisateur Material de Google.

​3. Mapper un composant personnalisé avec des champs de formulaire découplés

Le processus d’utilisation de composants de bibliothèque tiers pour effectuer le rendu des champs de formulaire est connu sous le nom de mappage. Vous mappez chaque (fieldType) à un composant correspondant d’une bibliothèque tierce.

Toutes les informations relatives au mappage sont ajoutées au fichier mappings.ts. L’instruction ...mappings dans le fichier mappings.ts fait référence aux mappages par défaut, qui superposent les composants (fieldType ou :type) avec Adobe Spectrum.

Pour ajouter un mappage pour le composant materialtextfield, créé à la dernière étape :

Étape suivante

Vous avez réussi à rendre le formulaire avec des composants personnalisés qui utilisent l’interface utilisateur Material de Google. Avez-vous essayé d’envoyer le formulaire en cliquant sur le bouton Envoyer (associé au composant correspondant de l’interface utilisateur Material Google) ? Si ce n'est pas le cas, allez-y, essayez.

Le formulaire envoie-t-il les données à une source de données ? Non ? Ne vous inquiétez pas. En effet, votre formulaire n’est pas configuré pour communiquer avec la bibliothèque d’exécution.

Comment configurer votre formulaire pour communiquer avec elle ? Un article va bientôt vous expliquer tout en détail. Restez à l’écoute !