Creación y previsualización de un formulario sin encabezado mediante una aplicación React introduction

El kit de inicio le ayuda a empezar rápidamente mediante una aplicación React. Puede desarrollar y utilizar libremente formularios adaptables sin encabezado en un entorno Angular, Vanilla JS y otros entornos de desarrollo de su elección.

Comenzar con formularios adaptables sin encabezado es bastante fácil y rápido. Clone el proyecto React ya creado, instale las dependencias y ejecute el proyecto. Ya tiene en funcionamiento un formulario adaptable sin encabezado integrado en una aplicación React. Puede utilizar el proyecto React de muestra para crear y probar formularios adaptables sin encabezado antes de implementarlo en un entorno de producción.

Vamos a empezar:

Antes de comenzar pre-requisites

Para crear y ejecutar una aplicación React, debe tener instalado lo siguiente en su equipo:

Introducción

Una vez que cumpla los requisitos, realice los siguientes pasos para empezar:

​1. Configurar el kit de inicio de formularios adaptables sin encabezado install

El kit de inicio es una aplicación React con un formulario adaptable sin encabezado de muestra y las bibliotecas correspondientes. Utilice el kit para desarrollar y probar sus formularios adaptables sin encabezado y los componentes de React correspondientes. Ejecute los siguientes comandos para configurar el kit de inicio de formularios adaptables sin encabezado:

​2. Obtener una vista previa del formulario adaptable sin encabezado preview

Después de configurar el kit de inicio, puede obtener una vista previa del formulario adaptable sin encabezado de muestra y reemplazarlo por su propio formulario personalizado. También puede configurar el kit de inicio para recuperar un formulario de un servidor de AEM Forms. Para obtener una vista previa del formulario

​3. Crear y procesar su propio formulario adaptable sin encabezado custom

Un formulario adaptable sin encabezado representa el formulario y sus componentes, como los campos y los botones, en formato JSON (notación de objetos JavaScript). La ventaja de utilizar el formato JSON es que puede analizarse y utilizarse fácilmente en varios lenguajes de programación, lo que lo convierte en una forma cómoda de intercambiar datos de formulario entre sistemas. Para ver el formulario adaptable sin encabezado de muestra incluido con la aplicación, abra el archivo /react-starter-kit-aem-headless-forms/form-definations/form-model.json.

Vamos a crear un formulario Contact Us con cuatro campos: “Nombre”, “Correo electrónico”, “Número de contacto” y “Mensaje”. Los campos se definen como objetos (elementos) dentro del JSON, y cada objeto (elemento) tiene propiedades como tipo, etiqueta, nombre y obligatorio. El formulario también contiene un botón de tipo “Enviar”. Este es el JSON del formulario.

{
  "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 procesar el formulario, reemplace el JSON del formulario adaptable de muestra /react-starter-kit-aem-headless-forms/form-definations/form-model.json por el JSON anterior, guarde el archivo, espere a que el kit de inicio se compile y actualice el formulario.

Ha procesado correctamente el formulario adaptable sin encabezado.

Bonificación

Definamos el título de la página web que aloja el formulario en Contact Us | WKND Adventures and Travel. Para cambiar el título, abra el archivo react-starter-kit-aem-headless-forms/public/index.html para editar y definir el título.

Siguiente paso

De forma predeterminada, el kit de inicio utiliza los componentes de la gama de Adobe para procesar el formulario. Puede utilizar crear y utilizar sus propios componentes o bien componentes de terceros. Por ejemplo, utilizando la IU de Google Material o la IU de Chakra.

Vamos a utilizar la IU de Google Material para procesar el formulario Contact Us.