Les sections répétables sont des panneaux qui peuvent être ajoutés ou supprimés dynamiquement dans un formulaire.
Par exemple, lorsqu’elle dépose sa candidature pour un poste, la personne à la recherche d’un emploi fournit des informations sur son précédent poste telles que le nom de l’entreprise, le poste, le projet, etc. Les informations demandées par tous les employeurs nécessitent des sections différentes mais dont l’aspect est similaire. Dans ce scénario, le formulaire d’embauche fournit une section employeur et contient une option pour ajouter dynamiquement davantage de 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 :
En mode d’édition, sélectionnez un panneau, puis appuyez sur . Dans la barre latérale, sous Propriétés, activez Activer la répétition du panneau. Spécifiez des valeurs pour les champs Maximum et Minimum.
Le champ Maximum spécifie le nombre maximal de fois qu’un panneau peut s’afficher sur la page. Vous pouvez spécifier la valeur -1 dans le champ Nombre maximum pour que le panneau s’affiche un nombre illimité de fois.
Le champ Minimum spécifie le nombre minimum de fois qu’un panneau peut s’afficher sur la page. Si vous spécifiez la valeur zéro dans le champ Nombre minimum, vous pouvez ultérieurement supprimer toutes les instances via des scripts une fois le rendu terminé.
Pour créer un panneau non répétable, spécifiez une valeur dans les champs Maximum et Minimum. La mise en page en accordéon ne prend pas en charge la valeur -1 dans le champ Nombre maximum. Vous pouvez spécifier un nombre élevé pour exprimer une valeur infinie.
Le parent du panneau à répéter 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 et appuyez sur . Les règles du bouton s’ouvrent dans l’éditeur de règles.
Dans la fenêtre Éditeur de règles Les règles, cliquez sur créer.
Sélectionnez Éditeur visuel dans la ligne Objets et fonctions de formulaire.
Dans la zone de la règle, sous QUAND, sélectionnez l’état est cliqué.
Sous PUIS :
Sélectionnez Éditeur de code dans la ligne Objets et fonctions de formulaire. Cliquez sur Modifier les règles et dans la zone de code :
this.panel.instanceManager.addInstance()
.this.panel.instanceManager.removeInstance(this.panel.instanceIndex)
Cliquez sur Terminé.
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 instances
dans InstanceManager
. La syntaxe à utiliser pour l'API instances
dans InstanceManager
est 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.value
Pour lire les données AA2, spécifiez les paramètres suivants :
Panel1.instanceManager.instances[1].textbox.value
Pour plus d’informations, voir : Class: InstanceManager#instances dans Référence API Java pour AEM Forms.
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 utilisez l’API addInstance du gestionnaire d’instances pour ajouter l’instance supprimée. Par exemple, _panelName.addInstance(). Elle ajoute une instance du panneau supprimé.
Un panneau possède différentes options de mise en forme. La mise en page 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 :
Sur le parent du panneau à répéter, appuyez sur . Vous pouvez afficher les propriétés dans la barre latérale. Dans le menu déroulant Disposition, sélectionnez Accordéon.
Dans un panneau à répéter, appuyez sur . Vous pouvez afficher les propriétés dans la barre latérale. Activez l’onglet Activer la répétition du panneau et spécifiez des valeurs pour les champs Maximum et Minimum.
Vous pouvez désormais utiliser les boutons plus (+) et supprimer ( ) pour ajouter et supprimer les panneaux.
Un sous-formulaire répétable est similaire aux panneaux répétables dans les formulaires adaptatifs. Dans AEM Forms Designer, procédez comme suit pour créer un sous-formulaire qui se répète :
Le fichier .zip joint contient un exemple de sous-formulaire répétable.
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 panneau SampleType
utilise la propriété minOccurs et 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>
Pour une mise en page autre qu’en accordéon, utilisez les composants Bouton des formulaires adaptatifs pour ajouter et supprimer des instances.