Création de formulaires avec des sections répétables creating-forms-with-repeatable-sections
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.
Les sections répétables sont des panneaux qui peuvent être ajoutés ou supprimés dynamiquement dans un formulaire.
Par exemple, lorsqu'il ou elle postule pour un emploi, le demandeur ou demandeuse d’emploi fournit des détails sur les emplois précédents, tels que le nom de l’entreprise, le rôle, le projet et d’autres informations. Les informations concernant les employeurs nécessitent des sections différentes mais similaires. Dans un tel scénario, le formulaire d’embauche fournit une section employeur et fournit également une option pour ajouter dynamiquement d’autres sections de ce type. Ces sections dynamiquement ajoutées sont appelées sections répétables.
Pour créer des panneaux répétables, vous pouvez utiliser l’une des méthodes suivantes :
Utilisation du gestionnaire d’instances via des scripts using-instance-manager-via-scripts-nbsp
-
En mode de modification, sélectionnez un panneau, puis
Le champ Maximum spécifie le nombre maximum de fois qu’un panneau peut apparaître sur la page. Vous pouvez spécifier -1 dans le champ Nombre maximum pour que le panneau s’affiche un nombre infini de fois.
Le champ Minimum spécifie le nombre minimum de fois qu’un panneau s’affiche sur le formulaire. Si vous définissez le champ Nombre minimum sur zéro, vous pouvez ultérieurement supprimer toutes les instances via des scripts une fois le rendu terminé.
note note NOTE Pour créer un panneau non répétable, définissez la valeur des champs Maximum et Minimum sur 1. La disposition en accordéon ne prend pas en charge la valeur -1 dans le champ Nombre maximum. Vous pouvez spécifier un nombre élevé pour donner la notion de valeur infinie. -
Le parent du panneau, qui doit être répété, doit contenir des boutons d’ajout et de suppression pour gérer les instances des panneaux répétables. Pour insérer des boutons dans le parent et activer des scripts sur les boutons, procédez comme suit :
-
A partir de la barre latérale, faites glisser un composant Bouton jusqu’au parent du panneau. Sélectionnez le composant, puis
-
Dans la fenêtre Éditeur de règles, cliquez sur Créer.
Sélectionnez Éditeur visuel dans la ligne Objets et fonctions de formulaire.
-
Dans la zone de règle, sous QUAND, sélectionnez l’état lorsque l’on clique dessus.
-
Sous PUIS :
- Pour créer un bouton d’ajout de panneau, sélectionnez Ajouter une instance et glissez-déposez le panneau à l’aide du
- Pour créer un bouton de suppression de panneau, sélectionnez Supprimer une instance, et glissez-déposez le panneau à l’aide du
- Pour créer un bouton d’ajout de panneau, sélectionnez Ajouter une instance et glissez-déposez le panneau à l’aide du
Sélectionner Éditeur de code dans la ligne Objets et fonctions de formulaire. Cliquez sur Modifier les règles et dans la zone de code :
- Pour créer un bouton d’ajout de panneau, spécifiez
this.panel.instanceManager.addInstance(). - Pour créer un bouton de suppression de panneau, spécifiez
this.panel.instanceManager.removeInstance(this.panel.instanceIndex).
Cliquez sur Terminé.
note note NOTE Si un champ appartient à un panneau répétable, vous ne pouvez pas y accéder directement via son nom dans vos scripts. Pour accéder au champ, spécifiez l’instance répétable à laquelle le champ appartient à l’aide de l’API instancesdansInstanceManager. La syntaxe pour utiliser l’APIinstancesdansInstanceManagerest la suivante :<panelName>.instanceManager.instances[<instanceNumber>].<fieldname>Par exemple, vous créez un formulaire adaptatif avec un panneau répétable contenant une zone de texte. Lorsque vous pré-remplissez le formulaire avec trois zones de texte répétables, le code xml ci-dessous est requis : <panel1><textbox1>AA1</panel1></textbox1><panel1><textbox1>AA2</panel1></textbox1><panel1><textbox1>AA3</panel1></textbox1>Pour lire les données AA1, spécifiez les paramètres suivants : Panel1.instanceManager.instances[0].textbox.valuePour lire les données AA2, spécifiez les paramètres suivants : Panel1.instanceManager.instances[1].textbox.valuePour plus d’informations, voir : Class: InstanceManager#instances dans Référence API Java pour AEM Forms. note note NOTE Lorsque toutes les instances d’un panneau sont supprimées d’un formulaire adaptatif, pour ajouter une instance du panneau supprimé, utilisez la syntaxe _panelName pour capturer le gestionnaire d’instances du panneau et l’API addInstance du gestionnaire d’instances pour ajouter l’instance supprimée. Par exemple, _panelName.addInstance(). Elle ajoute une instance du panneau supprimé. -
-
Utilisation de la mise en page en accordéon pour le panneau parent using-the-accordion-layout-for-the-parent-panel-nbsp
Un panneau comporte différentes options de disposition. La disposition de l’option de conception en accordéon prend en charge les panneaux répétables. Pour créer un panneau répétable avec la mise en page de l’option de conception en accordéon, procédez comme suit :
-
Dans le parent du panneau à répéter, sélectionnez
-
Dans un panneau à répéter, sélectionnez
Vous pouvez désormais utiliser les boutons plus (+) et Supprimer (
Utilisation des sous-formulaires qui se répètent du modèle de formulaire (XDP/XSD) using-repeating-subforms-from-form-template-xdp-xsd
Un sous-formulaire répétable est similaire aux panneaux répétables dans les formulaires adaptatifs. Dans AEM Forms Designer, suivez la procédure suivante pour créer un sous-formulaire qui se répète :
- Dans la palette Hiérarchie, sélectionner le sous-formulaire parent du sous-formulaire à répéter.
- Dans la palette Objet, cliquez sur l’onglet Sous-formulaire et sélectionnez Distribué dans la liste Contenu.
- Sélectionnez le sous-formulaire à répéter.
- Dans la palette Objet, cliquez sur l’onglet Sous-formulaire et sélectionnez Positionné ou Distribué dans la liste Contenu.
- Cliquez sur l’onglet Liaison et sélectionnez Sous-formulaire pour chaque élément.
- Pour spécifier le nombre minimum de répétitions, sélectionnez Nombre minimum de répétitions et saisissez un nombre dans la zone associée. Si cette option est définie sur 0 et qu’aucune donnée n’est fournie pour les objets du sous-formulaire au moment de la fusion, le sous-formulaire n’est pas placé lors de la génération du formulaire.
- Pour spécifier le nombre maximum de répétitions du sous-formulaire, sélectionnez Nombre maximum de répétitions et saisissez un nombre dans la zone associée. Si vous ne spécifiez aucune valeur dans la zone Nombre maximum, le nombre de répétitions du sous-formulaire est illimité.
- Pour spécifier un nombre précis de répétitions du sous-formulaire, quelle que soit la quantité de données, sélectionnez l’option Quantité initiale et tapez un nombre dans la zone associée. Si vous sélectionnez cette option et qu’aucune donnée n’est disponible ou qu’il existe moins d’entrées de données par rapport à la valeur Quantité initiale spécifiée, des instances vides du sous-formulaire sont toujours placées sur le formulaire.
- Ajoutez deux boutons dans le sous-formulaire parent : un pour ajouter une instance et un autre pour supprimer une instance du sous-formulaire répétable. Pour obtenir des instructions détaillées, voir Création d’une action.
- Liez maintenant le modèle de formulaire au formulaire adaptatif. Pour les étapes détaillées, voir Création d’un formulaire adaptatif basé sur un modèle.
- Utilisez les boutons créés à l’étape 9 pour ajouter et supprimer des sous-formulaires.
Le fichier .zip joint contient un exemple de sous-formulaire répétable.
Utilisation des paramètres de répétition d’un schéma XML (XSD) using-repeat-settings-of-an-xml-schema-xsd-br
Vous pouvez créer des panneaux répétables à partir d’un schéma XML et de la propriété minOccurs et maxOccurs de n’importe quel élément de type complexe. Pour des informations détaillées sur le schéma XML, voir Création de formulaires adaptatifs à l’aide du schéma XML en tant que modèle de formulaire.
Dans le code suivant, le panneauSampleType utilise la propriété minOccurs & maxOccurs.
<?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="leaderName" type="xs:string" default="Enter Name"/>
<xs:element name="assignmentStartDate" type="xs:date"/>
<xs:element name="gender" type="GenderEnum"/>
<xs:element name="noOfProjectsAssigned" type="IntType"/>
<xs:element name="assignmentDetails" type="AssignmentDetails"
minOccurs="0" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="AssignmentDetails">
<xs:attribute name="name" type="xs:string" use="required"/>
<xs:attribute name="durationOfAssignment" type="xs:unsignedInt" use="required"/>
<xs:attribute name="numberOfMentees" type="xs:unsignedInt" use="required"/>
<xs:attribute name="descriptionOfAssignment" type="xs:string" use="required"/>
<xs:attribute name="financeRelatedProject" type="xs:boolean"/>
</xs:complexType>
<xs:simpleType name="IntType">
<xs:restriction base="xs:int">
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="GenderEnum">
<xs:restriction base="xs:string">
<xs:enumeration value="Female"/>
<xs:enumeration value="Male"/>
</xs:restriction>
</xs:simpleType>
</xs:schema>