Introducción: Tutorial para desarrolladores
En la era digital de hoy en día, la creación de formularios fáciles de usar es esencial para cualquier organización. Edge Delivery Services para AEM Forms (EDS) le permite crear formularios utilizando herramientas conocidas como Google Docs y Microsoft Office.
Estos formularios envían datos directamente a un archivo de Microsoft Excel o Google Sheets, lo que le permite utilizar un ecosistema dinámico y API sólidas de Google Sheets, Microsoft Excel y Microsoft SharePoint para procesar fácilmente los datos enviados o iniciar un flujo de trabajo empresarial existente.
AEM Forms proporciona un bloque, conocido como bloque de Formularios adaptables, para ayudarle a crear fácilmente formularios para capturar y almacenar los datos capturados. Puede crear un nuevo proyecto de AEM preconfigurado con el bloque de Formularios adaptables o añadir el bloque de Formularios adaptables a un proyecto de AEM existente.
Este tutorial de AEM Forms le guía a través de la creación, la previsualización y la publicación de su propio formulario personalizado con un nuevo proyecto de Adobe Experience Manager (AEM) Forms.
Requisitos previos
- Tiene una cuenta de GitHub y comprende los conceptos básicos de Git.
- Tiene una cuenta de Google o Microsoft SharePoint.
- Comprende los conceptos básicos de HTML, CSS y JavaScript.
- Ha instalado Node/npm para el desarrollo local.
Atención. Este tutorial utiliza macOS, Chrome y Visual Studio Code. Aunque los pasos se pueden adaptar para otras configuraciones, las capturas de pantalla y los elementos específicos de la IU pueden diferir según el sistema operativo, el explorador y el editor de código que haya elegido.
Creación de un nuevo proyecto de AEM preconfigurado con el bloque de Formularios adaptables
La plantilla repetitiva de AEM Forms le permite empezar rápidamente con un proyecto de AEM preconfigurado con el bloque de Formularios adaptables. Es la forma más rápida y sencilla de seguir las prácticas recomendadas de AEM y empezar a crear formularios de forma directa.
Introducción a la plantilla de repositorio repetitiva de AEM Forms
-
Cree un repositorio de GitHub para su proyecto de AEM. Para crear un repositorio, haga lo siguiente:
-
Vaya a https://github.com/adobe-rnd/aem-boilerplate-forms.
-
Haga clic en la opción Usar esta plantilla y seleccione la opción Creación de un nuevo repositorio. Se abrirá la pantalla Crear un nuevo repositorio.
-
En la pantalla Crear un nuevo repositorio, seleccione el propietario, y especifique el Nombre del repositorio. Adobe recomienda que el repositorio se establezca en Público. Seleccione la opción público y haga clic en Crear repositorio.
-
-
Instale la aplicación de GitHub de sincronización de código de AEM en su repositorio. Para instalar, haga lo siguiente:
- Vaya a https://github.com/apps/aem-code-sync/installations/new.
- En la pantalla Instalar sincronización de código de AEM, seleccione la opción Seleccionar solo repositorios y el repositorio recién creado. Haga clic en Guardar.
note note NOTE Si utiliza GitHub Enterprise con filtrado de IP, puede agregar la siguiente IP a la lista de permitidos: 3.227.118.73 Enhorabuena. Tiene un nuevo sitio web en ejecución
https://<branch>--<repo>--<owner>.hlx.page/
.<branch>
hace referencia a la rama del repositorio de GitHub.<repository>
indica su repositorio de GitHub.<owner>
hace referencia al nombre de usuario de la cuenta de GitHub que aloja el repositorio de GitHub.
Por ejemplo, si el nombre de la rama es
main
, el repositorio,wefinance
y el propietario,wkndforms
, el sitio web estaría en funcionamiento en https://main–wefinance–wkndforms.hlx.page/.
Vincular su propio origen de contenido
El repositorio de GitHub recién creado apunta al contenido de ejemplo almacenado en una carpeta de Google Drive. Este contenido de solo lectura proporciona un buen punto de partida para los formularios. No dude en copiarlo en su propio Google Drive y personalizarlo para adaptarlo a sus necesidades.
Para copiar el contenido de muestra en su propia carpeta de contenido y dirigir el repositorio de GitHub a su propia carpeta de contenido, haga lo siguiente:
-
Cree una nueva carpeta específica para el contenido de AEM en Google Drive o Microsoft SharePoint. Este documento utiliza una carpeta creada en Microsoft SharePoint.
-
Comparta la carpeta con el usuario de Adobe Experience Manager (helix@adobe.com).
Asegúrese de haber proporcionado derechos de edición sobre la carpeta al usuario de Adobe Experience Manager.
-
Copie el contenido de ejemplo almacenado en la carpeta de Google Drive a su carpeta. Para copiar, haga lo siguiente:
-
Descargue los archivos juntos o de forma individual.
Los archivos
nav
yfooter
definen el diseño básico de las páginas y cambian con poca frecuencia a lo largo de un proyecto. También tienen una estructura específica diferente de la mayoría de los demás archivos de contenido. Al examinar estos archivos, podrá hacerse una idea de cómo se organiza el contenido en los proyectos AEM. -
Cargue estos archivos en la carpeta Microsoft SharePoint o Google Drive.
Asegúrese de copiar la hoja
enquiry
del contenido de ejemplo a su carpeta en Google Drive o Microsoft SharePoint. Esta contiene la estructura de un formulario de ejemplo.
-
-
Ahora que tiene la carpeta de contenido configurada, es hora de vincularla al proyecto en GitHub que creó anteriormente con el elemento repetitivo de AEM Forms. Para conectarse, haga lo siguiente:
-
Vaya al repositorio de GitHub que creó anteriormente con el elemento repetitivo de AEM Forms.
-
Abra
fstab.yaml
para editarlo. -
Reemplace la referencia existente por la ruta de acceso a la carpeta que compartió con el usuario de AEM (helix@adobe.com).
Si utiliza Microsoft SharePoint, la ruta de la carpeta utiliza el siguiente formato:
code language-html https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>
Por ejemplo,
code language-html https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance
Para obtener más información sobre la administración de archivos en Microsoft SharePoint, consulte Cómo utilizar Adobe SharePoint.
-
Confirme el archivo actualizado
fsatb.yaml
, una vez que haya actualizado la referencia y todo se vea bien. Si tiene algún problema con la compilación, consulte Solución de problemas de compilación de GitHub.Esto conecta la carpeta de contenido con el sitio web. Después de actualizar la referencia, es posible que experimente inicialmente el error “404 Not Found”. Esto se debe a que el contenido aún no se ha previsualizado. En la siguiente sección se explica cómo empezar a crear y previsualizar el contenido.
-
Previsualización y publicación del contenido
Después de completar el último paso, el nuevo origen de contenido no está vacío, pero no será visible en el sitio web hasta que se promocione a la vista previa o a las fases en directo. Actualmente, esto puede causar errores del tipo 404.
Para una vista previa del contenido sin publicar, haga lo siguiente:
-
Instale la extensión de Chrome llamada AEM Sidekick.
Después de instalar la extensión en Chrome, no se olvide de fijarla, esto facilita su búsqueda.
-
Para configurar la extensión Sidekick Chrome, vaya a la carpeta previamente compartida de Google Drive o Microsoft SharePoint y, a continuación, haga clic con el botón derecho en el icono de extensión de la barra de herramientas del explorador y seleccione
Add this project
.Cuando se instale la extensión y se añada el proyecto, estará listo para obtener una vista previa del contenido de Google Drive y publicarlo.
-
Seleccione todos los documentos de la carpeta Microsoft SharePoint o Google Drive. Para seleccionar varios documentos, mantenga pulsada la tecla Ctrl (Windows/Linux) o Cmd (Mac) mientras hace clic.
-
Haga clic en el icono AEM Sidekick anclado a la barra de extensiones de Chrome. Aparece una barra de herramientas en la pantalla. Puede elegir una vista previa del contenido o publicarlo.
Si ha copiado los archivos
index
,nav
,footer
yenquiry
, todos ellos son documentos independientes con sus propios ciclos de vista previa y publicación, por lo que debe asegurarse de previsualizar (y publicar) todos ellos.Al obtener una vista previa de los archivos, las nuevas pestañas del explorador muestran los documentos. Para obtener una vista previa del formulario de ejemplo, vaya a la siguiente URL:
code language-html https://<branch>--<repository>--<owner>.hlx.live
<branch>
hace referencia a la rama del repositorio de GitHub.<repository>
indica su repositorio de GitHub.<owner>
hace referencia al nombre de usuario de la cuenta de GitHub que aloja el repositorio de GitHub.
URL
https://<branch>--<repo>--<owner>.hlx.page/enquiry
.Por ejemplo, si el repositorio de su proyecto se denomina “wefinance”, está ubicado en el propietario de la cuenta “wkndforms” y utiliza la rama “principal”, la dirección URL es la siguiente:
Creación de un formulario
El contenido de ejemplo incluye una hoja de “consulta” que sirve como plantilla para el formulario de “consulta”. Cada fila de la hoja representa un campo de formulario, y los encabezados de columna definen las propiedades de campo. Este formulario de ejemplo le proporciona una ventaja inicial en la creación del formulario.
Empecemos por actualizar la etiqueta de campo. Abra la hoja “consulta” para editarla, cambie la etiqueta del botón de envío a Let's Chat
y utilice AEM Sidekick para obtener una vista previa y publicar el archivo.
Al obtener una vista previa o publicar el archivo, aparece una versión JSON del archivo en una nueva pestaña. Copie la URL de vista previa (.hlx.page) o publicación (.hlx.live) del archivo.
Abra el archivo enquiry
y reemplace la URL en el bloque de formulario por la URL del archivo copiado en el paso anterior. Asegúrese de que la dirección URL sea un hipervínculo.
Utilice AEM Sidekick para previsualizar y publicar el documento de consulta.
Para obtener una vista previa del formulario de consulta actualizado, vaya a la siguiente URL:
https://<branch>--<repository>--<owner>.hlx.page/enquiry
La etiqueta del botón Enviar se actualiza a Let's Chat
.
Para obtener información detallada sobre la creación y publicación de un nuevo formulario, visite la guía creación de un formulario.
Empiece a desarrollar el estilo y la funcionalidad
Para ponerse en marcha con un entorno de desarrollo de AEM local en poco tiempo, haga lo siguiente:
-
Instale la CLI de AEM: esta simplifica las tareas de desarrollo. Vamos a instalarla globalmente con npm:
code language-bash npm install -g @adobe/aem-cli
-
Clone su proyecto de GitHub: clone su repositorio de proyecto desde GitHub mediante el siguiente comando, reemplazando con el propietario del repositorio y con el nombre del repositorio:
code language-none git clone https://github.com/<owner>/<repo>
-
Inicie su entorno local: vaya al directorio del proyecto y active la instancia de AEM local con un solo comando.
code language-none cd <repo> aem up
La carpeta Bloque de Formularios adaptables blocks/form
es su patio de recreo para el estilo y el código de sus formularios. Edite cualquiera de los archivos .css
o .js
dentro de este directorio; verá los cambios reflejados instantáneamente en su navegador.
¿Está listo para mostrar su creación? Utilice Git para confirmar e insertar los cambios. Esto actualiza los entornos de vista previa y producción accesibles en estas direcciones URL (reemplace los marcadores de posición por los detalles del proyecto):
Vista previa: https://<branch>--<repo>--<owner>.hlx.page/
Producción: https://<branch>--<repo>--<owner>.hlx.live/
Enhorabuena. Ha configurado correctamente su entorno de desarrollo local e implementado los cambios.
Añadir un bloque de formularios adaptables al proyecto de AEM existente
Si tiene un proyecto de AEM existente, puede integrar el bloque de formularios adaptables en su proyecto actual para empezar a crear formularios.
Para integrar, haga lo siguiente:
-
Clone el repositorio del bloque de formularios adaptables: https://github.com/adobe-rnd/aem-boilerplate-forms a su equipo.
-
Dentro de la carpeta descargada, busque la carpeta
blocks/form
. Cópiela. A continuación, vaya a la carpeta local del proyecto de AEMblocks
y pegue la carpeta de formulario copiada aquí. -
Confirme e inserte estos cambios en su proyecto de AEM en GitHub.
Eso es todo. El bloque de formularios adaptables ahora forma parte de su proyecto de AEM. Puede empezar a crear y agregar formularios a las páginas de AEM.
Solución de problemas de compilación de GitHub
Asegúrese de que el proceso de generación de GitHub sea fluido y aborde los posibles problemas:
-
Resolver error de ruta del módulo:
Si aparece el error "No se puede resolver la ruta al módulo "'…/…/scripts/lib-franklin.js"", vaya al archivo [Proyecto EDS]/blocks/forms/form.js. Actualice la instrucción de importación reemplazando el archivo lib-franklin.js por aem.js. -
Controlar errores de linting:
Si encuentra algún error de linting, puede omitirlo. Abra el archivo [EDS Project]/package.json y modifique la secuencia de comandos “lint” desde"lint": "npm run lint:js && npm run lint:css"
hasta"lint": "echo 'skipping linting for now'"
. Guarde el archivo y confirme los cambios en su proyecto de GitHub.
Consulte también
- Introducción a Edge Delivery Services para AEM Forms
- Crear un formulario con Google Sheets o Microsoft Excel
- Configurar Google Sheets o los archivos de Microsoft Excel para empezar a aceptar datos
- Publicar el formulario y empezar a recopilar datos
- Personalizar el aspecto de los formularios
- Añadir secciones repetibles a un formulario
- Mostrar un mensaje de agradecimiento personalizado después del envío del formulario
- Componentes de bloque de formulario adaptable y sus propiedades