Prise en main d’Edge Delivery Services pour AEM Forms à l’aide de l’éditeur universel

1. Accès au modèle standard d’AEM Forms

   • Accédez à https://github.com/adobe-rnd/aem-boilerplate-forms.

   
   Image : référentiel de modèle standard d’AEM Forms avec bloc de formulaires adaptatifs préconfiguré

2. Créer votre référentiel

   • Cliquez sur Utiliser ce modèle  > Créer un référentiel.

   
   Image : utilisation du modèle pour créer un référentiel

3. Configurer les paramètres du référentiel

   • Propriétaire  : sélectionnez votre compte ou organisation GitHub.
   • Nom du référentiel  : choisissez un nom explicite (par exemple, my-forms-project).
   • Visibilité  : sélectionnez Public (recommandé pour Edge Delivery Services).
   • Cliquez sur Créer un référentiel.

   
   Image : configuration de votre nouveau référentiel avec une visibilité publique

Validation : vérifiez que vous disposez d’un nouveau référentiel GitHub basé sur le modèle standard d’AEM Forms.

La synchronisation du code AEM synchronise automatiquement les modifications de contenu entre votre environnement de création AEM et votre référentiel GitHub.

1. Installer l’application GitHub

   • Accédez à https://github.com/apps/aem-code-sync/installations/new.

2. Configuration des autorisations d’accès

   • Sélectionnez Sélectionner uniquement les référentiels.
   • Choisissez le référentiel que vous venez de créer.
   • Cliquer sur Enregistrer

   
   Image : installation de la synchronisation du code AEM avec des autorisations spécifiques au référentiel

Point de contrôle : la synchronisation du code AEM est maintenant installée et a accès à votre référentiel.

Le fichier fstab.yaml connecte votre référentiel GitHub à l’environnement de création AEM pour la synchronisation du contenu.

1. Accéder à votre référentiel

   • Accédez au référentiel GitHub que vous venez de créer.
   • Vous devriez voir les fichiers standard d’AEM Forms.

2. Créer le fichier fstab.yaml.

   • Cliquez sur Ajouter un fichier  > Créer un nouveau fichier dans le répertoire racine.
   • Nommez le fichier fstab.yaml.

   
   Image : création du fichier de configuration fstab.yaml

3. Ajouter les détails de votre connexion AEM

   Copiez et collez la configuration suivante, en remplaçant les espaces réservés :

   code language-yaml
   mountpoints: /: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

   Remplacer :

   • <aem-author> : votre URL de création AEM as a Cloud Service (par exemple, author-p12345-e67890.adobeaemcloud.com)
   • <owner> : nom d’utilisation ou organisation GitHub
   • <repository> : nom de votre référentiel

   Exemple :

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   Image : configuration du point de montage pour l’intégration AEM

4. Valider la configuration.

   • Ajoutez un message de validation : « Ajout de la configuration de l’intégration AEM ».
   • Cliquez sur Valider le nouveau fichier.

   
   Image : validation de la configuration fstab.yaml

Validation : confirmez la connexion de votre référentiel GitHub à AEM.

<div class="extension remarque">
<div>REMARQUE</div>
<div>
<p>Vous rencontrez des problèmes de build ? Voir <a href="#troubleshooting-github-build-issues">Résolution des problèmes de build dans GitHub</a>.</p>
</div>
</div>

1. Accéder à la console AEM Sites

   • Connectez-vous à votre instance de création AEM as a Cloud Service.
   • Accédez à Sites.

   
   Image : Accès à la console AEM Sites

2. Lancer la création du site

   • Cliquez sur Créer  > Site à partir d’un modèle.

   
   Image : création d’un nouveau site à partir d’un modèle

3. Sélectionner un modèle Edge Delivery Services

   • Choisissez le modèle Site Edge Delivery Services.
   • Cliquer sur Suivant

   
   Image : sélection du modèle de site Edge Delivery Services

   note note
   NOTE
   Le modèle n’est pas disponible ? Si vous ne voyez pas le modèle Edge Delivery Services :
   Cliquez sur Importer pour charger le modèle. Télécharger des modèles à partir des versions de GitHub

4. Configurer votre site

   Saisissez les informations suivantes :

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Champ	Valeur	Exemple
   Titre du site	Nom explicite du site	« Mon projet Forms »
   Nom du site	Nom convivial de l’URL	« mon-projet-forms »
   URL GitHub	URL de votre référentiel	https://github.com/mycompany/my-forms-project

   
   Image : configuration de votre nouveau site AEM avec l’intégration GitHub

5. Terminer la création du site

   • Vérifier vos paramètres
   • Cliquer sur Créer

   
   Image : confirmation de la création du site

   Bravo ! Votre site AEM est maintenant créé et connecté à GitHub.

6. Ouvrir dans l’éditeur universel

   • Dans la console Sites, recherchez votre nouveau site.
   • Sélectionner la page index
   • Cliquez sur Modifier.

   
   Image : ouverture de votre site pour modification

   L’éditeur universel s’ouvre dans un nouvel onglet, fournissant des fonctionnalités de création WYSIWYG.

   
   Image : votre site est ouvert dans l’éditeur universel pour sa modification WYSIWYG

Validation : vérifiez que votre site AEM est prêt pour la création de formulaires.

La publication rend votre site disponible sur Edge Delivery Services pour un accès global.

1. Publication rapide à partir de la console Sites

   • Retournez à la console AEM Sites.
   • Sélectionnez les pages de votre site (ou sélectionnez-les toutes en appuyant sur Ctrl + A).
   • Cliquez sur Publication rapide.

   
   Image : sélection de pages pour la publication rapide

2. Confirmer la publication

   • Dans la boîte de dialogue de confirmation, cliquez sur Publier.

   
   Image : confirmation de l’action de publication

   Alternative : vous pouvez également publier directement à partir de l’éditeur universel à l’aide du bouton de publication.

   
   Image : publication directe à partir de l’éditeur universel

3. Accéder à votre site en ligne

   Votre site est maintenant en ligne à l’adresse :

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Présentation de la structure de l’URL :

   • <branch> : branche GitHub (généralement main)
   • <repo> : nom de votre référentiel
   • <owner> : nom d’utilisation ou organisation GitHub
   • <site-name> : nom du site AEM

   Exemple :

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

Validation : vérifiez que votre site est en ligne sur Edge Delivery Services.

Suivant : créer votre premier formulaire

1. Accédez à votre projet local

   code language-bash
   cd /path/to/your/aem-project

2. Télécharger les fichiers requis à partir du modèle standard AEM Forms

   Copiez ces fichiers depuis le référentiel du modèle standard AEM Forms :

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Source	Destination	Objectif
   blocks/form/	blocks/form/	Fonctionnalité de formulaire principale
   scripts/form-editor-support.js	scripts/form-editor-support.js	Intégration de l’éditeur universel
   scripts/form-editor-support.css	scripts/form-editor-support.css	Style de l’éditeur

3. Prise en charge de l’éditeur de mise à jour

   • Remplacez votre fichier /scripts/editor-support.js par le fichier editor-support.js du modèle standard AEM Forms

Validation : confirmez que les fichiers du bloc de formulaire sont présents dans votre projet.

1. Mettre à jour le modèle de section

   Ouvrez /models/_section.json et ajoutez des composants de formulaire aux filtres :

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   Ce que cela fait : active les composants de formulaire dans le sélecteur de composants de l’éditeur universel.

Validation : confirmez que les composants de formulaire apparaissent dans l’éditeur universel.

Pourquoi cette étape : empêche les erreurs de linting provenant des fichiers spécifiques aux formulaires et configure des règles de validation appropriées.

1. Mettre à jour .eslintignore

   Ajoutez ces lignes à /.eslintignore :

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. Mettre à jour .eslintrc.js

   Ajoutez ces règles à l’objet rules dans /.eslintrc.js :

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

Validation : vérifiez que ESLint fonctionne avec les composants de formulaire.

1. Installer des dépendances et créer

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   À quoi cela sert :

   • Met à jour component-definition.json avec les composants de formulaire.
   • Génère component-models.json avec des modèles de formulaire.
   • Crée component-filters.json avec des règles de filtrage.

2. Vérifier les fichiers générés

   Vérifiez que ces fichiers dans la racine de votre projet contiennent des objets liés au formulaire :

   • component-definition.json
   • component-models.json
   • component-filters.json

3. Valider et envoyer les modifications

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

Validation : vérifiez que votre projet comprend des fonctionnalités de formulaire.

1. Ouvrir votre page dans l’éditeur universel

   • Accédez à la console Sites dans AEM.
   • Sélectionnez la page sur laquelle vous souhaitez ajouter un formulaire (par exemple, index).
   • Cliquez sur Modifier.

   Votre page s’ouvre dans l’éditeur universel pour une modification WYSIWYG.

2. Ajouter le composant de formulaire adaptatif

   • Ouvrez le panneau Arborescence de contenu (barre latérale gauche).
   • Accédez à une section où vous souhaitez ajouter votre formulaire.
   • Cliquez sur l’icône (+) Ajouter.
   • Sélectionnez Formulaire adaptatif dans la liste des composants.

   
   Image : ajout d’un bloc de formulaire adaptatif à votre page

Validation : vérifiez que vous disposez d’un conteneur de formulaire vide.

1. Accéder à votre bloc de formulaire

   • Dans l’arborescence de contenu, recherchez la section de formulaire adaptatif que vous venez d’ajouter.

   
   Image : bloc de formulaire adaptatif dans l’arborescence de contenu

2. Ajouter des composants de formulaire

   Vous pouvez ajouter des composants de deux manières :

   Méthode A : cliquer pour ajouter

   • Cliquez sur l’icône (+) Ajouter dans la section de votre formulaire.
   • Sélectionnez les composants dans la liste Composants de formulaire adaptatif.

   Méthode B : glisser-déposer

   • Faites glisser des composants directement du panneau des composants vers votre formulaire.

   
   Image : ajout de composants à votre formulaire

   Composants recommandés pour bien commencer :

   • Entrée de texte (pour le nom, l’e-mail)
   • Zone de texte (pour les messages)
   • Bouton Envoyer

3. Configurer les propriétés du composant

   • Sélectionnez un composant de formulaire.

   • Utilisez le panneau Propriétés (barre latérale droite) pour configurer :

     • Les libellés et les espaces réservés
     • Les règles de validation
     • Les paramètres de champs obligatoires

   
   Image : configuration des propriétés du composant

4. Prévisualiser votre formulaire

   Votre formulaire ressemblera à ceci :

   
   Image : exemple de formulaire créé avec l’éditeur universel

Validation : vérifiez que votre formulaire est prêt pour la publication.

1. Publier à partir de l’éditeur universel

   • Cliquez sur le bouton Publier dans l’éditeur universel.

   
   Image : publication de votre formulaire à partir de l’éditeur universel

2. Confirmer la publication

   • Dans la boîte de dialogue de confirmation, cliquez sur Publier.

   
   Image : confirmation de l’action de publication

   Un message de réussite confirmant la publication s’affiche.

   
   Image : confirmation de publication réussie

3. Afficher votre formulaire en ligne

   Votre formulaire est maintenant en ligne à l’adresse :

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Exemple d’URL :

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

   
   Image : votre page de formulaire publiée sur Edge Delivery Services

Félicitations. Votre formulaire est maintenant en ligne et prêt à collecter les envois.

1. Installer l’interface de ligne de commande AEM

   L’interface de ligne de commande d’AEM simplifie les tâches de développement local :

   code language-bash
   npm install -g @adobe/aem-cli

2. Cloner votre référentiel

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   Remplacez <owner> et <repo> par vos détails GitHub réels.

3. Démarrer le serveur de développement local

   code language-bash
   aem up

   Vous démarrez ainsi un serveur local avec des fonctionnalités de rechargement à chaud.

4. Personnaliser

   • Modifiez les fichiers du répertoire blocks/form/ pour le style et le comportement du formulaire.
   • Modifiez form.css pour le style.
   • Mettez à jour form.js pour le comportement.

   Affichez les modifications instantanément dans votre navigateur à l’adresse http://localhost:3000.

5. Déployer vos modifications

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   Vos modifications seront disponibles à l’adresse :

   • Prévisualisation : https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Production : https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problème : échecs de build ou erreurs de linting.

Solution 1 : gérer les erreurs de linting

Si vous rencontrez des erreurs de linting :

1. Ouvrez package.json dans la racine de votre projet.

2. Recherchez le script lint :

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. Désactivez temporairement le linting :

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. Validez et envoyez les modifications.

Solution 2 : erreurs de chemin du module

Si vous voyez« Unable to resolve path to module '/scripts/lib-franklin.js' » :

1. Accéder à blocks/form/form.js

2. Mettez à jour l’instruction d’import :

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

Problème : les envois de formulaire ne fonctionnent pas.

Solutions :

• Vérifiez que vous disposez d’un composant de bouton d’envoi.
• Vérifiez la configuration de l’URL de l’action de formulaire.
• Vérifiez les règles de validation du formulaire.
• Testez d’abord en mode aperçu.

Problème : problèmes de style.

Solutions :

• Vérifiez les chemins d’accès aux fichiers CSS dans blocks/form/.
• Videz la mémoire cache du navigateur.
• Vérifiez la syntaxe CSS.
• Testez dans l’environnement de développement local.

Problème : les composants de formulaire n’apparaissent pas dans l’éditeur universel.

Solutions :

• Vérifiez que la synchronisation du code AEM est installée et en cours d’exécution.
• Vérifiez que fstab.yaml possède l’URL de création AEM appropriée.
• Assurez-vous que l’accès anticipé à votre instance AEM est activé.
• Vérifiez que component-definition.json comprend les composants de formulaire.

Problème : modifications non visibles après publication.

Solutions :

• Attendez l’actualisation du cache CDN.
• Vérifiez la mémoire cache du navigateur (essayez en mode incognito/privé).
• Vérifiez que le format d’URL utilisé est correct.