Créer un profil personnalisé pour HTML5 forms creating-a-custom-profile-for-html-forms
Un profil est un nœud de ressources dans Apache Sling. Il représente une version personnalisée du service de rendu HTML5 forms. Vous pouvez utiliser le service de rendu HTML5 Forms pour personnaliser l’apparence, le comportement et les interactions de HTML5 Forms. Un nœud de profil existe dans le dossier /content
du référentiel JCR. Vous pouvez mettre le nœud directement sous le dossier /content
ou tout autre sous-dossier du dossier /content
.
Le nœud de profil présente la propriété sling:resourceSuperType et la valeur par défaut est xfaforms/profile. Le script de génération du nœud figure dans le dossier /libs/xfaforms/profile.
Les scripts Sling sont des scripts JSP. Ces scripts JSP servent de conteneurs pour rassembler le code HTML du formulaire demandé et les artefacts JS/CSS requis. Ces scripts Sling sont également appelés des scripts de rendu de profil. Le rendu de profil appelle le service Forms OSGi afin de générer le formulaire demandé.
Le script de profil est dans html.jsp et html.POST.jsp pour les demandes GET et POST. Vous pouvez copier et modifier un ou plusieurs fichiers à remplacer pour y ajouter vos personnalisations. N’apportez aucune modification car la mise à jour des correctifs écrase de telles modifications.
Un profil comporte divers modules : les modules formRuntime.jsp, config.jsp, toolbar.jsp, formBody.jsp, nav_footer.jsp, et footer.jsp.
formRuntime.jsp formruntime-jsp-br
Le module formRuntime.jsp contient des références aux bibliothèques clientes. Il décrit également des méthodes pour extraire des informations sur les paramètre régionaux dans la demande et inclure les messages dans la demande. Vous pouvez inclure des bibliothèques ou des styles JavaScript personnalisés dans le fichier formRuntime.jsp.
config.jsp config-jsp
Le module config.jsp contient les différentes configurations telles que les services de journalisation, de proxy, et la version du comportement. Dans config.jsp, vous pouvez personnaliser les configurations et les widgets. Vous pouvez également ajouter des configurations telles que l’enregistrement de widgets personnalisés dans le module config.jsp.
toolbar.jsp toolbar-jsp
Le module toolbar.jsp contient le code pour créer la barre d’outils colorée. Pour supprimer la barre d’outils, supprimez toolbar.jsp de HTML.jsp
formBody.jsp formbody-jsp
Le module de formBody.jsp sert à la représentation HTML du formulaire XFA.
nav_footer.jsp nav-footer-jsp
Dans un premier temps, le HTML5 ne génère que la première page du formulaire. Lorsqu’un utilisateur fait défiler le formulaire, le reste des formulaires est chargé. Cela accélère l’expérience de chargement. Le composant nav_footer.jsp contient tous les styles et éléments requis pour faciliter le chargement des pages dans le défilement.
footer.jsp footer-jsp
Le module footer.jsp est vide. Ce module vous permet d’ajouter des scripts qui ne sont utilisés que pour l’interaction utilisateur.
Création de profils personnalisés creating-custom-profiles
Pour créer un profil personnalisé, procédez comme suit :
Créez un nœud de profil create-profile-node
-
Accédez à l’interface CRX DE à l’adresse
https://[server]:[port]/crx/de
et connectez-vous à l’interface avec des informations d’identification administrateur. -
Dans le panneau de gauche, rendez-vous à l’emplacement suivant : /content/xfaforms/profiles.
-
Copiez le paramètre par défaut du nœud et collez le nœud dans un autre dossier(/content/profiles) intitulé hrform.
-
Sélectionnez le nouveau nœud, hrform, puis ajoutez une propriété de chaîne : sling:resourceType avec la valeur : hrform/demo.
-
Cliquez sur Enregistrer tout dans le menu de la barre d’outils pour enregistrer les modifications.
Création du script de rendu de profil create-the-profile-renderer-script
Après avoir créé un profil personnalisé, ajoutez des informations de rendu à ce profil. Lors de la réception d’une demande pour le nouveau profil, CRX vérifie l’existence du dossier /apps pour la page JSP à rendre. Créez la page JSP dans le dossier /apps .
-
Dans le volet de gauche, accédez au dossier
/apps
. -
Effectuez un clic droit sur le dossier
/apps
et créez un dossier intitulé hrform. -
Dans le dossier hrform, créez un dossier intitulé demo.
-
Cliquez sur le bouton Enregistrer tout.
-
Accédez à
/libs/xfaforms/profile/html.jsp
et copiez le nœud html.jsp. -
Collez le nœud html.jsp dans le dossier
/apps/hrform/demo
créé au-dessus avec le même nom html.jsp et cliquez sur Enregistrer. -
Si vous rencontrez d’autres composants du script de profil, suivez les étapes 1 à 6 pour copier les composants dans le dossier /apps/hrform/demo.
-
Pour vérifier que le profil est créé, ouvrez l’URL
https://[server]:[port]/content/xfaforms/profiles/hrform.html
Pour vérifier les formulaires, Importez les formulaires de votre système de fichiers local vers AEM Forms et affichez l’aperçu du formulaire sur l’instance d’auteur du serveur AEM.