Utilice una biblioteca de React personalizada para procesar un formulario sin encabezado

Puede crear e implementar componentes personalizados para personalizar el aspecto y la funcionalidad (comportamiento) de los formularios adaptables sin encabezado según los requisitos y las directrices de su organización.

Estos componentes tienen dos propósitos principales: controlar el aspecto o el estilo de los campos de formulario y almacenar los datos recopilados a través de estos campos en la instancia del modelo de formulario. Si esto suena confuso, no se preocupe. En breve explorará estos propósitos con más detalle. Por ahora, vamos a centrarnos en los pasos iniciales de la creación de componentes personalizados, el procesamiento del formulario mediante estos componentes y la utilización de eventos para guardar y enviar datos a un punto final REST.

En este tutorial, los componentes de la IU de Google Material se emplean para mostrar cómo procesar un formulario adaptable sin encabezado utilizando componentes React personalizados. Sin embargo, no está limitado a esta biblioteca y puede utilizar cualquier biblioteca de componentes React o desarrollar sus propios componentes personalizados.

Al concluir este artículo, el formulario Contact Us (contáctenos) creado en el artículo Creación y publicación de un formulario sin encabezado con el kit de inicio se transformará en lo siguiente:

Los pasos principales que hay que seguir al utilizar los componentes de IU de Google Material para procesar un formulario son:

​1. Instalar la IU de Google Material

De forma predeterminada, el kit de inicio utiliza los componentes Espectro de Adobe. Vamos a definirlo para utilizar la IU de materiales de Google:

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

Instala las bibliotecas npm de la IU de Google Material y las añade a las dependencias de los kits de inicio. Ahora puede utilizar los componentes de la IU de Material para procesar los componentes de formulario.

​2. Crear componentes React personalizados

Vamos a crear un componente personalizado que reemplace el componente entrada de texto predeterminado por el componente Campo de texto de IU de Google Material.

Se requiere un componente independiente para cada tipo de componente (fieldType o :type) utilizado en una definición de formulario sin encabezado. Por ejemplo, en el formulario Contáctenos que creó en la sección anterior, los campos Nombre, Correo electrónico y Teléfono son de tipo text-input (fieldType: "text-input") y el campo de mensaje es de tipo multiline-input ("fieldType": "multiline-input").

Vamos a crear un componente personalizado para superponer todos los campos de formulario que utilizan la propiedad fieldType: "text-input" con el componente Campo de texto de IU de Material.

Para crear el componente personalizado y asignar el componente personalizado con la propiedad 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 parte state.visible comprueba si el componente está configurado para ser visible. Si es así, la etiqueta del campo se recupera y se muestra mediante richTextString(state?.label?.value).

Su componente personalizado materialtextfield está listo. Vamos a configurar este componente personalizado para reemplazar todas las instancias de fieldType: "text-input" por el campo de texto de la IU de Google Material.

​3. Asignar un componente personalizado con campos de formulario sin encabezado

El proceso de utilizar componentes de una biblioteca de terceros para procesar campos de formulario se conoce como asignación. Debe asignar cada (fieldType) a un componente correspondiente de una biblioteca de terceros.

Toda la información relacionada con la asignación se añade al archivo mappings.ts. La instrucción ...mappings del archivo mappings.ts hace referencia a las asignaciones predeterminadas, que se superponen a los componentes (fieldType o :type) con Adobe Spectrum.

Para añadir la asignación para el componente materialtextfield, creado en el último paso:

Siguiente paso

Ha procesado correctamente el formulario con componentes personalizados que utilizan la IU de Google Material. ¿Ha intentado enviar el formulario haciendo clic en el botón Enviar (asignado con el componente de IU de Google Material correspondiente)? Si no, adelante. Inténtelo.

¿El formulario envía los datos a alguna fuente de datos? No? No se preocupe. Esto se debe a que el formulario no está configurado para comunicarse con la biblioteca en tiempo de ejecución.

¿Cómo puede configurar el formulario para comunicarse con ella? Próximamente se publicará un artículo que lo explica todo en detalle. Permanezca atento.