Modèles de formulaires adaptatifs adaptive-form-templates

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 qui contient la structure de base et le contenu initial que les auteurs 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 peuvent utiliser pour créer un formulaire compatible 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 vous permet d’effectuer les opérations suivantes :

Utilisation de modèles working-with-templates

Vous pouvez accéder à l’éditeur de modèles à partir du menu Outils en accédant à Adobe Experience Manager > Outils > Modèles. Ici, les modèles sont organisés dans des dossiers activés pour les modèles modifiables. AEM fournit 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 dossier pour les modèles. Pour plus d’informations sur la création de dossiers, voir Dossiers de modèles.

Une fois que vous appuyez pour ouvrir un dossier, vous trouverez un bouton Créer qui permet de créer un nouveau modèle pour les formulaires adaptatifs.

Création d’un modèle create-template

Après avoir créé un dossier, ouvrez-le et suivez les étapes ci-après pour créer un modèle :

Interface utilisateur de l’éditeur de modèles template-editor-ui

Lorsque vous ouvrez un modèle à des fins d’édition, vous pouvez voir les composants suivants de l’Éditeur AEM :

Voir Présentation de la création de formulaires adaptatifs pour découvrir l’éditeur d’interface utilisateur tactile.

Modification d’un modèle editing-a-template

Un modèle de formulaire adaptatif est créé à l’aide de deux calques :

Le sélecteur de calques est disponible en regard de l’option Aperçu dans le coin supérieur droit de l’écran.

Structure 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 peuvent utiliser ces conteneurs de mise en page 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 Pied de page de formulaire adaptatif dans le conteneur de mises en page sous le conteneur de formulaires adaptatifs pour personnaliser le pied de page du modèle.

Figure : Conteneurs de mise en page 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. Après avoir ajouté le composant, vous pouvez spécifier ses propriétés qui vous permettent d’ajouter un logo et de fournir son 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.

Figure : En-tête et pied de page ajoutés dans le calque Structure

Verrouillage/déverrouillage des composants dans le calque de structure 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 de formulaires peuvent le modifier dans le formulaire adaptatif qui l’utilise. Le verrouillage d’un composant empêche les auteurs de formulaires de le modifier dans le formulaire adaptatif. L’option Verrouiller est disponible dans la barre d’outils du composant.

Par exemple, vous ajoutez 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 du 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 de formulaires modifient le logo et l’en-tête d’un modèle. Dans un formulaire adaptatif créé à l’aide du modèle avec le composant d’en-tête verrouillé, les auteurs de formulaires ne peuvent pas modifier le logo et le nom de la société.

Contenu initial initial-content

Lorsque l’option Contenu initial est sélectionnée, le conteneur de formulaires adaptatifs du modèle s’ouvre comme un formulaire adaptatif pour modification. Comme pour la création d’un formulaire adaptatif, vous pouvez spécifier les paramètres initiaux, tels que la sélection d’un thème et les actions d’envoi.

Les auteurs 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, appuyez sur ​ > Contenu initial ​.

Calque Contenu initial dans l’éditeur de modèles affichant le conteneur de formulaires adaptatifs sélectionné pour la spécification des propriétés.

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 similaire à la création d’un formulaire. Vous utilisez les options disponibles dans la barre latérale. La barre latérale fournit des navigateurs de contenu, de propriétés, de ressources et de composants.

Voir Barre latérale.

Création d’un modèle de formulaire adaptatif avec des onglets et des panneaux  creating-an-adaptive-form-template-with-tabs-and-panels-nbsp

Par exemple, vous souhaitez créer un modèle avec les onglets suivants :

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.

Remplacez le calque Structure par Contenu initial, puis 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 :

Pour créer les onglets Informations générales et Informations professionnelles, ajoutez deux panneaux au panneau enfant du guideRootPanel. Sélectionnez les panneaux et tapez sur  pour ouvrir 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 professionnelle, respectivement. Dans la barre latérale, appuyez sur le contenu pour ouvrir l’explorateur de contenu. Dans l’onglet Objets de formulaire, sélectionnez guideRootPanel. Dans l’éditeur, le guideRootPanel est sélectionné. Tapez sur   dans la barre d’outils de composant pour ouvrir ses propriétés. Dans le champ Disposition de panneau, sélectionnez Onglets supérieurs et appuyez sur Terminé. La structure de modèle à onglets est appliquée.

Ajout de contenu dans les onglets adding-content-in-tabs

Ajouter des champs dans le modèle

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, le Faire glisser des composants ici . Vous pouvez faire glisser et déposer des composants tels que des zones de texte, des éléments de liste et des boutons. Vous pouvez faire glisser et déposer des composants à partir de l’explorateur de composants 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 Actuellement employé, Type d'emploi, Qualification des études sont ajoutés.

Après avoir ajouté des champs, vous pouvez ajouter des boutons tels qu’Envoyer et Réinitialiser.

Activation du modèle enabling-the-template

Lorsque vous créez un modèle, il est ajouté en tant que brouillon. Activez le modèle pour l’utiliser pour créer des formulaires adaptatifs. Pour activer un formulaire :

Importation ou exportation d’un modèle 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 AEM Forms dans laquelle vous souhaitez charger le formulaire.

Création d’un formulaire adaptatif à l’aide du modèle 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.

Modifier l’option d’affichage des modèles prêts à l’emploi change-display-option-of-out-of-the-box-templates

Vous pouvez créer des modèles personnalisés pour les formulaires adaptatifs afin de définir la structure de base et le contenu initial. AEM Forms fournit également un ensemble de modèles prêts à l’emploi pour les formulaires adaptatifs. Vous pouvez afficher ou masquer les modèles.

Pour afficher et masquer des modèles, procédez comme suit :

Recommandations recommendations