Création d’un profil personnalisé pour HTML5 forms

Un profil est un noeud de ressource dans Apache Sling. Il représente une version personnalisée du service de rendu HTML5 forms. Vous pouvez utiliser le service de rendu de formulaires HTML5 pour personnaliser l’apparence, le comportement et les interactions des formulaires HTML5. Un noeud de profil existe dans le dossier /content du référentiel JCR. Vous pouvez placer le noeud directement sous le dossier /content ou tout 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 rendu du noeud se trouve à l’emplacement /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 moteur de rendu de profil appelle le service Forms OSGi pour effectuer le rendu du formulaire demandé.

Le script de profil se trouve dans html.jsp et html.POST.jsp pour les requêtes de GET et de POST. Vous pouvez copier et modifier un ou plusieurs fichiers à remplacer pour y ajouter vos personnalisations. N’effectuez aucune modification statique, la mise à jour du correctif remplace ces modifications.

Un profil comporte divers modules : les modules formRuntime.jsp, config.jsp, toolbar.jsp, formBody.jsp, nav_footer.jsp, et footer.jsp.

formRuntime.jsp

Les modules formRuntime.jsp contiennent 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

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 au module config.jsp.

toolbar.jsp

Le fichier toolbar.jsp contient le code pour créer la barre d’outils colorée. Pour supprimer la barre d’outils, supprimez toolbar.jsp du module HTML.jsp

formBody.jsp

Le module formBody.jsp sert à la représentation HTML du formulaire XFA.

HTML5 forms commence par générer uniquement la première page du formulaire. Lorsqu’un utilisateur fait défiler le formulaire, le reste des formulaires est chargé. La vitesse de chargement est ainsi optimisée. Le composant nav_footer.jsp contient tous les styles et éléments requis pour faciliter le chargement des pages dans le défilement.

Le module footer.jsp est vide. Il vous permet d’ajouter des scripts qui ne sont utilisés que pour les interactions utilisateur.

Création de profils personnalisés

Pour créer un profil personnalisé, procédez comme suit :

Créez un nœud de profil

  1. Accédez à l’interface CRX DE à l’adresse URL : https://[server]:[port]/crx/de et connectez-vous à l’interface avec les informations d’identification de l’administrateur.

  2. Dans le panneau de gauche, rendez-vous à l’emplacement suivant : /content/xfaforms/profiles.

  3. Copiez le paramètre par défaut du nœud et collez le nœud dans un autre dossier(/content/profiles) intitulé hrform.

  4. Sélectionnez le nouveau nœud, hrform, puis ajoutez une propriété de chaîne : sling:resourceType avec la valeur : hrform/demo.

  5. Cliquez sur Enregistrer tout dans le menu de la barre d’outils pour enregistrer les modifications.

Créez un script de rendu de profil

Après la création d’un profil personnalisé, ajoutez les informations de rendu à ce profil. Lorsqu’il reçoit une demande pour le nouveau profil, CRX vérifie l’existence du dossier/apps pour la page JSP à générer. Créez la page JSP dans le dossier /apps.

  1. Dans le volet de gauche, accédez au dossier /apps .

  2. Cliquez avec le bouton droit sur le dossier /apps et choisissez de créer un dossier nommé hrform.

  3. Dans le dossier hrform , créez un dossier nommé demo.

  4. Cliquez sur le bouton Enregistrer tout.

  5. Accédez à /libs/xfaforms/profile/html.jsp et copiez le noeud html.jsp.

  6. Collez le noeud html.jsp dans le dossier /apps/hrform/demo créé ci-dessus avec le même nom html.jsp et cliquez sur Enregistrer.

  7. 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.

  8. 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.

Sur cette page