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 modifier l’apparence et les fonctionnalités (comportement) de vos formulaires adaptatifs découplés selon les besoins et les 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, nous explorerons ces objectifs plus en détail sous peu. Pour l’instant, concentrons-nous sur les étapes initiales de la création de composants personnalisés. Nous aborderons le rendu du formulaire à l’aide de ces composants et l’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 de Google sont utilisés pour démontrer comment générer un formulaire adaptatif découplé à l’aide de composants React personnalisés. Cependant, vous n’êtes pas limité à cette bibliothèque et êtes libre d’utiliser n’importe quelle bibliothèque de composants React ou de développer vos propres composants personnalisés.

Dans la conclusion de cet article, le formulaire Nous contacter créé dans l’article Créer et publier un formulaire découplé à l’aide du kit de démarrage se transforme comme 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 de saisie de texte par défaut par un composant de champ de texte de l’interface utilisateur Material de 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 de champ de texte de l’interface utilisateur Material.

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 le rendu des champs de formulaire est connu sous le nom de mappage. Vous mappez chaque (fieldType) au composant correspondant de la 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 recouvrent les (fieldType ou :type) avec des composants 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 tenté d’envoyer le formulaire en cliquant sur le bouton Envoyer (mappé avec le composant d’interface utilisateur Material de Google correspondant) ? 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. Cela est dû au fait que votre formulaire n’est pas configuré pour communiquer avec la bibliothèque de runtime.

Comment configurer votre formulaire pour communiquer avec elle ? Nous allons bientôt publier un article qui expliquera tout cela en détail. Restez à l’écoute !