DocumentaciónFormularios adaptables sin encabezado de AEM

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:
  • Formularios adaptables

Creado para:

  • Principiante
  • Intermedio
  • Administrador
  • Desarrollador

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. Exploraremos estos propósitos con más detalle en breve. 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 Contáctenos creado en el artículo Creación y publicación de un formulario sin encabezado mediante el kit de inicio se transforma 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:

  1. Asegúrese de que el kit de inicio no está en funcionamiento. Para detener el kit de inicio, abra el terminal, vaya a react-starter-kit-aem-headless-forms y pulse Ctrl-C (es lo mismo en Windows, Mac y Linux).

    No intente cerrar el terminal. El cierre del terminal no detiene el kit de arranque.

  2. Ejecute el siguiente comando:


    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:

  1. Abra el directorio react-starter-kit-aem-headless-forms en un editor de códigos y vaya a \react-starter-kit-aem-headless-forms\src\components.

  2. Cree una copia del regulador o la carpeta richtext y cambie el nombre de la carpeta copiada a materialtextfield. Regulador y richtext son dos componentes personalizados de ejemplo disponibles en la aplicación de inicio. Puede utilizarlos para crear sus propios componentes personalizados.

    El componente personalizado materialtextfield en VSCode

  3. Abra el archivo \react-starter-kit-aem-headless-forms\src\components\materialtextfield\index.tsx y reemplace el código existente por el siguiente código. Este código devuelve y procesa un componente Campo de texto de IU de Google Material.


     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) al componente correspondiente de la 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 Espectro de Adobe.

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

  1. Abra el archivo mappings.ts.

  2. Añada la siguiente instrucción de importación para incluir el componente materialtextfield al archivo mappings.ts:

        import MaterialtextField from "../components/materialtextfield";

  3. Añada la siguiente instrucción para asignar text-input con el componente materialtextfield.

        "text-input": MaterialtextField

    El código final del archivo tiene el siguiente aspecto:

          import { mappings } from "@aemforms/af-react-components";
      import MaterialtextField from "../components/materialtextfield";


      const customMappings: any = {
        ...mappings,
        "text-input": MaterialtextField
     };
     export default customMappings;

  4. Guarde y ejecute la aplicación. Los tres primeros campos del formulario se representan mediante Campo de texto de IU de Google Material:

    Del mismo modo, puede crear componentes personalizados para los campos de mensaje ("fieldType": "multiline-input") y clasificación del servicio ("fieldType":"number-input"). Puede clonar el siguiente repositorio Git para los componentes personalizados del mensaje y clasificar los campos de servicio:

    https://github.com/singhkh/react-starter-kit-aem-headless-forms

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 durante la ejecución.

¿Cómo puede configurar el formulario para comunicarse con ella? Tenemos un artículo próximamente que explicará todo en detalle. Permanezca atento.

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba