Création d’une action d’envoi personnalisée pour le Forms adaptatif (composants principaux)

Une action d’envoi permet aux utilisateurs de sélectionner la destination des données capturées à partir d’un formulaire et de définir des fonctionnalités supplémentaires à exécuter lors de l’envoi du formulaire. AEM formulaire prend en charge plusieurs actions d’envoi prêtes à l’emploi (prêtes à l’emploi), telles que l’envoi d’un courrier électronique ou l’enregistrement de données vers SharePoint ou OneDrive.

Vous pouvez également créer une action d’envoi personnalisée pour ajouter des fonctionnalités non incluses dans les options d’usine. Par exemple, intégrez les données de formulaire à une application tierce ou déclenchez une notification SMS personnalisée en fonction des entrées de l’utilisateur.

Prérequis

Avant de commencer à créer votre première action d’envoi personnalisée pour Adaptive Forms, assurez-vous que vous disposez des éléments suivants :

  • Éditeur de texte brut (IDE) : bien que tout éditeur de texte brut puisse fonctionner, un environnement de développement intégré (IDE) comme Microsoft Visual Studio Code offre des fonctionnalités avancées pour faciliter la modification.

  • Git : ce système de contrôle de version est nécessaire pour gérer les modifications de code. Si vous ne l’avez pas installé, téléchargez-le à partir de https://git-scm.com.

Créer votre première action d’envoi personnalisée pour le formulaire

Le diagramme ci-dessous illustre les étapes de création d’une action d’envoi personnalisée pour un formulaire adaptatif :

Processus d’action d’envoi personnalisée {width="50"}

Cloner le référentiel Git AEM as a Cloud Service.

  1. Ouvrez la ligne de commande et choisissez un répertoire pour stocker votre référentiel AEM as a Cloud Service, tel que /cloud-service-repository/.

  2. Exécutez la commande ci-dessous pour cloner le référentiel :

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

    Où trouver ces informations ?

    Pour obtenir des instructions détaillées sur la localisation de ces détails, reportez-vous à l’article de Adobe Experience League "Accès à Git".

    Votre projet est prêt !

    Une fois la commande terminée, un nouveau dossier est créé dans votre répertoire local. Ce dossier est nommé d’après votre application (par exemple, app-id). Ce dossier contient tous les fichiers et le code téléchargés à partir de votre référentiel Git AEM as a Cloud Service. Vous pouvez trouver <appid> pour votre projet AEM dans le fichier archetype.properties .

    Propriétés de l’archétype

    Dans ce guide, nous nous référons à ce dossier sous le nom de [AEMaaCS project directory].

Ajouter une action d’envoi

  1. Ouvrez le dossier du référentiel dans un éditeur.

    Référentiel connecté

  2. Accédez au répertoire suivant dans votre [AEMaaCS project directory] :

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

    Important : remplacez <app-id> par votre ID d’application réel.

  3. Créez un dossier pour votre action d’envoi personnalisée et attribuez-lui un nom de votre choix. Par exemple, nommez le dossier customsubmitaction.

    Créer un dossier d’action d’envoi personnalisé

  4. Accédez au répertoire d’action d’envoi personnalisée ajouté.

    Dans votre [AEMaaCS project directory], accédez au chemin suivant :

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

    Important : Remplacer <app-id> avec votre ID d’application réel.

  5. Créez un fichier de configuration.
    Dans le dossier customsubmitaction, créez un fichier nommé .content.xml.

    Créer un fichier de configuration

  6. Ouvrez ce fichier et collez le contenu suivant, en remplaçant [customsubmitaction] par le nom de votre action d’envoi.

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

    Par exemple, remplacez [customsubmitaction] par le nom de votre action d’envoi personnalisée Custom Submit Action.

    Créer un fichier de configuration d’action d’envoi personnalisée

    note note
    NOTE
    N’oubliez pas le nom de [customsubmitaction], car le même nom apparaît dans la liste déroulante Submit action lors de la création d’un formulaire.

Inclure le nouveau dossier dansfilter.xml

  1. Accédez au fichier /ui.apps/src/main/content/META-INF/vault/filter.xml dans votre [ répertoire de projet AEMaaCS].

  2. Ouvrez le fichier et ajoutez la ligne suivante à la fin :

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

    Par exemple, ajoutez la ligne de code suivante pour ajouter le dossier customsubmitaction dans le fichier filter.xml :

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

    Ajoutez les dossiers créés dans filter.xml

  3. Enregistrez les modifications.

Mettez en oeuvre le service pour l’action d’envoi ajoutée.

  1. Accédez au répertoire suivant dans votre [AEMaaCS project directory] :
    /core/src/main/java/com/<app-id>/core/service/
    Important : Remplacer <app-id> avec votre ID d’application réel.

  2. Créez un fichier Java pour mettre en oeuvre le service pour l’action d’envoi ajoutée. Par exemple, ajoutez un nouveau fichier Java en tant que CustomSubmitService.java.

    Dossier d’action d’envoi personnalisé

  3. Ouvrez ce fichier et ajoutez le code correspondant à votre implémentation d’action d’envoi personnalisée.

    Par exemple, le code Java ci-dessous est un service OSGi qui gère l’envoi du formulaire en enregistrant les données envoyées et en renvoyant un état OK. Ajoutez le code suivant dans le fichier 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;
         }
        }
    

    Service d’action d’envoi personnalisé

  4. Enregistrez les modifications.

Déployez le code.

Déployer du code pour l’environnement de développement local

  • Déployez AEM as a Cloud Service, [AEMaaCS project directory], dans votre environnement de développement local pour essayer la nouvelle action d’envoi sur votre ordinateur local. Pour effectuer un déploiement sur votre environnement de développement local :

    1. Assurez-vous que votre environnement de développement local est opérationnel. Si vous n’avez pas encore configuré d’environnement de développement local, reportez-vous au guide sur la configuration d’un environnement de développement local pour AEM Forms.

    2. Ouvrez la fenêtre de terminal ou l’invite de commande.

    3. Accédez au [AEMaaCS project directory].

    4. Exécutez la commande suivante :

      code language-none
      mvn -PautoInstallPackage clean install
      

      Déploiement local

Déployer le code pour l’environnement du Cloud Service

  • Déployez AEM as a Cloud Service, [AEMaaCS project directory], dans votre environnement de Cloud Service. Pour effectuer un déploiement sur votre environnement de Cloud Service :

    1. Validez vos modifications :

      Après avoir ajouté la nouvelle configuration d’action d’envoi personnalisée, validez vos modifications avec un message Git clair. (Par exemple, "Ajout d’une nouvelle action d’envoi personnalisée").

    2. Déployez le code mis à jour :

      Déclenchez un déploiement de votre code par le biais du pipeline de pile complète existant. Il crée et déploie automatiquement le code mis à jour avec la nouvelle prise en charge de l’action d’envoi personnalisée.

      Si vous n’avez pas encore configuré de pipeline, reportez-vous au guide sur la configuration d’un pipeline pour AEM Forms as a Cloud Service🔗.

      Déploiement cloud

      Comment confirmer l'installation ?

      Une fois le projet créé, l’action d’envoi personnalisée apparaît dans la liste déroulante Submit action lors de la création d’un formulaire.

      Liste déroulante Action d’envoi personnalisée

    Votre environnement est maintenant prêt à utiliser l’action d’envoi personnalisée ajoutée lors de la création d’un formulaire.

Aperçu d’un formulaire adaptatif avec la nouvelle action d’envoi ajoutée

  1. Connectez-vous à votre instance AEM Forms as a Cloud Service.

  2. Accédez à Formulaires > Formulaires et documents.

    Forms et documents

  3. Sélectionnez un formulaire adaptatif et cliquez sur Modifier. Le formulaire s’ouvre en mode d’édition.

    Modifier le formulaire

  4. Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.

  5. Cliquez sur l’icône des propriétés du conteneur de guide Propriétés du guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.

  6. Cliquez sur l’onglet Envoi.

  7. Dans la liste déroulante Action d’envoi, sélectionnez l’action d’envoi. Par exemple, sélectionnez l’action d’envoi Custom Submit Action.

    Formulaire d’envoi personnalisé

  8. Remplissez le formulaire et envoyez-le.

    Submit Form

    Message de remerciement

    Une fois le formulaire envoyé avec succès, vous pouvez vérifier la configuration de la console web Adobe Experience Manager pour vérifier l’action de l’action d’envoi personnalisée dans l’environnement de développement local.

  9. Accédez à http://<host>:<port>/system/console/configMgr.

  10. Accédez à la prise en charge du journal de la console web Adobe Experience Manager à l’adresse http://<host>:<port>/system/console/slinglog.

    ConfigMgr

  11. Cliquez sur l’option logs/error.log .
    Ouvrir le fichier error.log

  12. Ouvrez le fichier error.log pour vérifier que les données lui ont été ajoutées.

    fichier error.log

    note note
    NOTE
    Pour afficher les journaux d’erreurs dans l’environnement AEM as a Cloud Service, vous pouvez utiliser Splunk.

Articles connexes

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