Créer un formulaire à l’aide du bloc de formulaires adaptatifs

Plutôt que de recourir à des processus complexes, il est possible de créer facilement un formulaire à l’aide d’une feuille de calcul. Vous pouvez définir les lignes et les colonnes qui constitueront la structure du formulaire. Chaque ligne représente un champ de formulaire individuel et les en-têtes de colonne définissent les propriétés du champ correspondantes.

Prenons l’exemple de la feuille de calcul suivante, dans laquelle les lignes correspondent aux champs d’un formulaire enquiry et les en-têtes de colonne définissent leurs propriétés :

Pour poursuivre la création du formulaire :

1. Accédez au dossier de votre projet AEM Edge Delivery sur Microsoft SharePoint ou Google Drive.

2. Créez un classeur Microsoft Excel ou une feuille Google Sheets n’importe où dans le répertoire de votre projet AEM Edge Delivery. Par exemple, créez une feuille de calcul nommée enquiry dans le répertoire du projet AEM Edge Delivery sur Google Drive.

   

3. Assurez-vous que la feuille est partagée avec la personne appropriée utilisant AEM (par exemple, helix@adobe.com) conformément aux configurations spécifiées pour votre projet. Octroyez à l’utilisateur ou l’utilisatrice l’autorisation de modification de la feuille.

4. Ouvrez la feuille de calcul créée et renommez la feuille par défaut en « shared-default ».

   

5. Pour ajouter les champs du formulaire, insérez les lignes et les en-têtes de colonne dans la feuille « shared-default ». Chaque ligne doit représenter un champ de formulaire, avec des en-têtes de colonne définissant les propriétés du champ correspondantes.

   Pour un démarrage rapide, pensez à copier le contenu de la feuille de calcul de demande dans votre feuille de calcul. Après avoir copié le contenu, enregistrez votre feuille de calcul.

   embed
   https://video.tv.adobe.com/v/3427468?quality=12&learn=on

6. Utilisez AEM Sidekick pour prévisualiser la feuille.

   

   Lors de la prévisualisation, de nouveaux onglets de navigateur affichent le contenu de la feuille au format JSON. Veillez à noter l’URL d’aperçu, car elle sera nécessaire pour le rendu du formulaire dans la section suivante. Le format de l’URL se présente comme suit :

   code language-json
   https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json

   • <branch> fait référence à la branche de votre référentiel GitHub.
   • <repository> indique votre référentiel GitHub.
   • <owner> fait référence au nom d’utilisateur ou d’utilisatrice de votre compte GitHub qui héberge votre référentiel GitHub.

   Par exemple, si le référentiel de votre projet est nommé « portal », qu’il se trouve dans le compte « wkndforms » et que vous utilisez la branche « main », l’URL ressemble à ceci :

   https://main--portal--wkndforms.hlx.page/enquiry.json

À ce stade, vous avez préparé la structure du formulaire. Maintenant, pour prévisualiser le formulaire :

1. Ouvrez votre compte Microsoft SharePoint ou votre compte Google Drive et accédez au répertoire de votre projet AEM Edge Delivery.

2. Ouvrez un fichier document (fichier d’index, par exemple) pour incorporer le formulaire. Vous pouvez également créer un document.

3. Accédez à l’emplacement souhaité dans le document où vous avez l’intention d’ajouter le formulaire.

4. Pour créer un bloc de formulaire afin d’afficher le formulaire. Sélectionnez Insérer > Tableau, puis créez un tableau à une colonne et deux lignes. Nommez le tableau « Form » (formulaire) et collez l’URL d’aperçu dans la deuxième ligne. Assurez-vous que l’URL se présente sous la forme d’un lien hypertexte et non de texte brut, comme illustré ci-dessous :

   table 0-row-1 1-row-1
   Formulaire
   https://main–wefinance–wkndforms.hlx.live/enquiry.json

   

   Ce bloc sert d’espace réservé à l’emplacement où le formulaire est incorporé. Dans la deuxième ligne du bloc, ajoutez l’URL d’aperçu de votre fichier <form>.json sous la forme d’un lien hypertexte.

   note important
   IMPORTANT
   Assurez-vous que l’URL est formatée en tant que lien hypertexte et non sous forme de texte brut.

5. Utilisez AEM Sidekick pour prévisualiser le document. La page affiche désormais le formulaire. Par exemple, voici le formulaire basé sur la feuille de calcul de demande :

   

   Remplissez maintenant le formulaire et cliquez sur le bouton d’envoi. Une erreur semblable à celle ci-dessous s’affiche, car la feuille de calcul n’est pas encore configurée pour accepter les données.