Fonctionnalités de mise en page de Forms adaptatif basées sur les composants principaux
Adaptive Forms fournit des composants de première classe pour la mise en page et la conception de formulaires de manière efficace. La mise en page contrôle l’affichage des composants dans un formulaire. Les Forms adaptatives prennent en charge différentes mises en page : panneau, assistant, accordéon, onglets dans les onglets supérieur/horizontal et onglets dans les onglets gauche/vertical.
Condition préalable
Avant d’explorer les différentes fonctionnalités d’une mise en page, vérifiez que les composants principaux sont activés pour votre environnement. Pour obtenir des instructions détaillées sur l’activation des composants principaux pour votre environnement, cliquez ici.
Types de disposition Adaptive Forms
Le formulaire adaptatif basé sur les composants principaux prend en charge les types de disposition suivants :
- Mise en page du panneau
- Mise en page de l’assistant
- Disposition verticale
- Disposition horizontale
- Mise en page en accordéon
La disposition de panneau est utile pour organiser les champs associés de manière à faciliter la navigation et la recherche de contenu correspondant. La disposition du panneau dispose les composants de formulaire dans des sections ou des panneaux distincts d’un formulaire adaptatif.
Disposition de panneau
Vous pouvez utiliser le composant de panneau pour ajouter la disposition de panneau dans un formulaire. Pour obtenir des instructions détaillées sur la configuration des différentes propriétés du composant Panneau, reportez-vous à l’article panel component .
La mise en page de l’assistant permet de simplifier un formulaire complexe en le divisant en plusieurs étapes distinctes. Chaque étape représente une partie différente du processus, et les utilisateurs parcourent les étapes de manière séquentielle, souvent avec les boutons Suivant et Précédent . Vous pouvez utiliser la mise en page de l’assistant pour créer un formulaire comprenant plusieurs sections ou étapes.
Disposition de l’assistant
Vous pouvez utiliser le composant assistant pour ajouter la disposition de l’assistant dans un formulaire. Pour obtenir des instructions détaillées sur la configuration des différentes propriétés du composant Assistant, reportez-vous à l’article assistant component .
La disposition à onglets verticaux est également appelée onglets dans la disposition de gauche. La mise en page à onglets verticaux organise les panneaux ou les sections le long du côté gauche d’un formulaire. Il s’agit d’une disposition courante pour les formulaires où les panneaux/sections sont empilés verticalement pour faciliter la lecture et la navigation.
Disposition des onglets verticaux
Vous pouvez utiliser le composant Onglets verticaux pour ajouter la mise en page Onglets verticaux dans un formulaire. Pour obtenir des instructions détaillées sur la configuration des différentes propriétés du composant Onglets verticaux, reportez-vous à l’article Composant Onglets verticaux .
La disposition des onglets horizontaux est également appelée Onglets dans la disposition supérieure. La disposition des onglets horizontaux organise les panneaux ou les sections côte à côte dans une rangée. Cette disposition présente les sections de formulaire de manière linéaire sur la largeur du formulaire ou du panneau.
Disposition des onglets horizontaux
Vous pouvez utiliser le composant Onglets horizontaux pour ajouter la disposition Onglets horizontaux dans un formulaire. Pour obtenir des instructions détaillées sur la configuration des différentes propriétés du composant Onglets horizontaux, reportez-vous à l’article Composant Onglets horizontaux .
La disposition en accordéon affiche le contenu dans des sections ou des panneaux réductibles d’un formulaire adaptatif. Lorsqu’une section est développée, elle affiche le contenu dans , tandis que d’autres sections restent réduites. Cette disposition est idéale pour afficher de grandes quantités d’informations sous une forme compacte.
Disposition en accordéon
Vous pouvez utiliser le composant d’accordéon pour ajouter la disposition d’accordéon dans un formulaire. Pour obtenir des instructions détaillées sur la configuration des différentes propriétés du composant d’accordéon, reportez-vous à l’article composant d’accordéon .
Pour savoir comment insérer une mise en page et y ajouter des composants de formulaire, reportez-vous à la section intitulée Comment insérer une mise en page et y ajouter des composants de formulaire ?
Comment choisir la bonne disposition de formulaire adaptatif ?
Il est important de sélectionner la disposition de formulaire adaptatif appropriée pour optimiser l’expérience utilisateur et les fonctionnalités de formulaire. Le tableau vous aide à comprendre les différentes options de mise en page disponibles et vous guide dans la sélection de la mise en page la plus appropriée en fonction de vos besoins et cas d’utilisation spécifiques :
- En arrière : bouton "Précédent"
- Étapes facultatives de saut
Comment insérer une mise en page et y ajouter des composants de formulaire ?
Le diagramme ci-dessous montre les étapes à suivre pour insérer une mise en page dans un formulaire et y ajouter des composants de formulaire :
Examinez le formulaire de demande informatique affiché dans la section Types de disposition de Forms adaptatif . Le formulaire rassemble des informations provenant des employés qui rencontrent des problèmes techniques liés à leur réseau ou leur ordinateur portable. Il comprend trois panneaux :
-
Détails de l’employé : le panneau collecte des informations sur l’employé et contient trois zones de texte intitulées Nom, ID de message électronique et Service.
-
Détails du problème : le panneau capture les détails du problème. Elle comprend une case à cocher pour la catégorie de problèmes avec trois options : Réseau, Ordinateur ou Autre. Il comprend également deux zones de texte intitulées Veuillez préciser et Commentaires .
-
Pièces jointes : le panneau permet aux utilisateurs de télécharger des documents annexes liés au problème.
Explorons le processus étape par étape pour insérer une mise en page et y ajouter des composants. Dans cet exemple, une disposition à onglets horizontaux est insérée dans un formulaire.
1. Insertion d’un composant de mise en page dans un formulaire
-
Connectez-vous à l’instance Experience Manager Forms.
-
Dans le coin supérieur gauche, sélectionnez Adobe Experience Manager > Forms > Forms & Documents.
-
Ouvrez un formulaire adaptatif existant en mode d’édition s’il a déjà été créé.
Vous pouvez également créer un formulaire adaptatif.
-
Recherchez la section dans l’éditeur de formulaire qui vous permet d’ajouter une mise en page.
-
Cliquez sur l'icône Ajouter . L’icône est un signe plus (+) qui indique l’option d’ajout de nouveaux composants.
Cliquez sur l’icône Ajouter pour afficher une boîte de dialogue Insérer un nouveau composant qui affiche divers composants à insérer.
note note NOTE Vous pouvez également faire glisser et déposer le composant de mise en page. -
Parcourez les composants disponibles dans la boîte de dialogue et sélectionnez la disposition souhaitée dans la liste. Dans notre cas, nous sélectionnons le composant Onglets horizontaux pour insérer la disposition des onglets horizontaux.
Lorsque vous ajoutez le composant Onglets horizontaux à votre formulaire, il se compose initialement de deux panneaux vides, nommés Item1 et Item2, par défaut. Vous devez ajouter manuellement des composants de formulaire à ces panneaux.
-
Ouvrez les propriétés du composant Onglets horizontaux et spécifiez le nom du composant.
Par exemple, dans ce cas, nous ajoutons le nom du composant Onglets horizontaux en tant que formulaire de demande informatique. -
Cliquez sur Terminé.
Une fois le composant de mise en page ajouté dans le formulaire, modifiez le nombre de panneaux en fonction des besoins.
2. Ajout de panneaux à la mise en page
Ajoutez un nouveau panneau au composant Onglets horizontaux :
-
Ouvrez les propriétés du composant Onglets horizontaux et cliquez sur l’onglet Éléments .
-
Cliquez sur l'icône Ajouter pour ajouter un nouveau panneau.
Lorsque vous cliquez sur l'icône Ajouter, la boîte de dialogue Insérer un nouveau composant s'affiche.
-
Sélectionnez le composant de panneau.
Lorsque vous sélectionnez le composant Panneau, le nouveau panneau est ajouté à la disposition horizontale.
Attribuez un nom au nouveau panneau. Dans le cas contraire, vous ne pourrez pas enregistrer les propriétés du composant Onglets horizontaux.
-
Spécifiez les noms des panneaux comme illustré dans la figure ci-dessous :
-
Cliquez sur Terminé.
Une fois que vous avez cliqué sur Terminé, les trois panneaux s’affichent côte à côte dans une ligne. Les noms des panneaux s’affichent sous forme d’en-têtes pour chaque panneau. Vous pouvez y ajouter des composants.
Vous pouvez configurer les propriétés du composant Panneau. Par exemple, le formulaire de demande informatique n’inclut pas de titres de panneau. Voici les étapes de configuration des propriétés du composant de panneau.
-
Ouvrez les propriétés du premier panneau.
-
Cochez la case Masquer le titre dans l’onglet De base .
-
Cliquez sur Terminé.
De même, vous pouvez masquer les titres des deux autres panneaux. Une fois que vous avez terminé, vous pouvez ajouter des composants de formulaire à chaque panneau.
3. Ajout de composants de formulaire au panneau
-
Localisez la section du panneau qui vous permet d’ajouter des composants.
-
Cliquez sur l'icône Ajouter . L’icône est un signe plus (+) qui indique l’option d’ajout de nouveaux composants.
Cliquez sur l’icône Ajouter pour afficher une boîte de dialogue Insérer un nouveau composant qui affiche divers composants à insérer.
-
Parcourez les composants disponibles dans la boîte de dialogue qui s’affiche et sélectionnez le composant souhaité. Dans notre cas, sélectionnez le composant Zone de texte .
-
Ouvrez les propriétés du composant ajouté et indiquez son nom. Permet de modifier les propriétés du composant Zone de texte ajouté et de spécifier son nom.
-
De même, ajoutez deux autres composants de zone de texte et nommez les composants ajoutés en tant qu’ID de courrier électronique et Service.
Maintenant que les composants du premier panneau ont été ajoutés, vous pouvez continuer à ajouter les composants au deuxième panneau.
-
Pour changer de panneau, cliquez sur Sélectionner un panneau dans la barre d’outils.
Lorsque vous cliquez sur l’icône Sélectionner un panneau, la liste des panneaux ajoutés dans le composant Onglets horizontaux s’affiche.
-
Sélectionnez 2 Panel dans la liste des panneaux et l’affichage passe du premier panneau au second.
-
Répétez les étapes décrites des étapes 2 à 4 pour ajouter les composants souhaités dans le panneau 2, comme illustré dans la figure ci-dessous :
-
Passez au 3 Panel en suivant les étapes décrites aux étapes 6 et 7.
-
Répétez les étapes décrites des étapes 2 à 4 pour ajouter le composant souhaité dans le panneau 3 :
-
Cliquez sur Aperçu dans le coin supérieur droit de votre environnement de création.
Vous pouvez également faire glisser les composants pour ajouter les composants de formulaire à chaque panneau.
Vous pouvez également supprimer un composant de formulaire du panneau à l’aide de l’icône
Vous pouvez également ajouter les validations requises pour les composants, selon les besoins.
Comment remplacer une disposition existante par une nouvelle disposition ?
Vous pouvez remplacer une mise en page d’un formulaire par une nouvelle mise en page, ce qui implique de modifier la façon dont les composants sont organisés et affichés dans un formulaire.
Effectuez les étapes suivantes pour remplacer la disposition existante d’un formulaire :
-
Cliquez sur l’icône Remplacer dans la barre d’outils du composant de mise en page et la boîte de dialogue Remplacer le composant s’affiche.
-
Sélectionnez la disposition souhaitée dans la boîte de dialogue Remplacer le composant.
Après avoir sélectionné la mise en page, la disposition des composants change en conséquence. Par exemple, sélectionnez le composant Onglets verticaux dans la boîte de dialogue Remplacer le composant ; la disposition du panneau se transforme en onglets à gauche :
Octets supplémentaires
Pour faire glisser des composants dans l’éditeur de formulaire, procédez comme suit :
-
Recherchez la section qui vous permet d’ajouter des composants.
-
Accédez au panneau de gauche dans votre environnement de création et cliquez sur Composants.
Lorsque vous cliquez sur l’option Components , la liste des composants disponibles s’affiche.
-
Parcourez les composants disponibles et sélectionnez le composant souhaité.
-
Faites glisser le composant en cliquant et en le maintenant enfoncé, puis faites-le glisser sur la zone de panneau pour le placer.
-
Déposez le composant dans le panneau en relâchant la souris.
Étapes suivantes
Une fois que vous connaissez les différentes fonctionnalités de mise en page d’un formulaire adaptatif en fonction des composants principaux, vous pouvez passer aux étapes suivantes :
Voir également
- Créer un formulaire adaptatif AEM
- Ajouter un formulaire adaptatif AEM à la 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
- Ajouter des contrôles de version, des commentaires et des annotations à un formulaire adaptatif
- Comparer des formulaires adaptatifs