Crear una acción de envío personalizada para un Forms adaptable (componentes principales)

Una acción de envío permite a los usuarios seleccionar el destino de los datos capturados desde un formulario y definir la funcionalidad adicional que se ejecutará al enviarlo. AEM El formulario de datos admite varias acciones de envío listas para usar (OOTB), como enviar un correo electrónico o guardar datos en SharePoint o OneDrive.

También puede crear una acción de envío personalizada para agregar una funcionalidad que no esté incluida en las opciones predeterminadas. Por ejemplo, integre los datos del formulario con una aplicación de terceros o envíe un déclencheur de notificación SMS personalizado en función de los datos introducidos por el usuario.

Requisitos previos

Antes de empezar a crear la primera acción de envío personalizada para Forms adaptable, asegúrese de que dispone de lo siguiente:

  • Editor de texto sin formato (IDE): Aunque cualquier editor de texto sin formato puede funcionar, un entorno de desarrollo integrado (IDE) como Microsoft Visual Studio Code ofrece características avanzadas para facilitar la edición.

  • Git: este sistema de control de versiones es necesario para administrar los cambios de código. Si no lo tiene instalado, descárguelo de https://git-scm.com.

Creación de la primera acción de envío personalizada para el formulario

El diagrama siguiente muestra los pasos para crear una acción de envío personalizada para un formulario adaptable:

Flujo de trabajo de acción de envío personalizado {width="50%,"}

Clone el repositorio Git de AEM as a Cloud Service.

  1. Abra la línea de comandos y seleccione un directorio para almacenar el repositorio de AEM as a Cloud Service, como /cloud-service-repository/.

  2. Ejecute el siguiente comando para clonar el repositorio:

    code language-none
    git clone https://git.cloudmanager.adobe.com/<organization-name>/<app-id>/
    

    ¿Dónde se encuentra esta información?

    Para obtener instrucciones paso a paso sobre cómo localizar estos detalles, consulte el artículo de Adobe Experience League “Acceder a Git”.

    Su proyecto está listo.

    Cuando el comando se complete correctamente, verá que se ha creado una nueva carpeta en su directorio local. Esta carpeta recibe el nombre de su aplicación (por ejemplo, app-id). Esta carpeta contiene todos los archivos y el código descargados del repositorio de Git de AEM as a Cloud Service. Puede encontrar <appid> para su proyecto de AEM en el archivo archetype.properties.

    Propiedades de tipo de archivo

    En esta guía, nos referimos a esta carpeta como [AEMaaCS project directory].

Agregar nueva acción de envío

  1. Abra la carpeta del repositorio en un editor.

    Repositorio clonado

  2. Vaya al siguiente directorio dentro de su [AEMaaCS project directory]:

    code language-none
    /ui.apps/src/main/content/jcr_root/apps/<app-id>/
    

    Importante: reemplace <app-id> por su ID de aplicación real.

  3. Cree una nueva carpeta para la acción de envío personalizada y asígnele un nombre de su elección. Por ejemplo, asigne a la carpeta el nombre customsubmitaction.

    Crear carpeta de acciones de envío personalizada

  4. Vaya al directorio de acciones de envío personalizado agregado.

    Dentro de su [AEMaaCS project directory], vaya a la siguiente ruta:

    /ui.apps/src/main/content/jcr_root/apps/<app-id>/customsubmitaction/

    Important: reemplazar <app-id> con su ID de aplicación real.

  5. Cree un nuevo archivo de configuración.
    Dentro de la carpeta customsubmitaction, cree un nuevo archivo con el nombre .content.xml.

    Crear archivo de configuración

  6. Abra este archivo y pegue el siguiente contenido; reemplace [customsubmitaction] por el nombre de su acción de envío

    code language-none
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:description="[customsubmitaction]"
    jcr:primaryType="sling:Folder"
    
    guideComponentType="fd/af/components/guidesubmittype"
    guideDataModel="basic,xfa,xsd"
    submitService="[customsubmitaction]"/>
    

    Por ejemplo, reemplace [customsubmitaction] por su nombre de acción de envío personalizado como Custom Submit Action.

    Crear archivo de configuración de acción de envío personalizado

    note note
    NOTE
    Recuerde el nombre de [customsubmitaction], ya que el mismo nombre aparecerá en la lista desplegable Submit action durante la creación de un formulario.

Incluir la nueva carpeta enfilter.xml

  1. Vaya al archivo /ui.apps/src/main/content/META-INF/vault/filter.xml en su [directorio del proyecto AEMaaCS].

  2. Abra el archivo y añada la siguiente línea al final:

    code language-none
    <filter root="/apps/<app-id>/[customsubmitaction-folder]"/>
    

    Por ejemplo, agregue la línea de código siguiente para agregar la carpeta customsubmitaction en el archivo filter.xml:

    code language-none
    <filter root="/apps/wknd/customsubmitaction"/>
    

    Agregue las carpetas creadas en el filter.xml

  3. Guarde los cambios.

Implemente el servicio para la acción de envío agregada.

  1. Vaya al siguiente directorio dentro de su [AEMaaCS project directory]:
    /core/src/main/java/com/<app-id>/core/service/
    Important: reemplazar <app-id> con su ID de aplicación real.

  2. Cree un nuevo archivo Java para implementar el servicio para la acción de envío agregada. Por ejemplo, agregue el nuevo archivo Java como CustomSubmitService.java.

    Carpeta de acción de envío personalizada

  3. Abra este archivo y agregue el código para la implementación de acción de envío personalizada.

    Por ejemplo, el siguiente código Java es un servicio OSGi que administra el envío del formulario registrando los datos enviados y devuelve un estado OK. Agregue el siguiente código al archivo CustomSubmitService.java:

    code language-none
    package com.wknd.core.service;
    
    import com.adobe.aemds.guide.model.FormSubmitInfo;
    import com.adobe.aemds.guide.service.FormSubmitActionService;
    import java.util.HashMap;
    import java.util.Map;
    import org.osgi.service.component.annotations.Component;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
        @Component(
        service = FormSubmitActionService.class,
        immediate = true
            )
        public class CustomSubmitService implements FormSubmitActionService {
    
        private static final String serviceName = "Custom Submit Action";
    
        private static Logger log = LoggerFactory.getLogger(CustomSubmitService.class);
    
        @Override
        public String getServiceName() {
        return serviceName;
        }
    
        @Override
        public Map<String, Object> submit(FormSubmitInfo formSubmitInfo) {
        String data = formSubmitInfo.getData();
        log.info("Using custom submit action service, [data] --> " + data);
        Map<String, Object> result = new HashMap<>();
        result.put("status", "OK");
        return result;
         }
        }
    

    Servicio de acción de envío personalizada

  4. Guarde los cambios.

Implemente el código de.

Implementar código para el entorno de desarrollo local

  • Implemente AEM as a Cloud Service [AEMaaCS project directory] en el entorno de desarrollo local para probar la nueva acción de envío en el equipo local. Para implementarlo en su entorno de desarrollo local:

    1. Asegúrese de que el entorno de desarrollo local esté activo y en funcionamiento. Si aún no ha configurado un entorno de desarrollo local, consulte la guía de Configuración de un entorno de desarrollo local para AEM Forms.

    2. Abra la ventana del terminal o el símbolo del sistema.

    3. Vaya a [AEMaaCS project directory].

    4. Ejecute el siguiente comando:

      code language-none
      mvn -PautoInstallPackage clean install
      

      Implementación local

Implementar el código para el entorno de Cloud Service

  • Implemente AEM as a Cloud Service [AEMaaCS project directory] en el entorno de su Cloud Service. Para implementarlo en el entorno de Cloud Service:

    1. Confirme los cambios:

      Después de agregar la nueva configuración de acción de envío personalizada, confirme los cambios con un mensaje Git claro. (Por ejemplo, "Se ha añadido una nueva acción de envío personalizada").

    2. Implemente el código actualizado:

      Active una implementación del código a través de la canalización de pila completa existente. Genera e implementa automáticamente el código actualizado con la nueva compatibilidad de acción de envío personalizada.

      Si aún no ha configurado una canalización, consulte la guía sobre cómo configurar una canalización para AEM Forms as a Cloud Service.

      Implementación en la nube

      ¿Cómo confirmar la instalación?

      Una vez que el proyecto se haya creado correctamente, la acción de envío personalizada aparece en la lista desplegable Submit action durante la creación de un formulario.

      Lista desplegable Acción de envío personalizada

    Su entorno ya está listo para usar la acción de envío personalizada agregada al crear un formulario.

Vista previa de un formulario adaptable con una acción de envío recién agregada

  1. Inicie sesión en la instancia de AEM Forms as a Cloud Service.

  2. Vaya a Formularios > Formularios y documentos.

    Forms y documentos

  3. Seleccione un formulario adaptable y haga clic en Editar. El formulario se abrirá en modo de edición.

    Editar formulario

  4. Abra el Explorador de contenido y seleccione el componente Contenedor de guía del formulario adaptable.

  5. Haga clic en el icono de propiedades del contenedor de guía Propiedades de guía . Se abre el cuadro de diálogo Contenedor de formulario adaptable.

  6. Abra la pestaña Envío.

  7. En la lista desplegable Enviar acción, seleccione la acción de envío. Por ejemplo, seleccione la acción de envío como Custom Submit Action.

    Formulario de envío personalizado

  8. Complete el formulario y envíelo.

    Enviar formulario

    Mensaje de agradecimiento

    Una vez que el formulario se haya enviado correctamente, puede comprobar la configuración de la consola web de Adobe Experience Manager para comprobar la acción de envío personalizada en el entorno de desarrollo local.

  9. Vaya a http://<host>:<port>/system/console/configMgr.

  10. Vaya a Compatibilidad con registros de la consola web de Adobe Experience Manager en http://<host>:<port>/system/console/slinglog.

    Administrador de configuración

  11. Haga clic en la opción logs/error.log.
    Abrir archivo error.log

  12. Abra el archivo error.log para ver que se le han agregado los datos.

    archivo error.log

    note note
    NOTE
    Para ver los registros de errores en el entorno de AEM as a Cloud Service, puede utilizar Splunk.

Artículos relacionados

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab