Création d’un modèle de formulaire adaptatif :headding-anchor:adaptive-form-templates
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.
Lorsque vous concevez un formulaire, vous ajoutez des champs et des composants pour définir la structure, le contenu et les actions de formulaire dans l’éditeur. Vous ajoutez des champs et des composants dans le guideRootPanel
du conteneur de formulaires. Avec l’éditeur de modèles, vous pouvez créer un modèle contenant la structure de base et le contenu initial que les auteurs et autrices peuvent utiliser pour créer des formulaires.
Par exemple, vous souhaitez que tous les auteurs de formulaire disposent de certaines zones de texte, de boutons de navigation, ainsi qu’un bouton permettant de soumettre un formulaire d’inscription. Vous pouvez créer un modèle avec les composants que les auteurs et autrices peuvent utiliser pour créer un formulaire qui soit cohérent avec d’autres formulaires d’inscription. Lorsque les auteurs utilisent le modèle pour créer un formulaire adaptatif, le nouveau formulaire hérite de la structure et des composants que vous avez spécifiés dans le modèle. L’éditeur de modèles permet d’effectuer les opérations suivantes :
- Ajoutez les composants d’en-tête et de pied de page d’un formulaire dans le calque de structure.
- Fournissez le contenu initial pour le formulaire.
- Spécifiez un thème, des actions Envoyer.
Vous pouvez télécharger et installer le package de contenu de référence AEM Forms à partir du portail de distribution logicielle pour importer des thèmes et modèles de référence dans votre environnement.
Utilisation de modèles :headding-anchor:working-with-templates
Vous pouvez accéder à l’éditeur de modèles à partir du menu Outils en accédant à Adobe Experience Manager > Outils > Général > Modèles. Ici, les modèles sont organisés dans des dossiers activés pour les modèles modifiables.
Experience Manager met à disposition un dossier global pour organiser les modèles. Cependant, il n’est pas activé par défaut. Vous pouvez demander à votre administrateur d’activer le dossier global ou de créer un nouveau dossier pour les modèles. Pour plus d’informations sur la création de dossiers, voir Dossiers de modèles.
Création d’un modèle :headding-anchor:create-template
Après avoir créé un dossier, ouvrez-le et suivez les étapes ci-après pour créer un modèle :
-
Sélectionnez Créer dans le dossier que vous avez créé.
-
Dans la section Choisir un type de modèle , sélectionnez Modèle de formulaire adaptatif et sélectionnez Suivant.
-
Dans la section Détails du modèle, indiquez un titre de modèle, puis sélectionnez Créer.
Vous pouvez également fournir une description. -
Sélectionnez Terminé pour revenir à la console ou Ouvrir pour ouvrir le modèle dans l’éditeur.
Interface utilisateur de l’éditeur de modèles :headding-anchor:template-editor-ui
Lorsque vous ouvrez un modèle à des fins d’édition, vous pouvez voir les composants suivants de l’Éditeur AEM :
-
Barre d’outils de la page
Contient les options suivantes :- Activer/désactiver le panneau latéral : affiche ou masque la barre latérale.
- Informations sur la page : permet de spécifier des informations telles que l’heure de publication/dépublication, les vignettes, les bibliothèques côté client, la politique de page et la bibliothèque côté client de conceptions de pages.
- Sélecteur de mode : vous permet de changer de mode. Vous pouvez choisir le mode Structure, Contenu initial, ou Contrôle de mise en page. Le mode Structure vous permet d’ajouter et de personnaliser l’en-tête et le pied de page. Le Mode Contenu initial vous permet de personnaliser le contenu du formulaire.
- Aperçu : permet de prévisualiser le modèle avant de le publier. Vous pouvez utiliser le sélecteur de calques et l’aperçu pour activer/désactiver les modes de modification et d’aperçu.
-
Barre latérale : fournit les navigateurs de contenu, de propriétés, de ressources et de composants.
-
Barre d’outils de composant : quand vous choisissez un composant, vous voyez une barre d’outils qui vous permet de personnaliser le composant.
-
Page : la zone dans laquelle vous ajoutez le contenu pour créer le modèle.
Modification d’un modèle :headding-anchor:editing-a-template
Un modèle de formulaire adaptatif est créé à l’aide de deux calques :
- Structure
- Contenu initial
Le sélecteur de calques est disponible en regard de l’option Aperçu dans le coin supérieur droit de l’écran.
Structure :headding-anchor:structure
Lorsque vous sélectionnez le calque de structure dans l’éditeur de modèles, vous pouvez voir les conteneurs de dispositions au-dessus et au-dessous du conteneur de formulaires adaptatifs. Les auteurs et autrices peuvent utiliser ces conteneurs de dispositions pour l’en-tête et le pied de page. Vous pouvez ajouter, modifier ou personnaliser l’en-tête et le pied de page. Faites glisser et déposez le composant d’en-tête de formulaire adaptatif dans le conteneur de dispositions au-dessus du conteneur de formulaires adaptatifs pour personnaliser l’en-tête de modèle. Faites glisser et déposez le composant de pied de page de formulaire adaptatif dans le conteneur de dispositions au-dessous du conteneur de formulaires adaptatifs pour personnaliser le pied de page de modèle.
Conteneurs de dispositions dans le calque de structure
A. Conteneur de dispositions pour le composant En-tête B. Conteneur de dispositions pour le composant Pied de page
Faites glisser et déposez le composant d’en-tête de formulaire adaptatif dans le conteneur de dispositions au-dessus du conteneur de formulaires adaptatifs. Une fois que vous avez ajouté le composant, vous pouvez spécifier les propriétés qui vous permettent d’ajouter un logo et d’indiquer un titre.
De même, lorsque vous faites glisser et déposez le composant de pied de page dans le conteneur de dispositions au-dessous du conteneur de formulaires adaptatifs, vous pouvez fournir les informations de copyright et les détails de l’entreprise.
En-tête et pied de page ajoutés dans le calque de structure
Verrouillage/déverrouillage des composants dans le calque de structure :headding-anchor:locking-unlocking-components-in-the-structure-layer
Lorsque vous modifiez le modèle avec le calque de structure sélectionné, vous pouvez déverrouiller l’en-tête et le pied de page du modèle. Si un composant est déverrouillé dans le modèle, les auteurs du formulaire peuvent modifier le composant dans le formulaire adaptatif qui utilise le modèle. Le verrouillage d’un composant empêche les auteurs du formulaire de le modifier dans le formulaire adaptatif. L’option de verrouillage est disponible dans la barre d’outils des composants.
Par exemple, vous pouvez ajouter le composant d’en-tête dans le modèle. Lorsque vous sélectionnez le composant, vous pouvez voir une option de verrouillage dans la barre d’outils de composant. En règle générale, l’en-tête comprend le nom et le logo de la société, et vous ne souhaitez pas que les auteurs et autrices du formulaire modifient ces informations dans un modèle. Dans un formulaire adaptatif créé à l’aide du modèle avec le composant d’en-tête verrouillé, les auteurs du formulaire ne peuvent pas changer le logo ni le nom de la société.
Contenu initial :headding-anchor:initial-content
Lorsque l’option Contenu initial est sélectionnée, le conteneur de formulaires adaptatifs du modèle s’affiche comme un formulaire adaptatif à des fins de modification. Comme lors de la création d’un formulaire adaptatif, vous pouvez spécifier des paramètres initiaux, par exemple en sélectionnant un thème et des actions Envoyer.
Les auteurs et autrices de formulaires l’utilisent comme base pour créer un formulaire. La structure de flux de contenu est spécifiée dans le calque Contenu initial du modèle. Pour passer à la modification du contenu initial du modèle de formulaire, avant Aperçu dans la barre d’outils de la page, sélectionnez > Contenu initial.
Dans le calque Contenu initial, vous créez le modèle de formulaire adaptatif que les auteurs utilisent en tant que base. La création d’un modèle est semblable à la création d’un formulaire : vous utilisez les options disponibles dans la barre latérale. Celle-ci fournit les navigateurs de contenu, de propriétés, de ressources et de composants.
Création d’un modèle de formulaire adaptatif avec des onglets et des panneaux :headding-anchor:creating-an-adaptive-form-template-with-tabs-and-panels-nbsp
Par exemple, si vous souhaitez créer un modèle avec les onglets suivants :
- Informations générales
- Informations professionnelles
Vous avez ajouté un logo, fourni un titre et ajouté un pied de page dans le calque de structure. Verrouillez l’en-tête et le pied de page pour empêcher les auteurs de formulaires de les modifier lorsqu’ils utilisent le modèle pour créer des formulaires.
Modifiez le type Structure en type Contenu initial pour le calque et commencez à ajouter du contenu au formulaire. Pour créer une structure à onglets, ajoutez un panneau enfant dans le guideRootPanel du conteneur de formulaires adaptatifs. Pour ajouter un panneau :
-
Vous pouvez ajouter un panneau en appuyant sur le bouton + lorsque vous sélectionnez l’option Faire glisser les composants ici.
-
Vous pouvez faire glisser le composant de panneau depuis le navigateur de composants et le déposer dans la barre latérale.
-
Vous pouvez ajouter un panneau enfant du
guideRootPanel
depuis la barre d’outils de composant.
Pour créer les onglets Informations générales et Informations professionnelles, ajoutez deux panneaux au panneau enfant du guideRootPanel
. Sélectionnez les panneaux, puis
pour afficher les propriétés dans la barre latérale. Modifiez les noms d’élément en general-info
et professional-info
, et les titres en Informations générales et Informations professionnelles, respectivement. Dans la barre latérale, sélectionnez le contenu pour afficher l’explorateur de contenu. Dans l’onglet Objets de formulaire, sélectionnez guideRootPanel
. Dans l’éditeur, le guideRootPanel est sélectionné. Sélectionnez
dans la barre d’outils de composant pour afficher ses propriétés. Dans le champ Disposition de panneau, sélectionnez Onglets supérieurs et cliquez sur Terminé. La structure de modèle à onglets est appliquée.
Ajout de contenu dans les onglets :headding-anchor:adding-content-in-tabs
Une fois que vous avez ajouté les panneaux et que vous les avez structurés sous forme d’onglets, vous pouvez ajouter des champs dans les onglets. Lorsque vous sélectionnez un onglet dans l’éditeur, vous pouvez voir l’option Faire glisser les composants ici. Vous pouvez faire glisser et déposer les composants tels que les zones de texte, les éléments de liste et les boutons. Vous pouvez faire glisser les composants depuis le navigateur de composants et les déposer dans la barre latérale.
Chaque composant possède des propriétés qui améliorent la capture et la manipulation des données. Par exemple, vous pouvez activer la propriété Champ obligatoire d’un composant. Les auteurs peuvent définir un message que vos clients voient lorsqu’ils omettent de remplir un champ obligatoire. Spécifiez le message dans la propriété Message de champ obligatoire.
Dans l’exemple de modèle, les champs Nom, Numéro de téléphone et Date de naissance sont ajoutés dans l’onglet Informations générales. Dans l’onglet Informations professionnelles, les champs Employé(e) actuellement, Type d’emploi et Formation ont été ajoutés.
Après avoir ajouté des champs, vous pouvez ajouter des boutons tels qu’Envoyer et Réinitialiser.
Activation du modèle :headding-anchor:enabling-the-template
Lorsque vous créez un modèle, il est ajouté en tant que brouillon. Activez le modèle afin de l’utiliser pour créer des formulaires adaptatifs. Pour activer un formulaire :
-
Accédez à Adobe Experience Manager > Outils > Modèles, et ouvrez le dossier dans lequel vous avez créé le modèle.
-
Le modèle que vous avez créé est marqué comme Brouillon.
-
Sélectionnez le modèle, puis cliquez sur Activer dans la barre d’outils.
Lorsque vous créez un formulaire adaptatif, vous pouvez voir le modèle affiché lorsque vous êtes invité à choisir un modèle.
Importation ou exportation d’un modèle :headding-anchor:importing-or-exporting-a-template
Un formulaire fonctionne avec son modèle. Lorsque vous téléchargez un formulaire adaptatif créé à l’aide d’un modèle personnalisé, celui-ci n’est pas téléchargé. Lorsque vous importez le formulaire dans une autre instance AEM Forms, il est importé sans son modèle. Si le modèle d’un formulaire importé n’est pas disponible, le formulaire n’est pas rendu. Vous pouvez compresser le modèle personnalisé à partir du nœud /conf
dans https://<server>:<port>/crx/packmgr
et le transférer dans l’instance dans laquelle vous souhaitez charger le formulaire. AEM Forms. Vous pouvez également créer un modèle à l’aide d’AEM Archetype et le déployer sur votre instance de Cloud Services.
- Vous pouvez également configurer le modèle Document d’enregistrement directement à partir de l’éditeur de formulaire adaptatif ou de l’éditeur de modèle de formulaire adaptatif. Pour de plus amples informations, voir Générer un document d’enregistrement pour les formulaires adaptatifs.
Associer un schéma de modèle de données de formulaire à un modèle :headding-anchor:associating-form-data-model-schema-in-template
Vous pouvez associer un Schéma de modèle de données de formulaire à un modèle de formulaire adaptatif dans un éditeur de modèles. Il permet aux créateurs et aux créatrices de sélectionner un schéma dans l’éditeur de modèles. Lorsque vous associez un schéma à un modèle et qu’un créateur ou une créatrice de formulaire crée un formulaire basé sur le modèle, le schéma est présélectionné pour le formulaire. Il permet aux créateurs et aux créatrices de formulaires de réglementer l’utilisation du schéma et de gagner du temps. Pour sélectionner un schéma de modèle de données de formulaire dans l’éditeur de modèles :
- Sélectionnez Explorateur de contenu situé sur le côté gauche.
- Accédez au conteneur de formulaires Paramètre.
- Sélectionnez Modèle de données.
- Choisissez votre modèle de données de formulaire via Sélectionner un modèle de données de formulaire et enregistrez la configuration.
Création d’un formulaire adaptatif à l’aide du modèle :headding-anchor:creating-an-adaptive-form-using-the-template
Une fois que vous avez créé et activé un modèle, il est disponible dans le gestionnaire de formulaires lorsque vous créez un formulaire adaptatif. Pour utiliser un modèle et créer un formulaire adaptatif, voir Création d’un formulaire adaptatif.
Enregistrer un formulaire adaptatif en tant que modèle :headding-anchor:saving-adaptive-form-as-template
Vous pouvez également enregistrer un formulaire adaptatif en tant que modèle pour une utilisation ultérieure. Pour enregistrer un formulaire adaptatif en tant que modèle :
-
Sélectionnez un formulaire adaptatif à enregistrer en tant que modèle.
-
Cliquez sur Enregistrer en tant que modèle. Une boîte de dialogue s’affiche.
-
Spécifiez le Titre (champ obligatoire), l’Emplacement (champ obligatoire) et la Description (champ facultatif) pour le modèle.
-
Cliquez sur Créer.
Recommandations :headding-anchor:recommendations
- Lorsque vous modifiez les propriétés du formulaire dans l’éditeur de modèles, n’utilisez pas la propriété BindReference.
- Si vous souhaitez ajouter un point d’arrêt, créez-le lorsque vous rédigez un modèle de formulaire adaptatif.
Pour plus d’informations sur les points d’arrêt, voir Mise en page réactive.
Voir également :headding-anchor:see-also
- 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
- Ajouter des contrôles de version, des commentaires et des annotations à un formulaire adaptatif
- Comparer des formulaires adaptatifs