Criar e visualizar um formulário headless usando um aplicativo React introduction

O kit inicial ajuda você a começar a usar rapidamente um aplicativo React. Você pode desenvolver e usar formulários adaptáveis headless em um Angular, Vanilla JS e outros ambientes de desenvolvimento de sua escolha.

Começar com formulários adaptáveis headless é muito fácil e rápido. Clonar o projeto React pronto, instalar as dependências e executar o projeto. Você tem um formulário adaptável headless integrado em um aplicativo React em funcionamento. Você pode usar o projeto de amostra do react para criar e testar formulários adaptáveis headless antes de implantá-lo em um ambiente de produção.

Vamos começar:

Antes de começar pre-requisites

Para criar e executar um aplicativo React, você deve ter o seguinte instalado em seu computador:

Introdução

Depois de atender aos requisitos, execute as seguintes etapas para começar:

​1. Configurar o kit inicial de formulários adaptáveis headless install

O kit inicial é um aplicativo React com um exemplo de formulário adaptável headless e bibliotecas correspondentes. Use o kit para desenvolver e testar seus formulários adaptáveis headless e os componentes correspondentes do React. Execute os seguintes comandos para configurar o kit inicial dos formulários adaptáveis headless:

​2. Visualizar o formulário adaptável headless preview

Depois de configurar o kit inicial, é possível visualizar o formulário adaptável headless de amostra, substituí-lo pelo seu próprio formulário personalizado. Você também pode configurar o kit inicial para recuperar um formulário de um servidor do AEM Forms. Para visualizar o formulário

​3. Crie e renderize seu próprio formulário adaptável headless custom

Um formulário adaptável headless representa o formulário e seus componentes, como campos e botões, no formato JSON (JavaScript Object Notation). A vantagem de usar o formato JSON é que ele pode ser facilmente analisado e usado por várias linguagens de programação, tornando-se uma maneira conveniente de trocar dados de formulário entre sistemas. Para exibir o exemplo de formulário adaptável headless incluído no aplicativo, abra o arquivo /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Vamos criar um formulário Contact Us com quatro campos: "Nome", "Email", "Número de Contato" e "Mensagem". Os campos são definidos como objetos (itens) no JSON, com cada objeto (item) tendo propriedades como tipo, rótulo, nome e obrigatório. O formulário também tem um botão do tipo "enviar". Este é o JSON para o formulário.

{
  "afModelDefinition": {
    "adaptiveform": "0.10.0",
    "items": [
      {
        "fieldType": "text-input",
        "label": {
          "value": "Name"
        },
        "name": "name"
      },
      {
        "fieldType": "text-input",
        "format": "email",
        "label": {
          "value": "Email"
        },
        "name": "email"
      },
      {
        "fieldType": "text-input",
        "format": "phone",
        "pattern": "[0-9]{10}",
        "label": {
          "value": "Contact Number"
        },
        "name": "Phone"
      },
      {
        "fieldType": "multiline-input",
        "label": {
          "value":"Message"
        },
        "name": "message"
      },
      {
        "fieldType": "button",
        "label":{
          "value": "Submit"
        },
        "name":"submit",
        "events":{
          "click": "submitForm()"
        }
      }
    ],
    "action": "https://eozrmb1rwsmofct.m.pipedream.net",
    "description": "Contact Us",
    "title": "Contact Us",
    "metadata": {
      "grammar": "json-formula-1.0.0",
      "version": "1.0.0"
    }
  }
}

Para renderizar o formulário, substitua o formulário adaptável headless de amostra JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json pelo JSON acima, salve o arquivo, aguarde o kit inicial compilar e atualize o formulário.

Você renderizou com sucesso o formulário adaptável headless.

Bônus

Vamos definir o título da página da Web que hospeda o formulário como Contact Us | WKND Adventures and Travel. Para alterar o título, abra o arquivo react-starter-kit-aem-headless-forms/public/index.html para edição e defina o título.

Próxima etapa

Por padrão, o kit inicial usa os componentes Espectro da Adobe para renderizar o formulário. Você pode criar e usar seus próprios componentes ou componentes de terceiros. Por exemplo, usando a Google Material UI ou a Chakra UI.

Vamos usar a Interface do Usuário do Material do Google para renderizar o formulário Contact Us.