Show Menu
SUJETS×

Création d’un modèle de formulaire adaptatif personnalisé

AEM Forms a introduit les modèles dynamiques. Vous pouvez utiliser l’éditeur de modèles de sites AEM pour créer ou modifier des modèles dynamiques . Les modèles mentionnés dans l’article ci-dessous sont des modèles statiques. Ceux-ci ne sont pas disponibles sur une installation par défaut. Installez le package de compatibilité pour obtenir ces modèles sur votre environnement.

Conditions préalables

Modèle de formulaire adaptatif

Un modèle de formulaire adaptatif est un modèle de page AEM spécialisé avec des propriétés et une structure de contenu qui est utilisé pour créer un formulaire adaptatif. Il possède des dispositions, des styles et une structure de contenu initiale de base préconfigurés.
Une fois que vous avez créé un formulaire, les modifications apportées à la structure de contenu du modèle d’origine ne sont pas répercutées dans le formulaire.

Modèles de formulaire adaptatif par défaut

AEM Quickstart fournit les modèles de formulaires adaptatifs suivants :
  • Modèle d'enquête : Vous permet de créer un formulaire adaptatif d’une seule page à l’aide de la disposition réactive dont plusieurs colonnes sont configurées. La disposition s’ajuste automatiquement selon les dimensions des différents écrans sur lesquels vous souhaitez afficher le formulaire.
  • Modèle Simple Enrollment : Permet de créer un formulaire adaptatif à plusieurs étapes à l’aide d’une disposition d’assistant. Dans cette disposition, vous pouvez spécifier une expression d’achèvement d’étape pour chaque étape, qui est validée avant que l’assistant ne passe à l’étape suivante.
  • Modèle d’inscription à onglets : Vous permet de créer un formulaire adaptatif à plusieurs onglets à l’aide d’une disposition d’onglets sur la gauche, où vous pouvez consulter les onglets de manière aléatoire.
  • Modèle Inscription avancée : permet de créer un formulaire avec plusieurs onglets et l’assistant. Il utilise une disposition d’onglets sur la gauche qui vous permet de consulter les onglets dans n’importe quel ordre. Il utilise les services d’Adobe Document Cloud eSign pour la signature et la vérification.
  • Modèle vierge : permet de créer un formulaire sans aucun contenu d’en-tête, de pied de page et initial. Vous pouvez ajouter des composants tels que des zones de texte, des boutons et des images. Le modèle vierge permet de créer un formulaire que vous pouvez incorporer dans des pages du site AEM .
Ces modèles possèdent la propriété sling:resourceType définie sur le composant de page correspondant. Le composant de page effectue le rendu de la page CQ contenant le conteneur du formulaire adaptatif, qui à son tour effectue le rendu du formulaire adaptatif.
Le tableau suivant montre l’association entre les modèles et le composant de page :
Modèle
Composant de page
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedenrollment

Création d’un modèle de formulaire adaptatif à l’aide de l’éditeur de modèle

Vous pouvez spécifier la structure et le contenu initial d’un formulaire adaptatif à l’aide de l’éditeur de modèles. Par exemple, vous souhaitez que tous les auteurs de formulaire aient quelques zones de texte, des boutons de navigation, ainsi qu’un bouton permettant de soumettre un formulaire d’inscription. Vous pouvez créer un modèle que les auteurs peuvent utiliser pour créer un formulaire compatible à d’autres formulaires d’inscription. L’éditeur de modèles AEM permet d’effectuer les opérations suivantes :
  • Ajout de 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.
  • Spécifiez des actions telles que l’envoi, la réinitialisation et la navigation.
Pour plus d’informations, voir Éditeur de modèle .

Création d’un modèle de formulaire adaptatif à partir de CRXDE

Au lieu d’utiliser les modèles disponibles, vous pouvez créer un modèle et l’utiliser pour créer des formulaires adaptatifs. Les modèles personnalisés reposent sur différents composants de page qui référencent les conteneurs de formulaire adaptatif et les éléments de page comme les en-tête et pied de page.
Vous pouvez créer ces composants à l’aide du composant de page base de votre site Web. Vous pouvez également étendre le composant de page du formulaire adaptatif que les modèles prêts à l’emploi utilisent.
Pour créer un modèle personnalisé comme simpleEnrollmentTemplate, suivez la procédure ci-après.
  1. Accédez à CRXDE Lite sur votre instance de création.
  2. Sous le répertoire /apps, créez la structure des dossiers pour votre application. Si le nom de l’application est par exemple mycompany, créez un dossier portant ce nom. En règle générale, le dossier d’application contient les répertoires d’installation, de composants, de configuration, de modèles et src. Dans le cadre de cet exemple, créez les dossiers de composants, de configuration et de modèles.
  3. Accédez au dossier /libs/fd/af/templates.
  4. Copy the simpleEnrollmentTemplate node.
  5. Accédez au dossier /apps/mycompany/templates. Cliquez avec le bouton droit dessus et sélectionnez Coller .
  6. Si nécessaire, renommez le nœud de modèle que vous avez copié. Renommez-le par exemple en tant qu’enrollment-template.
  7. Accédez à l’emplacement /apps/mycompany/templates/enrollment-template.
  8. Modify the jcr:title and jcr:description properties for the jcr:content node to distinguish the template from the template you copied.
  9. The jcr:content node of the modified template contains the guideContainer and guideformtitle components. Le composant guideContainer est le conteneur qui contient le formulaire adaptatif. Le composant guideformtitle affiche le nom, la description et d’autres informations sur l’application.
    A la place du composant guideformtitle , vous pouvez inclure un composant personnalisé ou le composant parsys . Par exemple, supprimez le composant guideformtitle et ajoutez un composant personnalisé ou le nœud de composant parsys . Vérifiez que la propriété sling:resourceType du composant référence ce dernier et que la même propriété est définie dans le fichier component.jsp de la page.
  10. Accédez à l’emplacement /apps/mycompany/templates/enrollment-template/jcr:content.
  11. Ouvrez l’onglet Properties (Propriétés) et modifier la valeur de la propriété cq:designPath en /etc/designs/mycompany.
  12. Créez maintenant un nœud /etc/designs/mycompany pour le cq:Page type

Création d’un composant de page de formulaire adaptatif

Le modèle personnalisé possède les mêmes styles que le modèle par défaut, car il référence le composant de page /libs/fd/af/components/page/base. Vous pouvez trouver la référence au composant en tant que propriété sling:resourceType définie sur le nœud /apps/mycompany/templates/enrollment-template/jcr:content. Etant donné que base est un composant de produit principal, ne modifiez pas ce composant.
  1. Accédez au nœud /apps/mycompany/templates/enrollment-template/jcr:content et modifiez la valeur de la propriété sling:resourceType en /apps/mycompany/components/page/enrollmentpage
  2. Copiez le nœud /libs/fd/af/components/page/base dans le dossier /apps/mycompany/components/page.
  3. Renommez le composant copié en enrollmentpage .
  4. (Uniquement si vous disposez déjà d’une page de contenu) Effectuez les étapes suivantes (a-d), si vous disposez d’un contentpage composant existant pour votre site Web. If you do not have an existing contentpage component for your website, you can leave the resourceSuperType property to point to the OOTB base page.
    1. For the enrollmentpage node, set value of the property sling:resourceSuperType to mycompany/components/page/contentpage. Le composant contentpage est le composant de page base de votre site. D’autres composants de page peuvent l’étendre. Remove script files under enrollmentpage , except head.jsp , content.jsp , and library.jsp . The sling:resourceSuperType component, which is contentpage in this case, includes all such scripts. Les en-têtes, dont la barre de navigation et le pied de page, sont hérités du composant contentpage
    2. Open the file head.jsp .
      The JSP file contains the line <cq.include script="library.jsp"/> .
      Le fichier library.jsp contient la bibliothèque cliente guide.theme.simpleEnrollment , qui comporte les styles du formulaire adaptatif.
      The page component enrollmentpage has an exclusive head.jsp file that overrides the head.jsp file of the contentpage component.
    3. Include all scripts in the head.jsp file for the contentpage component to the head.jsp file for the enrollmentpage component.
    4. Dans le script content.jsp , vous pouvez ajouter du contenu de page ou des références supplémentaires à d’autres composants inclus lors du rendu de la page. Par exemple, si vous ajoutez l’ applicationformheader du composant personnalisé, veillez à ajouter la référence suivante au composant dans le fichier JSP :
      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
      De même, si vous ajoutez un composant parsys à la structure du nœud de modèle, incluez également le composant personnalisé.

Création d'une bibliothèque cliente de formulaire adaptatif

The head.jsp file of the enrollmentpage component for the new template includes a client library guide.theme.simpleEnrollment . Le modèle par défaut utilise également cette bibliothèque cliente. Modifiez le style du nouveau modèle à l’aide de l’une de ces méthodes :
  • Définissez un thème personnalisé et remplacez le thème par défaut guide.theme.simpleEnrollment par celui-ci.
  • Définissez une nouvelle bibliothèque cliente sous /etc/designs/mycompany. Incluez la bibliothèque cliente après l’entrée de thème par défaut dans la page jsp. Incluez tous les styles remplacés et les fichiers JavaScript supplémentaires dans cette bibliothèque cliente.
Un thème désigne une bibliothèque cliente incluse dans le composant de page utilisé pour effectuer le rendu d’un formulaire adaptatif. La bibliothèque cliente régit principalement l’aspect d’un formulaire adaptatif.