Créer une action Envoyer personnalisée pour les formulaires adaptatifs

Les formulaires adaptatifs nécessitent des actions Envoyer pour traiter les données spécifiées par l’utilisateur. Une action Envoyer détermine la tâche effectuée sur les données envoyées à lʼaide dʼun formulaire adaptatif. Adobe Experience Manager (AEM) contient des actions Envoyer prêtes à l’emploi qui montrent les tâches personnalisées que vous pouvez effectuer à l’aide des données envoyées par l’utilisateur. Vous pouvez par exemple effectuer des tâches comme envoyer un courrier électronique ou stocker les données.

Processus d’une action Envoyer

Le diagramme de flux présente le workflow d’une action Envoyer qui est déclenchée lorsque vous cliquez sur le bouton Envoyer d’un formulaire adaptatif. Les fichiers du composant Pièce jointe sont chargés sur le serveur et les données de formulaire sont mises à jour avec les URL des fichiers chargés. Au sein du client, les données sont stockées au format JSON. Le client envoie une requête Ajax à une servlet interne qui masse les données que vous avez spécifiées et les renvoie au format XML. Le client assemble ces données avec des champs d’action. Il envoie les données à la servlet finale (servlet Guide Submit) par lʼintermédiaire dʼune action Envoyer le formulaire. La servlet transfère ensuite le contrôle à l’action Envoyer. L’action Envoyer peut transférer la requête vers une ressource sling différente ou rediriger le navigateur vers une autre URL.

Format des données XML

Les données XML sont envoyées à la servlet à l’aide du paramètre de requête jcr:data. Les actions Envoyer peuvent accéder au paramètre pour traiter les données. Le code ci-après décrit le format des données XML. Les champs liés au modèle de formulaire apparaissent dans la section afBoundData. Les champs non liés apparaissent dans la afUnoundDatasection. Pour plus d’informations sur le format du fichier data.xml, consultez la section Présentation du préremplissage des champs des formulaires adaptatifs.

<?xml ?>
<afData>
<afUnboundData>
<data>
<field1>value</field2>
<repeatablePanel>
    <field2>value</field2>
</repeatablePanel>
<repeatablePanel>
    <field2>value</field2>
</repeatablePanel>
</data>
</afUnboundData>
<afBoundData>
<!-- xml corresponding to the Form Model /XML Schema -->
</afBoundData>
</afData>

Champs d’action

Une action Envoyer peut ajouter des champs d’entrée masqués (à l’aide de la balise HTML input) au code HTML du formulaire affiché. Ces champs masqués peuvent contenir les valeurs dont elle a besoin lors du traitement de l’envoi du formulaire. Lors de l’envoi du formulaire, ces valeurs de champ sont publiées en tant que paramètres de requête que l’action Envoyer peut utiliser lors de la gestion de l’envoi. Les champs d’entrée sont appelés champs d’action.

Par exemple, une action Envoyer qui capture également le temps nécessaire pour remplir un formulaire peut ajouter les champs d’entrée masqués startTime et endTime.

Un script peut fournir les valeurs des champs startTime et endTime lors du rendu du formulaire et avant l’envoi du formulaire. Le script de l’action Envoyer post.jsp peut ensuite accéder à ces champs à l’aide des paramètres de requête et calculer le temps total nécessaire au remplissage du formulaire.

Pièces jointes

Les actions Envoyer peuvent également utiliser les pièces jointes que vous joignez à l’aide du composant Pièce jointe. Les scripts des actions Envoyer peuvent accéder à ces fichiers à l’aide de la chaîne RequestParameter. La méthode isFormField de l’API permet de déterminer si le paramètre de requête correspond à un fichier ou à un champ de formulaire. Vous pouvez effectuer une itération sur les paramètres de requête dans une action Envoyer pour identifier les paramètres de pièce jointe.

L’exemple de code ci-après identifie les pièces jointes de la requête. Il lit ensuite les données du fichier à l’aide de Get API. Il crée enfin un objet Document à l’aide des données et l’ajoute à la liste.

RequestParameterMap requestParameterMap = slingRequest.getRequestParameterMap();
for (Map.Entry<String, RequestParameter[]> param : requestParameterMap.entrySet()) {
    RequestParameter rpm = param.getValue()[0];
    if(!rpm.isFormField()) {
        fileAttachments.add(new Document(rpm.get()));
    }
}

Chemin de transfert et URL de redirection

Après avoir exécuté l’action requise, la servlet Submit transfère la requête vers le chemin de transfert. Une action utilise l’API setForwardPath pour définir le chemin de transfert dans la servlet Guide Submit.

Si l’action ne fournit pas de chemin de transfert, la servlet Submit redirige le navigateur à l’aide de l’URL de redirection. L’auteur configure l’URL de redirection à l’aide de la configuration de la page de remerciement dans la boîte de dialogue Modifier le formulaire adaptatif. Vous pouvez également configurer l’URL de redirection par le biais de l’action Envoyer ou de l’API setRedirectUrl de la servlet Guide Submit. Vous pouvez également configurer les paramètres de requête envoyés à l’URL de redirection à l’aide de l’API setRedirectParameters de la servlet Guide Submit.

Action Envoyer

Une action Envoyer est un sling:Folder qui contient les éléments suivants :

• addfields.jsp: Ce script fournit les champs d’action ajoutés au fichier de HTML lors du rendu. Utilisez ce script pour ajouter les paramètres d’entrée masqués requis lors de l’envoi dans le script post.POST.jsp.

• dialog.xml: Ce script est similaire à la boîte de dialogue Composant CQ. Il fournit des informations de configuration que l’auteur personnalise. Les champs s’affichent sous l’onglet « Actions Envoyer » de la boîte de dialogue Modifier le formulaire adaptatif lorsque vous sélectionnez l’action Envoyer.

• post.POST.jsp : la servlet Submit appelle ce script avec les données envoyées et les autres données des sections précédentes. Toute mention relative à l’exécution d’une action dans cette page implique l’exécution du script post.POST.jsp. Pour enregistrer l’action Envoyer avec les formulaires adaptatifs à afficher dans la boîte de dialogue Modifier le formulaire adaptatif, ajoutez les propriétés suivantes au sling:Folder:.

  • guideComponentType de type chaîne et valeur fd/af/components/guidesubmittype
  • guideDataModel de type chaîne qui spécifie le type de formulaire adaptatif auquel l’action Envoyer est applicable. xfa est pris en charge pour les formulaires adaptatifs basés sur XFA, alors que xsd l’est pour les formulaires adaptatifs basés sur XSD. basic est pris en charge pour les formulaires adaptatifs qui n’utilisent ni XDP ni XSD. Pour afficher l’action sur plusieurs types de formulaire adaptatif, ajoutez les chaînes correspondantes. Séparez chaque chaîne par une virgule. Par exemple, pour rendre une action visible sur les formulaires adaptatifs basés sur XFA et XSD, spécifiez respectivement les valeurs xfa et xsd.
  • jcr:description de type chaîne. La valeur de cette propriété est affichée dans la liste des actions Envoyer située sous l’onglet Actions Envoyer de la boîte de dialogue Modifier le formulaire adaptatif. Les actions prêtes à l’emploi figurent dans le référentiel CRX, à l’emplacement /libs/fd/af/components/guidesubmittype.

Création d’une action Envoyer personnalisée

Effectuez les étapes suivantes pour créer une action Envoyer personnalisée qui enregistre les données dans le référentiel CRX, puis vous envoie un courrier électronique. Le formulaire adaptatif contient l’action Envoyer Stocker le contenu (obsolète) prête à l’emploi qui permet d’enregistrer les données dans le référentiel CRX. En outre, CQ fournit une API de messagerie qui peut être utilisée pour envoyer des e-mails. Avant d’utiliser l’API de messagerie, [configurez](https://docs.adobe.com/docs/en/cq/current/administering/notification.html?#Configuring the Mail Service) le service de messagerie Day CQ via la console système. Vous pouvez réutiliser l’action Stocker le contenu (obsolète) pour stocker les données dans le référentiel. L’action Stocker le contenu (obsolète) se trouve à l’emplacement /libs/fd/af/components/guidesubmittype/store dans le référentiel CRX.

1. Connectez-vous à CRXDE Lite en accédant à https://<server>:<port>/crx/de/index.jsp. Créez un noeud avec la propriété sling:Folder et le nom store_and_mail dans le dossier /apps/custom_submit_action . Créez le dossier custom_submit_action s’il n’existe pas déjà.

   

2. Fournissez les champs de configuration obligatoires.

   Ajoutez la configuration nécessaire à l’action Stocker. Copiez le nœud cq:dialog de l’action Stocker à l’emplacement /libs/fd/af/components/guidesubmittype/store dans le dossier d’action à l’emplacement /apps/custom_submit_action/store_and_email.

   

3. Fournissez des champs de configuration pour demander à l’auteur la configuration des e-mails.

   Le formulaire adaptatif fournit également une action Courrier électronique qui envoie des courriers électroniques aux utilisateurs. Personnalisez cette action en fonction de vos besoins. Accédez à /libs/fd/af/components/guidesubmittype/email/dialog. Copiez les nœuds dans le nœud cq:dialog au nœud cq:dialog de votre action Envoyer (/apps/custom_submit_action/store_and_email/dialog?lang=fr).

   

4. Rendez l’action disponible dans la boîte de dialogue Modifier le formulaire adaptatif .

   Ajoutez les propriétés suivantes dans le noeud store_and_email :

   • guideComponentType de type chaîne et valeur fd/af/components/guidesubmittype
   • guideDataModel de type chaîne et valeur xfa, xsd, de base.
   • jcr:description de type chaîne et de valeur Store and Email Action

5. Ouvrez un formulaire adaptatif. Cliquez sur le bouton Modifier bouton en regard de Début pour ouvrir le Modifier de la boîte de dialogue du conteneur de formulaires adaptatifs. La nouvelle action s’affiche sous l’onglet Actions Envoyer. La sélection de l’action Store and Email affiche la configuration ajoutée au nœud dialog.

   

6. Utilisez l’action pour terminer une tâche.

   Ajoutez le script post.POST.jsp à votre action. (/apps/custom_submit_action/store_and_mail/?lang=fr).

   Exécutez l’action Stocker prête à l’emploi (script post.POST.jsp). Utilisez l’API FormsHelper.runAction que le CQ fournit dans votre code pour exécuter l’action Stocker. Ajoutez le code suivant à votre fichier JSP :

   FormsHelper.runAction("/libs/fd/af/components/guidesubmittype/store", "post", resource, slingRequest, slingResponse);

   Pour envoyer l’e-mail, le code lit l’adresse électronique du destinataire à partir de la configuration. Pour récupérer la valeur de configuration dans le script de l’action, lisez les propriétés de la ressource en cours à l’aide du code suivant. De même, vous pouvez lire les autres fichiers de configuration.

   ValueMap properties = ResourceUtil.getValueMap(resource);

   String mailTo = properties.get("mailTo");

   Utilisez enfin l’API de messagerie CQ pour envoyer l’e-mail. Utilisez la classe SimpleEmail pour créer l’objet Email comme illustré ci-dessous :

   REMARQUE

   Vérifiez que le fichier JSP porte le nom post.POST.jsp.

   <%@include file="/libs/fd/af/components/guidesglobal.jsp" %>
   <%@page import="com.day.cq.wcm.foundation.forms.FormsHelper,
          org.apache.sling.api.resource.ResourceUtil,
          org.apache.sling.api.resource.ValueMap,
                   com.day.cq.mailer.MessageGatewayService,
     com.day.cq.mailer.MessageGateway,
     org.apache.commons.mail.Email,
                   org.apache.commons.mail.SimpleEmail" %>
   <%@taglib prefix="sling"
                   uri="https://sling.apache.org/taglibs/sling/1.0" %>
   <%@taglib prefix="cq"
                   uri="https://www.day.com/taglibs/cq/1.0"
   %>
   <cq:defineObjects/>
   <sling:defineObjects/>
   <%
           String storeContent =
                       "/libs/fd/af/components/guidesubmittype/store";
           FormsHelper.runAction(storeContent, "post", resource,
                                   slingRequest, slingResponse);
    ValueMap props = ResourceUtil.getValueMap(resource);
    Email email = new SimpleEmail();
    String[] mailTo = props.get("mailto", new String[0]);
    email.setFrom((String)props.get("from"));
           for (String toAddr : mailTo) {
               email.addTo(toAddr);
      }
    email.setMsg((String)props.get("template"));
    email.setSubject((String)props.get("subject"));
    MessageGatewayService messageGatewayService =
                       sling.getService(MessageGatewayService.class);
    MessageGateway messageGateway =
                   messageGatewayService.getGateway(SimpleEmail.class);
    messageGateway.send(email);
   %>
   

   Sélectionnez l’action dans le formulaire adaptatif. L’action envoie un e-mail et stocke les données.

Ressources Business.Adobe.com

Style System Personalized Experiences Web Content Management Dynamic Forms Headless Cms Digital Signage