Criar uma ação de envio personalizada para o Forms adaptável (Componentes principais)

Uma ação de envio permite que os usuários selecionem o destino dos dados capturados de um formulário e definam funcionalidades adicionais a serem executadas no envio do formulário. O formulário AEM oferece suporte a várias ações de envio prontas (OOTB), como enviar um email ou salvar dados no SharePoint ou OneDrive.

Você também pode criar uma ação de envio personalizada para adicionar funcionalidades não incluídas nas opções predefinidas. Por exemplo, integre os dados do formulário a um aplicativo de terceiros ou acione uma notificação SMS personalizada com base na entrada do usuário.

Pré-requisitos

Antes de começar a criar sua primeira ação de envio personalizada para o Adaptive Forms, verifique se você tem o seguinte:

  • Editor de Texto sem Formatação (IDE): embora qualquer editor de texto sem formatação possa funcionar, um IDE (Ambiente de Desenvolvimento Integrado) como o Microsoft Visual Studio Code oferece recursos avançados para facilitar a edição.

  • Git: este sistema de controle de versão é necessário para gerenciar alterações de código. Se não estiver instalado, baixe-o de https://git-scm.com.

Criar a primeira ação de envio personalizada para o formulário

O diagrama abaixo descreve as etapas para criar uma ação de envio personalizada para um Formulário adaptável:

Fluxo de trabalho personalizado de ação de envio {width="50%,"}

Clonar o repositório Git do AEM as a Cloud Service.

  1. Abra a linha de comando e escolha um diretório para armazenar seu repositório do AEM as a Cloud Service, como /cloud-service-repository/.

  2. Execute o comando abaixo para clonar o repositório:

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

    Onde encontrar essas informações?

    Para obter instruções passo a passo sobre como localizar esses detalhes, consulte o artigo da Adobe Experience League "Acessando o Git".

    Seu projeto está pronto!

    Quando o comando for concluído com sucesso, você verá uma nova pasta criada no diretório local. Essa pasta é nomeada com base no aplicativo (por exemplo, app-id). Esta pasta contém todos os arquivos e códigos baixados do repositório Git da AEM as a Cloud Service. Você pode encontrar <appid> para seu projeto AEM no arquivo archetype.properties.

    Propriedades do Arquétipo

    Neste guia, nos referimos a essa pasta como [AEMaaCS project directory].

Adicionar nova ação de envio

  1. Abra a pasta do repositório em um editor.

    Repositório clonado

  2. Navegue até o seguinte diretório no [AEMaaCS project directory]:

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

    Importante: substitua <app-id> pela ID do aplicativo real.

  3. Crie uma nova pasta para sua ação de envio personalizada e dê a ela o nome de sua escolha. Por exemplo, nomeie a pasta como customsubmitaction.

    Criar pasta de ação de envio personalizada

  4. Navegue até o diretório de ação de envio personalizado adicionado.

    Em seu [AEMaaCS project directory], navegue até o seguinte caminho:

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

    Important: Substituir <app-id> com a ID real do aplicativo.

  5. Criar novo arquivo de configuração.
    Na pasta customsubmitaction, crie um novo arquivo chamado .content.xml.

    Criar arquivo de configuração

  6. Abra este arquivo e cole o conteúdo a seguir, substituindo [customsubmitaction] pelo nome da sua ação de envio

    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 exemplo, substitua o [customsubmitaction] pelo nome da ação de envio personalizada como Custom Submit Action.

    Criar arquivo de configuração de ação de envio personalizado

    note note
    NOTE
    Lembre-se do nome de [customsubmitaction], pois o mesmo nome aparece na lista suspensa Submit action ao criar um formulário.

Incluir a nova pasta emfilter.xml

  1. Navegue até o arquivo /ui.apps/src/main/content/META-INF/vault/filter.xml no seu [diretório do projeto AEMaaCS].

  2. Abra o arquivo e adicione a seguinte linha no final:

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

    Por exemplo, adicione a seguinte linha de código para adicionar a pasta customsubmitaction no arquivo filter.xml:

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

    Adicionar as pastas criadas no filter.xml

  3. Salve as alterações.

Implementar o serviço para a ação enviar adicionada.

  1. Navegue até o seguinte diretório no [AEMaaCS project directory]:
    /core/src/main/java/com/<app-id>/core/service/
    Important: Substituir <app-id> com a ID real do aplicativo.

  2. Criar novo arquivo Java para implementar o serviço para a ação de envio adicionada. Por exemplo, adicione o novo arquivo Java como CustomSubmitService.java.

    Pasta de Ação de Envio Personalizada

  3. Abra este arquivo e adicione o código para sua implementação de ação de envio personalizada.

    Por exemplo, o código Java abaixo é um serviço OSGi que lida com o envio de formulário registrando os dados enviados e retorna o status OK. Adicionar o seguinte código no arquivo 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;
         }
        }
    

    Serviço de ação de envio personalizado

  4. Salve as alterações.

Implante o código.

Implantar código para ambiente de desenvolvimento local

  • Implante o AEM as a Cloud Service, [AEMaaCS project directory], em seu ambiente de desenvolvimento local para experimentar a nova ação de envio em sua máquina local. Para implantar no ambiente de desenvolvimento local:

    1. Certifique-se de que o ambiente de desenvolvimento local esteja em funcionamento. Se você ainda não tiver configurado um ambiente de desenvolvimento local, consulte o manual em Configurar um ambiente de desenvolvimento local para o AEM Forms.

    2. Abra a janela do terminal ou o prompt de comando.

    3. Navegue até [AEMaaCS project directory].

    4. Execute o seguinte comando:

      code language-none
      mvn -PautoInstallPackage clean install
      

      Implantação local

Implantar o código para o ambiente Cloud Service

  • Implante o AEM as a Cloud Service, [AEMaaCS project directory], no seu ambiente Cloud Service. Para implantar no ambiente de Cloud Service:

    1. Confirme suas alterações:

      Depois de adicionar a nova configuração de ação de envio personalizada, confirme suas alterações com uma mensagem Git clara. (Por exemplo, "Adição de uma nova ação de envio personalizada").

    2. Implante o código atualizado:

      Acione uma implantação do seu código por meio do pipeline de pilha completa existente. Ele cria e implanta automaticamente o código atualizado com o novo suporte personalizado às ações de envio.

      Se você ainda não tiver configurado um pipeline, consulte o manual sobre como configurar um pipeline para o AEM Forms as a Cloud Service.

      Implantação da nuvem

      Como confirmar a instalação?

      Depois que o projeto for compilado com êxito, a ação de envio personalizada aparecerá na lista suspensa Submit action ao criar um formulário.

      Lista Suspensa de Ação de Envio Personalizada

    Seu ambiente agora está pronto para usar a ação de envio personalizada adicionada ao criar um formulário.

Visualizar um formulário adaptável com a ação de envio recém-adicionada

  1. Faça logon na instância as a Cloud Service do AEM Forms.

  2. Ir para Forms > Forms e Documentos.

    Forms e Documentos

  3. Selecione um Formulário adaptável e clique em Editar. O formulário é aberto no modo de edição.

    Editar formulário

  4. Abra o navegador Conteúdo e selecione o componente Contêiner do Guia do seu Formulário adaptável.

  5. Clique no ícone de propriedades do Guia Contêiner Propriedades do Guia . A caixa de diálogo Contêiner de formulário adaptável é aberta.

  6. Clique na guia Envio.

  7. Na lista suspensa Enviar Ação, selecione a ação de envio. Por exemplo, selecione a ação de envio como Custom Submit Action.

    Formulário de envio personalizado

  8. Preencha o formulário e envie-o.

    Enviar Formulário

    Mensagem de agradecimento

    Depois que o formulário for enviado com êxito, você poderá verificar a Configuração do Console da Web do Adobe Experience Manager para verificar a ação da ação de envio personalizada no ambiente de desenvolvimento local.

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

  10. Navegue até o Suporte ao Log do Console da Web do Adobe Experience Manager em http://<host>:<port>/system/console/slinglog.

    ConfigMgr

  11. Clique na opção logs/error.log.
    Abrir arquivo error.log

  12. Abra o arquivo error.log para ver se os dados foram anexados a ele.

    arquivo de log de erros

    note note
    NOTE
    Para exibir logs de erros no ambiente do AEM as a Cloud Service, você pode usar o Splunk.

Artigos relacionados

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