Conditions préalables

Modèle de formulaire adaptatif

Un modèle de formulaire adaptatif est une hiérarchie de nœuds, sans réel contenu, qui est copié pour créer un formulaire adaptatif. Le modèle dispose de dispositions, de styles, d’une hiérarchie des composants, et d’une structure de contenu initale de base préconfigurés.  

Lorsque vous créez un formulaire adaptatif ou un document adaptatif, les changements de la structure du contenu de modèle original ne sont pas répercutés dans la structure du formulaire adaptatif et du document adaptatif.

Modèles de formulaire adaptatif par défaut

AEM Quickstart fournit les modèles de formulaires adaptatifs suivants :

Modèles de formulaires adaptatifs

  • Modèle Survey (modèle d’enquête) : permet de créer un formulaire adaptatif d’une seule page avec une disposition réactive comprenant plusieurs colonnes 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 (modèle d’inscription simple) : 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 Tabbed Enrollment (modèle d’inscription avec onglet) : permet de créer un formulaire adaptatif à plusieurs onglets à l’aide d’une disposition d’onglets sur la gauche, dans laquelle vous pouvez consulter des onglets de manière aléatoire.

Modèles de documents adaptatifs

  • Modèle simple : vous permet de créer un document adaptatif à plusieurs étapes à l’aide d’une disposition en accordéon.

AEM fournit également un autre modèle, appelé modèle Advanced Enrollment (modèle d’inscription avancée), avec le module complémentaire d’AEM Forms qui se trouve à l’emplacement /libs/fd/afaddon/templates/advancedEnrollmentTemplate.

(Formulaires adaptatifs uniquement) Les modèles possèdent une autre propriété guideComponentType avec la valeur fd/af/templates qui spécifie clairement qu’elle est utilisée pour les formulaires adaptatifs.

(Document adaptatif uniquement) Le modèle comporte un guideComponentType supplémentaire de propriété avec la valeur fd/ad/templates qui spécifie clairement qu’elle est utilisée pour les formulaires adaptatifs.

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

Remarque :

Chaque modèle personnalisé de formulaires adaptatifs doit répondre aux spécifications HTML5 et ajouter la balise <!DOCTYPE Html> à la page.

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

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 l’instance d’auteur.

  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. Cliquez sur Enregistrer tout dans le menu de la barre d’outils pour enregistrer les modifications.

  4. Accédez au dossier /libs/fd/af/templates.

  5. Copiez le nœud simpleEnrollmentTemplate.

  6. Accédez au dossier /apps/mycompany/templates. Cliquez avec le bouton droit dessus et sélectionnezColler.

  7. Si nécessaire, renommez le nœud de modèle que vous avez copié. Renommez-le par exemple en tant qu’enrollment-template.

  8. Accédez à l’emplacement /apps/mycompany/templates/enrollment-template.

  9. Modifiez les propriétés jcr:title et jcr:description du nœud jcr:content pour différencier le modèle de celui que vous avez copié.

  10. Le nœud jcr:content du modèle modifié contient les composants guideContainer et guideformtitle. 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.

  11. Accédez à l’emplacement /apps/mycompany/templates/enrollment-template/jcr:content.

  12. Ouvrez l’onglet Properties (Propriétés) et modifier la valeur de la propriété cq:designPath en /etc/designs/mycompany.

  13. Créez maintenant un nœud /etc/designs/mycompany pour le typecq:Page

  14. Cliquez sur Enregistrer tout pour enregistrer les modifications.

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. Dans la mesure où base est un composant de produit principal, ne le modifiez pas.

  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 contentpage) Exécutez les étapes suivantes (a-d), si vous disposez d’une page de contenu existante pour votre site Web. Si vous ne disposez pas d’une page de contenu existante pour votre site Web, vous pouvez laisser la propriété resourceSuperType pour qu’elle indique la page de base d’OOTB.

    1. Pour le nœud enrollmentpage, définissez la valeur de la propriété sling:resourceSuperType sur mycompany/components/page/contentpage. Le composant contentpage est le composant de page base de votre site. D’autres composants de page peuvent l’étendre. Supprimez les fichiers de script sous enrollmentpage, à l’exception de head.jsp, content.jsp et library.jsp. Le composant sling:resourceSuperType, qui correspond à contentpage dans le cas présent, comprend tous ces scripts. Les en-têtes, dont la barre de navigation et le pied de page, sont hérités du composant contentpage.

    2. Ouvrez le fichier head.jsp.

      Le fichier JSP contient la ligne <cq.include script="library.jsp"/>.

      Le fichier library.jsp contient la bibliothèque cliente guide.theme.simpleEnrollment, qui comporte les styles du formulaire adaptatif.


      Le composant de page enrollmentpage possède un fichier head.jsp exclusif qui remplace le fichier head.jsp du composant contentpage.

    3. Incluez tous les scripts du fichier head.jsp du composant contentpage dans le fichier head.jsp du composant enrollmentpage.

    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 pour les formulaires et les documents adaptatifs

Le fichier head.jsp du composant enrollmentpage pour le nouveau modèle contient une bibliothèque cliente 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 autres fichiers JavaScript dans cette bibliothèque cliente.

Remarque :

Un thème désigne une bibliothèque cliente CQ incluse dans le composant de page utilisé pour effectuer le rendu d’un formulaire adaptatif. La bibliothèque cliente contrôle principalement l’aspect d’un formulaire adaptatif.

(Document adaptatif uniquement) La bibliothèque cliente du document adaptatif doit importer /etc/clientlibs/fd/adaddon/adtheme/common/less/adField.less dans le fichier style.less avec tout ce qui a été importé pour les formulaires adaptatifs.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne