Créer un formulaire adaptatif basé sur les composants principaux 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 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, des composants et de ceux que vous avez spécifiés dans le modèle. L’éditeur de modèles permet d’effectuer les opérations suivantes :

Condition préalable

Activer les composants principaux de Forms adaptatif pour votre environnement : lorsque vous créez un programme, les composants principaux de Forms adaptatif sont déjà activés pour votre environnement. Si vous disposez d’un environnement as a Cloud Service formulaire basé sur AEM Archetype 39 ou version antérieure, Activez les composants principaux Forms adaptatif pour votre environnement.

Utilisation d’un modèle 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 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 :

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

Les différents modes de sélection et de modification de l’aspect approprié du modèle sont les suivants :

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, il est utile de prédéfinir le contenu qui ne peut pas être modifié lors de la création d’un Forms adaptatif associé au modèle.

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 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 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. Il vous permet de créer un contenu prédéfini qui peut être modifié lors de la création d’un Forms adaptatif associé au modèle. 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.

Disposition layout

Lors de la modification d’un modèle, vous pouvez définir la mise en page, qui utilise une mise en page réactive standard. La mise en page permet de gérer la largeur d’un composant en fonction de la largeur de l’appareil pour faciliter une conception de formulaire adaptatif réactive.

Pour plus d’informations, reportez-vous à l’article Comprendre la mise en page réactive .

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 afin de 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 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 Service.

Associer un schéma de modèle de données de formulaire à un modèle 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 auteurs de formulaires de réglementer l’utilisation du schéma et de gagner du temps pour les auteurs de formulaires. Pour sélectionner un schéma de modèle de données de formulaire dans l’éditeur de modèles :

Ajout de propriétés personnalisées aux composants de formulaire adaptatif à l’aide de la stratégie de modèle

Les propriétés personnalisées vous permettent d’associer des attributs personnalisés (paires clé-valeur) à un composant principal de formulaire adaptatif à l’aide du modèle de formulaire. Les propriétés personnalisées sont répercutées dans la section properties du rendu sans affichage du composant. Cela permet de créer un comportement de formulaire dynamique qui s’adapte en fonction des valeurs d’attributs personnalisés. Par exemple, les développeurs et développeuses peuvent concevoir plusieurs rendus d’un composant de formulaires découplés pour des plateformes mobiles, de bureau ou web, ce qui améliore considérablement l’expérience client sur un large éventail d’appareils.

Les étapes pour ajouter des propriétés personnalisées aux champs de composant principal de formulaire adaptatif sont les suivantes :

Ajout d’un nom de groupe personnalisé dans la stratégie de l’éditeur de modèles add-a-custom-group-name

Lorsque vous ajoutez au moins un groupe de propriétés personnalisé à l’aide de la stratégie de modèle, l’onglet Avancé devient visible dans la boîte de dialogue Modifier d’un composant principal correspondant.

Sélectionner un nom de groupe personnalisé dans la boîte de dialogue de modification d’un composant principal select-a-custom-group-name

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 basé sur des composants principaux.

Bonnes pratiques best-practices

Voir également see-also