Préremplissage des champs de formulaires adaptatifs prefill-adaptive-form-fields

Adobe recommande d’utiliser les composants principauxde capture de données modernes et extensibles pour créer de nouveaux formulaires adaptatifsou ajouter des formulaires adaptatifs à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de formulaires adaptatifs, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’ancienne approche de la création de formulaires adaptatifs à l’aide de composants de base.

Présentation introduction

Vous pouvez préremplir les champs d’un formulaire adaptatif à l’aide de données existantes. Lorsqu’un utilisateur ouvre un formulaire, les valeurs de ces champs sont préremplies. Pour préremplir les données utilisateur dans un formulaire adaptatif, définissez-les sous la forme d’un fichier XML/JSON prérempli au format respectant la structure de données de préremplissage des formulaires adaptatifs.

Structure des données de préremplissage the-prefill-structure

Un formulaire adaptatif peut contenir un mélange de champs liés et non liés. Les champs liés sont ceux qui sont déplacés à partir de l’onglet Outil de recherche de contenu et qui contiennent une valeur de propriété bindRef non vide dans la boîte de dialogue de modification du champ. Les champs non liés sont déplacés directement à partir du navigateur de composant de Sidekick et possède une valeur bindRef vide.

Vous pouvez préremplir les champs liés et non liés d’un formulaire adaptatif. Les données de préremplissage contiennent les sections afBoundData et afUnBoundData pour préremplir les champs liés et non liés d’un formulaire adaptatif. La section afBoundData contient les données de préremplissage pour les champs liés et les panneaux. Ces données doivent être conformes au schéma de modèle de formulaire associé :

Exemple de structure XML de préremplissage sample-prefill-xml-structure

<?xml version="1.0" encoding="UTF-8"?>
<afData>
  <afBoundData>
     <employeeData>
        .
     </employeeData>
  </afBoundData>

  <afUnboundData>
    <data>
      <textbox>Hello World</textbox>
         .
         .
      <numericbox>12</numericbox>
         .
         .
    </data>
  </afUnboundData>
</afData>

Exemple de structure JSON de préremplissage sample-prefill-json-structure

{
   "afBoundData": {
      "employeeData": { }
   },
   "afUnboundData": {
      "data": {
         "textbox": "Hello World",
         "numericbox": "12"
      }
   }
}

Pour les champs liés avec le même bindref ou les champs non liés portant le même nom, les données spécifiées dans la balise XML ou l’objet JSON sont insérées dans tous les champs. Par exemple, deux champs d’un formulaire sont mappés au nom textbox dans les données de préremplissage. Pendant l’exécution, si la première zone de texte contient « A », « A » est automatiquement inséré dans la deuxième zone de texte. On appelle cette opération liaison directe de champs de formulaires adaptatifs.

Formulaire adaptatif utilisant le modèle de formulaire XFA xfa-based-af

La structure du code XML de préremplissage et du code XML envoyé pour les formulaires adaptatifs basés sur XFA se présente comme suit :

Prefill-Submit-Data-ContentPackage.zip

Obtenir le fichier
Exemple de données contenant un préremplissage et de données envoyées

Formulaires adaptatifs basés sur un schéma XML xml-schema-af

La structure du code XML de préremplissage et du code XML envoyé pour les formulaires adaptatifs basés sur le schéma XML se présente comme suit :

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema targetNamespace="https://adobe.com/sample.xsd"
            xmlns="https://adobe.com/sample.xsd"
            xmlns:xs="https://www.w3.org/2001/XMLSchema">

    <xs:element name="sample" type="SampleType"/>

    <xs:complexType name="SampleType">
        <xs:sequence>
            <xs:element name="noOfProjectsAssigned" type="xs:string"/>
        </xs:sequence>
    </xs:complexType>
</xs:schema>

Pour les champs dont le modèle est le schéma XML, les données sont remplies dans la balise afBoundData, comme illustré dans l’exemple de code XML ci-dessous. Elle peut servir à préremplir un formulaire adaptatif avec un ou plusieurs champs de texte non liés.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <textbox>Ignorance is bliss :) </textbox>
    </data>
  </afUnboundData>
  <afBoundData>
    <data>
      <noOfProjectsAssigned>twelve</noOfProjectsAssigned>
    </data>
  </afBoundData>
</afData>

Exemple sans wrapper afData et afBoundData an-example-without-afdata-and-afbounddata-wrapper

<?xml version="1.0" encoding="UTF-8"?><config>
 <assignmentDetails descriptionOfAssignment="Some Science Project" durationOfAssignment="34" financeRelatedProject="1" name="Lisa" numberOfMentees="1"/>
 <assignmentDetails descriptionOfAssignment="Kidding, right?" durationOfAssignment="4" financeRelatedProject="1" name="House" numberOfMentees="3"/>
</config>

Formulaires adaptatifs basés sur un schéma JSON json-schema-based-adaptive-forms

Pour les formulaires adaptatifs basés sur un schéma JSON, la structure du code JSON de préremplissage et du code JSON envoyé est décrite ci-dessous. Pour plus d’informations, reportez-vous à la section Création de formulaires adaptatifs à l’aide d’un schéma JSON.

{
    "id": "https://some.site.somewhere/entry-schema#",
    "$schema": "https://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "address": {
            "type": "object",
            "properties": {
    "name": {
     "type": "string"
    },
    "age": {
     "type": "integer"
}}}}}

Pour les champs qui utilisent le modèle de schéma JSON, les données sont préremplies dans l’objet afBoundData, comme illustré dans l’exemple JSON ci-dessous. Il peut servir à préremplir un formulaire adaptatif avec un ou plusieurs champs de texte non liés. Voici un exemple de données avec le wrapper afData/afBoundData :

{
  "afData": {
    "afUnboundData": {
      "data": { "textbox": "Ignorance is bliss :) " }
    },
    "afBoundData": {
      "data": { {
   "user": {
    "address": {
     "city": "Noida",
     "country": "India"
}}}}}}}

Voici un exemple sans le wrapper afData/afBoundData :

{
 "user": {
  "address": {
   "city": "Noida",
   "country": "India"
}}}

Formulaire adaptatif sans modèle de formulaire adaptive-form-with-no-form-model

Pour les formulaires adaptatifs sans modèle de formulaire, les données de tous les champs se trouveront sous l’onglet <data> de la balise <afUnboundData> tag.

Prenez également en compte les points suivants :

Les balises XML des données utilisateur envoyées pour différents champs sont générées avec le nom des champs. Par conséquent, les noms des champs doivent être uniques.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <radiobutton>2</radiobutton>
      <repeatable_panel_no_form_model>
        <numericbox>12</numericbox>
      </repeatable_panel_no_form_model>
      <repeatable_panel_no_form_model>
        <numericbox>21</numericbox>
      </repeatable_panel_no_form_model>
      <checkbox>2</checkbox>
      <textbox>Nopes</textbox>
    </data>
  </afUnboundData>
  <afBoundData/>
</afData>

Configuration du service de préremplissage à l’aide de Configuration Manager configuring-prefill-service-using-configuration-manager

Pour activer le service de préremplissage, spécifiez la configuration de service de préremplissage par défaut dans la configuration de la console web d’AEM. Pour configurer le service de préremplissage, procédez comme suit :

Cas étrange des panneaux répétables the-curious-case-of-repeatable-panels

En règle générale, les champs liés (schéma de formulaire) et non liés sont créés dans un même formulaire adaptatif. Les éléments suivants constituent cependant quelques exceptions lorsque les liaisons sont répétables :

Protocoles pris en charge pour le préremplissage des données utilisateur supported-protocols-for-prefilling-user-data

Les formulaires adaptatifs peuvent être préremplis avec des données utilisateur au format de données de préremplissage via les protocoles suivants lorsqu’ils sont configurés avec une regex valide :

Protocole crx:// the-crx-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=crx:///tmp/fd/af/myassets/sample.xml

Le nœud spécifié doit posséder une propriété nommée jcr:data et contenir les données.

Protocole file://  the-file-protocol-nbsp

https://localhost:4502/content/forms/af/someAF.html?wcmmode=disabled&dataRef=file:///C:/Users/form-user/Downloads/somesamplexml.xml

Le fichier référencé doit se trouver sur le même serveur.

Protocole https:// the-http-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=https://localhost:8000/somesamplexmlfile.xml

Protocole service:// the-service-protocol

https://localhost:4502/content/forms/af/abc.html?wcmmode=disabled&dataRef=service://[SERVICE_NAME]/[IDENTIFIER]

Définition de l’attribut data dans slingRequest setting-data-attribute-in-slingrequest

Vous pouvez également définir l’attribut data dans slingRequest, où l’attribut data correspond à une chaîne contenant des balises XML ou JSON, comme illustré dans l’exemple de code ci-après (exemple pour XML) :

<%
           String dataXML="<afData>" +
                            "<afUnboundData>" +
                                "<data>" +
                                    "<first_name>"+ "Tyler" + "</first_name>" +
                                    "<last_name>"+ "Durden " + "</last_name>" +
                                    "<gender>"+ "Male" + "</gender>" +
                                    "<location>"+ "Texas" + "</location>" +
                                    "</data>" +
                            "</afUnboundData>" +
                        "</afData>";
        slingRequest.setAttribute("data", dataXML);
%>

Vous pouvez écrire une chaîne XML ou JSON simple contenant toutes les données et la définir dans slingRequest. Cette opération peut facilement être effectuée dans le JSP de rendu pour tout composant que vous souhaitez inclure dans la page où vous pouvez définir l’attribut data slingRequest.

Imaginons que vous souhaitez une conception spécifique pour votre page avec un type spécifique d’en-tête. Pour obtenir ce résultat, vous pouvez écrire votre propre fichier header.jsp à inclure dans votre composant de page et définir l’attribut.data

Prenons un autre bon exemple dans lequel vous souhaitez préremplir les données à la connexion par le biais de comptes de réseau social tels que Facebook, Twitter ou LinkedIn. Dans ce cas, vous pouvez inclure un JSP simple dans header.jsp qui récupère les données du compte d’utilisateur et définit le paramètre data.

prefill-page component.zip

Obtenir le fichier
Exemple de prefill.jsp dans le composant de page

Service de préremplissage personnalisé d’AEM Forms aem-forms-custom-prefill-service

Vous pouvez utiliser le service de préremplissage personnalisé pour les scénarios, où vous lisez en permanence des données à partir d’une source prédéfinie. Le service de préremplissage lit des données provenant de sources de données définies et préremplit les champs du formulaire adaptatif avec le contenu du fichier de données de préremplissage. Il vous permet également d’associer de manière permanente des données de préremplissage à un formulaire adaptatif.

Création et exécution d’un service de préremplissage create-and-run-a-prefill-service

Le service de préremplissage est un service OSGi et fait partie du bundle OSGi. Vous créez le lot OSGi, vous le chargez et l’installez sur les lots AEM Forms. Avant de débuter la création du bundle :

Obtenir le fichier

Création d’un service de préremplissage create-a-prefill-service

Le package standard (exemple de package de services de préremplissage) contient un exemple d’implémentation du service de préremplissage d’AEM Forms. Ouvrez le package standard dans un éditeur de code. Par exemple, ouvrez le projet standard dans Eclipse pour le modifier. Après avoir ouvert le package standard dans un éditeur de code, procédez comme suit pour créer le service.

Démarrage et utilisation du service de préremplissage start-and-use-the-prefill-service

Pour démarrer le service de préremplissage, chargez le fichier JAR dans la console web d’AEM Forms et activez le service. Désormais, le démarrage du service s’affiche dans l’éditeur de formulaires adaptatifs. Pour associer un service de préremplissage à un formulaire adaptatif :

Prépopulation des données chez le client prefill-at-client

Lorsque vous préremplissez un formulaire adaptatif, le serveur AEM Forms fusionne les données avec un formulaire adaptatif et vous délivre le formulaire rempli. Par défaut, l’action de fusion des données a lieu sur le serveur.

Vous pouvez configurer le serveur AEM Forms pour qu’il effectue l’action de fusion des données sur le client et non sur le serveur. Cela réduit considérablement le temps nécessaire pour préremplir et générer les formulaires adaptatifs. Par défaut, cette fonctionnalité est désactivée. Vous pouvez l’activer à partir de Configuration Manager ou d’une ligne de commande.