Genere formularios atractivos utilizando componentes principales y formularios adaptables sin encabezado en AEM Forms as a Cloud Service

Abra el explorador e introduzca la dirección URL del entorno de creación de Cloud Service. Por ejemplo:
https://author-p105303-e986623.adobeaemcloud.com/ui#/aem/aem/start.html

Inicie sesión en el entorno de creación de Cloud Service.

Para ir hasta la interfaz de usuario de AEM Forms, haga clic en Formularios > Formularios y documentos.

Descarte cualquier elemento emergente relacionado con las preferencias o la información. Se muestran todos los formularios disponibles.

Cree un punto final de envío para el formulario:

1. Abra https://requestbin.com/ en una nueva pestaña del explorador.

2. Haga clic en Crear un grupo público y copie la dirección URL del punto final.
   

   

Cree un formulario adaptable mediante la interfaz del asistente:

1. En la pestaña del explorador utilizada en la Lección 1, vaya a la interfaz web de AEM Forms as Cloud Service y a Formularios y documentos.
   

2. Haga clic en Crear y seleccione Formulario adaptable.
   

3. Seleccione la plantilla En blanco con componentes principales de la pantalla de selección de plantillas como se muestra a continuación:
   

4. Haga clic en la pestaña Estilo y seleccione wknd-theme como se muestra a continuación:
   

5. Haga clic en la pestaña Envío y seleccione la tarjeta Enviar al punto final de REST y especifique el grupo público en el campo URL de la petición POST como se muestra a continuación:
   

6. Haga clic en Crear. Especifique un nombre y título para el formulario. Por ejemplo, registro. Haga clic en Crear.

7. Se abre el editor de formularios adaptables. Descarte cualquier ventana emergente o diálogo para obtener preferencias o información. Haga clic en el explorador de componentes en el carril izquierdo y añada los componentes Encabezado y Pie de página, respectivamente, en la parte superior e inferior del formulario en blanco.
   

8. Arrastre y suelte los componentes desde el Explorador de componentes para crear un formulario, de forma similar a lo siguiente:

   

Agregue validaciones al formulario:

1. Haga clic en el componente Número de teléfono para que se muestre el menú emergente. Haga clic en el componente icono de llave inglesa en el menú para configurar el campo.

2. Abra la pestaña Validaciones, marque el campo Requerido y haga clic en Listo. Se muestra el mensaje de éxito.
   

   

Previsualice y envíe el formulario.

1. Haga clic en Vista previa para obtener una vista previa del formulario desde la perspectiva de usuario final.

2. Rellene el formulario con datos ficticios.

3. Enviar el formulario.
   

4. En la pestaña Grupo de solicitudes, compruebe los datos enviados.
   

Agregue interactividad al formulario con reglas:

1. Haga clic en el componente Marque la casilla para recibir un 5 % de descuento. En la barra de herramientas de opciones, haga clic en el icono Reglas. Se abre la opción Editor de reglas.

2. Cree una regla: cuando la opción Marque la casilla para recibir un 5 % de descuento está seleccionada, las opciones para aplicar tarjeta de crédito están desactivadas.

Publicar el formulario.

1. Abra la interfaz de administración de AEM Forms, por ejemplo, https://author-p105303-e986623.adobeaemcloud.com/ui%23/aem/aem/forms.html/content/dam/formsanddocuments y seleccione el formulario.

2. Haga clic en Publicar.

   

   Se muestra el mensaje de éxito.

   

   La URL de publicación del formulario es similar a https://publish-p105303-e986623.adobeaemcloud.com/content/forms/af/registration.html.

3. Para ver el formulario publicado, reemplace el ID de programa (pXXXXXX) y el ID de entorno (eXXXXXX) en la URL anterior con los ID de su
   entorno.

Abra el símbolo del sistema o shell con derechos de administrador:

En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git

cd c:\git

Use el siguiente comando para clonar el código front-end del tema:

git clone -b WKND https://github.com/adobe/aem-forms-theme-canvas

Use el siguiente comando en el orden de la lista para ir al directorio aem-forms-theme-canvas y abra Visual Studio Code.

cd aem-forms-theme-canvas
code .

Seleccione Confiar en los autores de todos los archivos de la carpeta principal y haga clic en Sí, confío en los autores.

Para procesar el formulario alojado en el entorno de publicación de su servicio en la nube, cambie el nombre del archivo env_template. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione la opción Cambiar nombre.

Establezca los siguientes valores para las variables del archivo .env y guarde el archivo:

• AEM_URL: especifique el entorno de publicación de su servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com/.

• AEM_ADAPTIVE_FORM: especifique la ruta del formulario. Por ejemplo, si la ruta del formulario es /content/forms/af/registration, el valor de esta variable sería registration.

  

Cree un usuario local en el entorno AEM.

NOTE

Para crear un usuario local, haga lo siguiente:
Vaya a AEM Home > Tools > Security > Users
Asegúrese de que el usuario sea miembro del grupo de usuarios de formularios.

En la ventana Símbolo del sistema, ejecute el siguiente comando:

npm install

NOTE

• Si recibe un mensaje pidiendo que actualice npm a través del comando npm notice Run npm nstall -g npm@9.6.0, ignore el mensaje.
• No ejecute otros comandos npm a menos que se indique en el libro de trabajo.

Ejecute el siguiente comando para obtener una vista previa del formulario.

npm run live

Una vez ejecutado el comando anterior, espere al mensaje de webpack compiled y se le redirigirá a una página de inicio de sesión de AEM.

Haga clic en Iniciar sesión localmente (solo para tareas de administración) en la página de inicio de sesión de AEM.

Introduzca las credenciales del usuario local creado y el formulario se mostrará en una pestaña del explorador.

NOTE

Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm run live durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador a 127.0.0.1 y pulse Intro.

En Visual Studio Code, abra el archivo PROJECT\src\site\_variables.scss. Observe que el color de $error es un tono de rojo.

En el explorador, envíe el formulario para ver el color rojo en el campo Nombre.

Configure el color del $error en #5736eb, y guarde el archivo.

Actualice el explorador y envíe el formulario. El color del error del aviso en el campo de nombre ha cambiado como corresponde.

En el símbolo del sistema, presione CTRL+C, escriba Y, y pulse la tecla Intro para finalizar el proceso de npm. Es importante detener el servidor npm para que no entre en conflicto con el siguiente conjunto de ejercicios.

Cierre las ventanas de Visual Studio Code y del símbolo del sistema.

Abra el símbolo del sistema con derechos de administrador.

En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git

cd c:\git

Utilice el siguiente comando para clonar el proyecto de inicio de reacción del formulario adaptable:

git clone https://github.com/adobe/react-starter-kit-aem-headless-forms

Utilice los siguientes comandos en el orden de la lista para ir al directorio react-starter-kit-aem-headless-forms y abra Visual Studio Code.

cd react-starter-kit-aem-headless-forms

code .

Se abre la ventana de Visual Studio Code.

Cambie el nombre del archivo env_template a .env. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione la opción Cambiar nombre.

Establezca los siguientes valores para las variables del archivo .env. Después de actualizar las variables, guarde el archivo.

• AEM_URL: especifique la URL del entorno de publicación del servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com.

• AEM_FORM_PATH: especifique la ruta del formulario adaptable creado en la lección anterior. Por ejemplo, /content/forms/af/registration/.

  

Abra la ventana Comandos, compruebe que se encuentra en el directorio react-starter-kit-aem-headless-forms y ejecute el siguiente comando:

npm install

En la ventana Símbolo del sistema, ejecute el siguiente comando:

npm start

El comando anterior inicia el servidor de desarrollo local que procesa la definición del formulario recuperada de AEM de una forma sin encabezado utilizando la biblioteca de front-end del espectro de reacción.

NOTE

Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm start durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador a 127.0.0.1 y pulse Intro.

Seleccione la opción Marque la casilla para recibir un 5 % de descuento. La opción posterior para solicitar tarjeta de crédito está desactivada.

Desactive Marque la casilla para recibir un 5 % de descuento para habilitar la opción de tarjeta de crédito.

Abra la interfaz de administración de AEM Forms en el explorador. Por ejemplo, https://author-p105303-e986623.adobeaemcloud.com/ui#/aem/aem/forms.html/content/dam/formsanddocuments.

Seleccione el formulario Contáctenos y haga clic en Editar. Abre el formulario en el editor de formularios adaptables.

Seleccione el campo Número de teléfono y haga clic en el icono Editar (icono de lápiz) en la barra de herramientas. Si no puede ver la barra de herramientas emergente, cambie al modo de edición haciendo clic en el botón Editar en la parte superior derecha, a la izquierda del botón Vista previa.

Cambie la etiqueta a Número de móvil. Haga clic en cualquier espacio vacío del formulario y se guardarán los cambios realizados en él.

En la pestaña de la interfaz de administración de AEM Forms, seleccione el formulario de registro y haga clic en Cancelar la publicación. Si no ve el botón Cancelar la publicación, vaya al paso 3 para publicar los cambios directamente.

Haga clic en Cancelar la publicación. Haga clic en Cerrar en el cuadro de diálogo correspondiente.

Después de actualizar el explorador, seleccione el formulario de registro y haga clic en Publicar.

Haga clic en Publicar. Haga clic en Cerrar en el cuadro de diálogo correspondiente.

Actualice la pestaña del explorador con el formulario sin encabezado mostrado. Tenga en cuenta que la etiqueta de número de teléfono ha cambiado a Número de móvil.

Abra la ventana del símbolo del sistema que se utiliza para iniciar el proyecto react-starter-kit-aem-headless-forms, pulse CTRL+C y, a continuación, introduzca Y y pulse la tecla Intro para finalizar el proceso de npm. Es importante detener el servidor npm para que no entre en conflicto con el siguiente conjunto de ejercicios.

Cierre las ventanas de Visual Studio Code y del símbolo del sistema.

Abra el símbolo del sistema con derechos de administrador.

En el símbolo del sistema, utilice el siguiente comando para desplazarse a la carpeta c:\git:

cd c:\git

Ejecute los siguientes comandos en el orden indicado para crear una carpeta denominada mui y vaya a esta utilizando los siguientes comandos:

mkdir mui

cd mui

Utilice el siguiente comando para clonar el proyecto de inicio de reacción del formulario adaptable:

git clone -b mui-lab https://github.com/adobe/react-starter-kit-aem-headless-forms

Utilice el siguiente comando en el orden de la lista para ir a la carpeta react-starter-kit-aem-headless-forms y abra el código en Visual Studio Code:

cd react-starter-kit-aem-headless-forms

code .

Cambie el nombre del archivo env_template a .env. Para cambiar el nombre, haga clic con el botón derecho en el archivo env_template y seleccione Cambiar nombre.

Establezca los siguientes valores para las variables del archivo .env. Después de actualizar las variables, guarde el archivo. Utilice la combinación de teclas CTRL + S para guardar el archivo.

• AEM_URL: especifique la URL del entorno de publicación del servicio en la nube. Por ejemplo, https://publish-p105303-e986623.adobeaemcloud.com

• AEM_FORM_PATH: especifique la ruta del formulario adaptable creado en la lección anterior. Por ejemplo, /content/forms/af/registration/

  

Abra la ventana de comandos, asegúrese de que está en el directorio react-starter-kit-aem-headless-forms y ejecute el siguiente comando:

npm install

En la ventana Símbolo del sistema, ejecute el siguiente comando:

npm start

El comando inicia un servidor de desarrollo local y procesa la definición de formulario recuperada de AEM en una forma sin encabezado mediante la biblioteca de front-end de la IU de Google Material.

NOTE

Si aparece una pantalla en blanco en el explorador después de ejecutar el comando npm start durante más de tres o cuatro minutos, cambie localhost en la dirección URL del explorador a 127.0.0.1 y pulse Intro.

Para evaluar la ejecución de la misma lógica empresarial en esta representación de formulario:

Seleccione Marque la casilla para recibir un 5 % de descuento. La opción siguiente ¿Desea solicitar el formulario de tarjeta de crédito corporativa We.Finance? se deshabilita.

En Visual Code, vaya al componente de entrada de texto abriendo el archivo index.tsx en src/components/textinput/index.tsx.

Agregue // al principio de la línea de código 103. Convierte la línea en un comentario.

//const Cmp = \'outlined\' === appliedCssClassNames ? OutlinedInput: Input;

Agregue lo siguiente en la línea 104 para utilizar una variante diferente de componente y guardar el archivo. Utilice la combinación de teclas CTRL + S para guardar el archivo.

const Cmp = OutlinedInput;

Es esencial utilizar correctamente las mayúsculas y minúsculas para la variante “OutinedInput”, de lo contrario la compilación fallaría. La compilación del entorno de desarrollo local comienza automáticamente con el símbolo del sistema. Espere hasta que vea el siguiente mensaje

webpack 5.75.0 compiled with 3 warnings in 6659 ms
inside proxy req
setting new origin header

Actualice el navegador, si no se actualiza automáticamente, para ver que el componente de entrada de texto utiliza una variante diferente.

Este cambio se produce para usuarios finales sin ningún cambio en la definición del formulario en el servidor de AEM Forms y es específico para el canal sin encabezado que se está considerando. Por ejemplo, el canal web en este laboratorio.

Cierre las ventanas de Visual Studio Code y del símbolo del sistema.