Créer des formulaires avec des sections répétables (composants principaux)

Une section répétable fait référence à une partie d’un formulaire qui peut être dupliquée ou répétée plusieurs fois afin de collecter des informations pour plusieurs instances des mêmes données.

Prenons l’exemple d’un formulaire utilisé pour collecter des informations sur l’expérience professionnelle d’une personne. Vous pouvez avoir une section répétable pour capturer les détails de chaque emploi précédent. La section répétable contient généralement des champs tels que le nom de l’entreprise, l’intitulé du poste, les dates de début et de fin d’emploi, et les responsabilités. La personne utilisatrice peut ajouter plusieurs instances de la section répétable pour saisir des informations sur chaque emploi qu’elle a effectué.

À la fin de cet article, vous saurez :

• Création d’une section répétable dans un formulaire adaptatif
• définir le nombre minimal ou maximal de répétitions pour un composant de formulaire adaptatif ;
• utiliser l’éditeur de règles pour configurer les actions d’ajout ou de suppression pour les sections répétables

Vous pouvez utiliser la variable Panneau, Accordéon, Onglets horizontaux, ou Assistant composants pour rendre les sections d’un formulaire adaptatif répétables. Vous pouvez ajouter des composants enfants aux composants panneau, accordéon, onglets horizontaux ou assistant pour créer une section répétable dans un formulaire.

Les exemples de ce document reposent sur le composant Panneau. Vous pouvez effectuer les étapes identiques pour créer les composants répétables Accordéon, Onglets horizontaux, et Assistant.

Ajouter ou supprimer des sections répétables dans un formulaire

Pour répéter un panneau dans le formulaire ou supprimer les panneaux répétables, un auteur ou une autrice de formulaire utilise un composant de bouton pour ajouter ou supprimer une instance du panneau. Pour ajouter ou supprimer des sections répétables (panneaux) dans un formulaire :

• Activer la répétition du conteneur du panneau
• Ajouter une section répétable
• Supprimer des sections répétables

Activer la répétition du conteneur du panneau

Pour activer la répétition d’un panneau, procédez comme suit :

1. Sélectionnez un conteneur de panneau, puis sélectionnez .

2. Cliquez sur Répéter le panneau et mettez le bouton (bascule) sur Activer la répétition du panneau.

3. Définissez les répétitions minimales comme requis pour les sections répétables minimales. Vous pouvez définir les répétitions minimales sur zéro pour ne pas répéter de panneaux ou pour supprimer les panneaux répétés. Par défaut, la valeur de répétition minimale est zéro.

4. Définissez les répétitions maximales pour répéter le panneau autant de fois que nécessaire. La valeur est par défaut infinie.

   REMARQUE

   • La répétition minimale ne peut pas être de valeur -ve.
   • Pour créer un panneau non répétable, définissez la valeur des champs maximum et minimum sur 1.

Ajouter une section répétable à l’aide du gestionnaire d’instances (via des scripts)

Le parent du panneau à répéter doit contenir un bouton d’ajout pour gérer l’instance de répétition du panneau. Pour insérer des boutons dans le parent et activer des scripts sur les boutons, procédez comme suit :

1. Ajoutez un composant de bouton au parent du panneau. Dans la vidéo d’exemple ci-dessous, un composant de bouton avec le nom de libellé Ajouter et le nom de champ AddPanel est utilisé. Sélectionnez le composant, puis sélectionnez . Les règles du composant de bouton s’ouvrent dans l’éditeur de règles.

2. Dans la fenêtre Éditeur de règles, cliquez sur Créer.

   Sélectionnez Éditeur visuel dans la ligne Objets et fonctions de formulaire.

   1. Dans la zone de règle, sous QUAND, sélectionnez l’état lorsque l’on clique dessus.
   2. Sous ALORS, sélectionnez Ajouter une instance et glissez-déposez le panneau à l’aide de ou sélectionnez-le à l’aide de l’option Déposer l’objet ou sélectionner ici.

   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 :

   • Pour créer un bouton d’ajout de panneau, spécifiez this.panel.instanceManager.addInstance().

   Cliquez sur Terminé.

Supprimer des sections répétables à l’aide du gestionnaire d’instances (via des scripts)

Le parent du panneau doit contenir un bouton de suppression pour supprimer l’instance des panneaux répétables. Pour insérer des boutons dans le parent et activer des scripts sur les boutons pour supprimer les panneaux répétables, procédez comme suit :

1. Ajoutez un composant de bouton au parent du panneau. Dans la vidéo ci-dessous, un composant de bouton avec le nom de libellé Supprimer et le nom de champ DeletePanel est utilisé. Sélectionnez le composant, puis sélectionnez . Les règles du composant de bouton s’ouvrent dans l’éditeur de règles.

2. Dans la fenêtre Éditeur de règles, cliquez sur Créer.

   Sélectionnez Éditeur visuel dans la ligne Objets et fonctions de formulaire.

   1. Dans la zone de règle, sous QUAND DeletePanel, sélectionnez l’état lorsque l’on clique dessus.
   2. Sous ALORS, sélectionnez Supprimer une instance, et glissez-déposez le panneau à l’aide de ou sélectionnez-le à l’aide de l’option Déposer l’objet ou sélectionner ici.

   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 :

   • Pour créer un bouton de suppression de panneau, spécifiez this.panel.instanceManager.removeInstance(this.panel.instanceIndex).

   Cliquez sur Terminé.

Utilisation des sous-formulaires qui se répètent du modèle de formulaire (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 :

1. Dans la palette Hiérarchie, sélectionnez le sous-formulaire parent du sous-formulaire à répéter.
2. Dans la palette Objet, cliquez sur l’onglet Sous-formulaire et sélectionnez Distribué dans la liste Contenu.
3. Sélectionnez le sous-formulaire à répéter.
4. Dans la palette Objet, cliquez sur l’onglet Sous-formulaire et sélectionnez Positionné ou Distribué dans la liste Contenu.
5. Cliquez sur l’onglet Liaison et sélectionnez Sous-formulaire pour chaque élément.
6. 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 des données, le sous-formulaire n’est pas placé lors de la génération du formulaire.
7. 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 n’indiquez pas de valeur dans la zone Nombre maximum de répétitions, le nombre de répétitions du sous-formulaire est illimité.
8. 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 Nombre initial spécifiée, des instances vides du sous-formulaire sont quand même placées sur le formulaire.
9. 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.
10. Liez maintenant le modèle de formulaire au formulaire adaptatif. Pour obtenir des instructions détaillées, voir Création d’un formulaire adaptatif basé sur un modèle.
11. 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.

Obtenir le fichier

Utilisation des paramètres de répétition d’un schéma XML (XSD)

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>

Voir également

• Créer un formulaire adaptatif AEM
• Ajouter un formulaire adaptatif AEM à une page AEM Sites
• Appliquer des thèmes à un formulaire adaptatif AEM
• Ajouter des composants à un formulaire adaptatif AEM
• Utiliser reCAPTCHA dans un formulaire adaptatif AEM
• Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
• Traduire un formulaire adaptatif AEM
• Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
• Connecter un formulaire adaptatif à Microsoft SharePoint
• Connecter un formulaire adaptatif à Microsoft Power Automate
• Connecter un formulaire adaptatif à Microsoft OneDrive
• Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
• Connecter un formulaire adaptatif à Salesforce
• Utiliser Adobe Sign dans un formulaire adaptatif AEM
• Ajouter un nouveau paramètre régional pour un formulaire adaptatif
• Envoyer des données de formulaire adaptatif à une base de données
• Envoyer des données de formulaire adaptatif à un point d’entrée REST
• Envoyer des données de formulaire adaptatif à un workflow AEM
• Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM