Usar uma biblioteca de reação personalizada para renderizar um formulário headless

Você pode criar e implementar componentes personalizados para personalizar a aparência e a funcionalidade (Comportamento) de seus formulários adaptáveis headless de acordo com os requisitos e as diretrizes de sua organização.

Esses componentes atendem a dois objetivos principais: controlar a aparência ou o estilo dos campos de formulário e armazenar os dados coletados por meio desses campos na instância do modelo de formulário. Se isso parecer confuso, não se preocupe - exploraremos esses propósitos em mais detalhes em breve. Por enquanto, vamos nos concentrar nas etapas iniciais de criação de componentes personalizados, renderização do formulário usando esses componentes e utilização dos eventos para salvar e enviar dados para um endpoint REST.

Neste tutorial, os componentes da interface do usuário de materiais do Google são empregados para demonstrar como renderizar um formulário adaptável headless usando componentes personalizados do React. No entanto, você não está limitado a esta biblioteca e pode utilizar qualquer biblioteca de componentes do React ou desenvolver seus próprios componentes personalizados.

Na conclusão deste artigo, o artigo Fale Conosco criado em Criar e publicar um formulário headless usando o kit de início transforma-se no seguinte:

As principais etapas envolvidas no uso dos componentes da interface do usuário de material do Google para renderizar um formulário são:

1. Instalar a interface do usuário de material do Google

Por padrão, o kit inicial usa componentes de Espectro de Adobe. Vamos configurá-lo para usar a Interface do usuário de material do Google:

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

Ele instala as bibliotecas npm da interface do usuário do Google Material e adiciona as bibliotecas às dependências dos kits de início. Agora você pode usar os componentes da Interface do usuário do material para renderizar componentes de formulário.

2. Criar componentes personalizados do React

Vamos criar um componente personalizado que substitua o componente padrão entrada de texto pelo componente Campo de texto da interface do usuário de material do Google.

É necessário um componente separado para cada tipo de componente (fieldType ou :type) usado em uma definição de Formulário Headless. Por exemplo, no formulário Fale Conosco criado na seção anterior, os campos Nome, Email e Telefone do tipo text-input (fieldType: "text-input") e o campo de mensagem é do tipo multiline-input ("fieldType": "multiline-input").

Vamos criar um componente personalizado para sobrepor todos os campos de formulário que usam a propriedade fieldType: "text-input" com o componente Campo de texto da interface do usuário do material.

Para criar o componente personalizado e mapear o componente personalizado com a propriedade 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;

A parte state.visible verifica se o componente está definido para ser visível. Se for, o rótulo do campo será recuperado e exibido usando richTextString(state?.label?.value).

Seu componente personalizado materialtextfield está pronto. Vamos definir este componente personalizado para substituir todas as instâncias de fieldType: "text-input" com o Campo de texto da interface do usuário de material do Google.

3. Mapear componente personalizado com campos de formulário headless

O processo de usar componentes de biblioteca de terceiros para renderizar campos de formulário é conhecido como mapeamento. Você mapeia cada (fieldType) para o componente correspondente da biblioteca de terceiros.

Todas as informações relacionadas ao mapeamento são adicionadas ao arquivo mappings.ts. A instrução ...mappings no arquivo mappings.ts se refere aos mapeamentos padrão, que sobrepõem o (fieldType ou :type) com componentes Adobe Spectrum.

Para adicionar mapeamento para o componente materialtextfield, criado na última etapa:

Próxima etapa

Você renderizou o formulário com sucesso com componentes personalizados que usam a interface do usuário de materiais do Google. Você tentou enviar o formulário clicando no botão Enviar (mapeado com o componente de interface do usuário do material do Google correspondente)? Caso contrário, vá em frente e experimente.

O formulário está enviando os dados para alguma fonte de dados? Não? Não se preocupe. Isso ocorre porque o formulário não está configurado para se comunicar com a biblioteca de tempo de execução.

Como você pode configurar o formulário para se comunicar com ele? Temos um artigo em breve que explicará tudo em detalhes. Fique atento!