Creare un’azione di invio personalizzata per Adaptive Forms (Componenti core)

Un’azione di invio consente agli utenti di selezionare la destinazione dei dati acquisiti da un modulo e di definire funzionalità aggiuntive da eseguire all’invio del modulo. Il modulo AEM supporta più azioni di invio pronte all'uso (OOTB), ad esempio l'invio di un'e-mail o il salvataggio di dati in SharePoint o OneDrive.

Puoi anche creare un'azione di invio personalizzata per aggiungere funzionalità non incluse nelle opzioni predefinite. Ad esempio, integra i dati del modulo con un’applicazione di terze parti o attiva una notifica SMS personalizzata in base all’input dell’utente.

Prerequisiti

Prima di iniziare la creazione della prima azione di invio personalizzata per Adaptive Forms, assicurati di disporre dei seguenti elementi:

  • Editor di testo normale (IDE): mentre qualsiasi editor di testo normale può funzionare, un ambiente di sviluppo integrato (IDE) come Microsoft Visual Studio Code offre funzionalità avanzate per semplificare la modifica.

  • Git: questo sistema di controllo della versione è necessario per la gestione delle modifiche al codice. Se non lo hai installato, scaricalo da https://git-scm.com.

Creare la prima azione di invio personalizzata per il modulo

Il diagramma seguente illustra i passaggi necessari per creare un’azione di invio personalizzata per un modulo adattivo:

Flusso di lavoro per azione di invio personalizzata {width="50%,"}

Clona l’archivio Git di AEM as a Cloud Service.

  1. Aprire la riga di comando e scegliere una directory in cui archiviare l'archivio AEM as a Cloud Service, ad esempio /cloud-service-repository/.

  2. Esegui il comando seguente per clonare l’archivio:

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

    Dove trovare queste informazioni?

    Per istruzioni dettagliate su come individuare questi dettagli, consulta l'articolo di Adobe Experience League "Accesso a Git".

    Il progetto è pronto!

    Al termine del comando viene visualizzata una nuova cartella creata nella directory locale. Questa cartella prende il nome dall’applicazione (ad esempio, app-id). Questa cartella contiene tutti i file e il codice scaricati dall’archivio Git di AEM as a Cloud Service. Puoi trovare <appid> per il progetto AEM nel file archetype.properties.

    Proprietà Archetipo

    In questa guida questa cartella viene indicata come [AEMaaCS project directory].

Aggiungi nuova azione di invio

  1. Apri la cartella dell’archivio in un editor.

    Archivio clonato

  2. Passare alla seguente directory all'interno di [AEMaaCS project directory]:

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

    Importante: sostituisci <app-id> con il tuo ID applicazione effettivo.

  3. Crea una nuova cartella per l’azione di invio personalizzata e assegnagli un nome a tua scelta. Ad esempio, assegnare alla cartella il nome customsubmitaction.

    Crea cartella azioni di invio personalizzate

  4. Passa alla directory dell’azione di invio personalizzata aggiunta.

    All'interno di [AEMaaCS project directory], passa al seguente percorso:

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

    Important: Sostituisci <app-id> con l'ID applicazione effettivo.

  5. Crea un nuovo file di configurazione.
    Nella cartella customsubmitaction, creare un nuovo file denominato .content.xml.

    Crea file di configurazione

  6. Apri il file e incolla il seguente contenuto, sostituendo [customsubmitaction] con il nome dell'azione di invio

    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]"/>
    

    Ad esempio, sostituisci [customsubmitaction] con il nome dell'azione di invio personalizzato Custom Submit Action.

    Crea file di configurazione azione di invio personalizzato

    note note
    NOTE
    Ricordare il nome di [customsubmitaction], poiché lo stesso nome viene visualizzato nell'elenco a discesa Submit action durante la creazione di un modulo.

Includi la nuova cartella infilter.xml

  1. Passa al file /ui.apps/src/main/content/META-INF/vault/filter.xml nella directory del progetto [AEMaaCS].

  2. Apri il file e aggiungi la seguente riga alla fine:

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

    Aggiungere ad esempio la seguente riga di codice per aggiungere la cartella customsubmitaction nel file filter.xml:

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

    Aggiungi le cartelle create nel file filter.xml

  3. Salva le modifiche.

Implementa il servizio per l’azione di invio aggiunta.

  1. Passare alla seguente directory all'interno di [AEMaaCS project directory]:
    /core/src/main/java/com/<app-id>/core/service/
    Important: Sostituisci <app-id> con l'ID applicazione effettivo.

  2. Crea un nuovo file Java per implementare il servizio per l’azione di invio aggiunta. Ad esempio, aggiungere un nuovo file Java come CustomSubmitService.java.

    Cartella azioni di invio personalizzate

  3. Apri questo file e aggiungi il codice per l’implementazione dell’azione di invio personalizzata.

    Il codice Java seguente, ad esempio, è un servizio OSGi che gestisce l'invio del modulo registrando i dati inviati e restituendo uno stato OK. Aggiungi il seguente codice nel file 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;
         }
        }
    

    Servizio azione invio personalizzato

  4. Salva le modifiche.

Distribuisci il codice.

Distribuisci il codice per l'ambiente di sviluppo locale

  • Distribuire AEM as a Cloud Service [AEMaaCS project directory] nell'ambiente di sviluppo locale per provare la nuova azione di invio nel computer locale. Per implementare nell’ambiente di sviluppo locale:

    1. Assicurati che l’ambiente di sviluppo locale sia operativo. Se non hai già configurato un ambiente di sviluppo locale, consulta la guida su Configurare un ambiente di sviluppo locale per AEM Forms.

    2. Aprire la finestra del terminale o il prompt dei comandi.

    3. Passare a [AEMaaCS project directory].

    4. Esegui il comando seguente:

      code language-none
      mvn -PautoInstallPackage clean install
      

      Distribuzione locale

Distribuire il codice per l'ambiente di Cloud Service

  • Distribuire AEM as a Cloud Service, [AEMaaCS project directory], nell'ambiente di Cloud Service. Per eseguire l’implementazione nell’ambiente di Cloud Service:

    1. Eseguire il commit delle modifiche:

      Dopo aver aggiunto la nuova configurazione dell’azione di invio personalizzata, conferma le modifiche con un messaggio Git cancellato. (ad esempio, "Aggiunta nuova azione di invio personalizzata").

    2. Distribuisci il codice aggiornato:

      Attiva una distribuzione del codice tramite la pipeline full stack esistente. Genera e distribuisce automaticamente il codice aggiornato con il nuovo supporto per l’azione di invio personalizzata.

      Se non hai già configurato una pipeline, consulta la guida su come impostare una pipeline per AEM Forms as a Cloud Service.

      Distribuzione cloud

      Come confermare l'installazione?

      Una volta creato correttamente il progetto, l'azione di invio personalizzata viene visualizzata nell'elenco a discesa Submit action durante la creazione di un modulo.

      Elenco a discesa Azione di invio personalizzata

    Il tuo ambiente è ora pronto per utilizzare l’azione di invio personalizzata aggiunta durante la creazione di un modulo.

Anteprima di un modulo adattivo con nuova azione di invio aggiunta

  1. Accedi all’istanza AEM Forms as a Cloud Service.

  2. Vai a Forms > Forms e documenti.

    Forms e documenti

  3. Seleziona un modulo adattivo e fai clic su Modifica. Il modulo si apre in modalità di modifica.

    Modifica modulo

  4. Apri il browser Contenuto e seleziona il componente Contenitore guida del modulo adattivo.

  5. Fare clic sull'icona delle proprietà del Contenitore Guida TV Proprietà Guida . Viene visualizzata la finestra di dialogo Contenitore modulo adattivo (Adaptive Form Container).

  6. Fare clic sulla scheda Invio.

  7. Dall'elenco a discesa Azione invio, selezionare l'azione di invio. Selezionare ad esempio l'azione di invio come Custom Submit Action.

    Modulo di invio personalizzato

  8. Compila il modulo e invialo.

    Invia modulo

    Messaggio di ringraziamento

    Dopo aver inviato il modulo, è possibile controllare la configurazione della console Web Adobe Experience Manager per verificare l'azione dell'azione di invio personalizzata nell'ambiente di sviluppo locale.

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

  10. Passare a Supporto log console Web Adobe Experience Manager in http://<host>:<port>/system/console/slinglog.

    ConfigMgr

  11. Fare clic sull'opzione logs/error.log.
    Apri il file error.log

  12. Aprire il file error.log per verificare che i dati siano stati aggiunti alla fine.

    file error.log

    note note
    NOTE
    Per visualizzare i registri di errore nell’ambiente AEM as a Cloud Service, puoi utilizzare Splunk.

Articoli correlati

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