Tutoriel : Publier votre formulaire adaptatif

Ce didacticiel est une étape de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du didacticiel.

Une fois le formulaire adaptatif prêt, vous pouvez le publier pour le rendre disponible pour les utilisateurs finaux. Les utilisateurs finaux peuvent ouvrir le formulaire publié sur n’importe quel périphérique et navigateur Internet. Lorsqu’un formulaire adaptatif est publié, le formulaire et le contenu associé sont copiés d’une instance d’auteur AEM vers une instance de publication AEM. Le formulaire est mis à la disposition de l’utilisateur final via l’instance de publication.

Vous disposez des méthodes suivantes pour publier un formulaire adaptatif :

• Publier le formulaire adaptatif en tant que page AEM
• Incorporation du formulaire adaptatif dans une page AEM Sites
• Incorporer le formulaire adaptatif dans une page web externe (une page web non AEM hébergée en dehors d’AEM)

Avant de commencer

• Configurez une instance de publication AEM Forms : L’instance de publication est une instance publique d’AEM Forms s’exécutant en mode de publication. Dans un environnement de production, l’instance de publication se trouve en dehors du pare-feu de l’entreprise.
• Configuration de la réplication et de la réplication inverse : La réplication copie le contenu de l’instance d’auteur vers une instance de publication et renvoie les entrées utilisateur (par exemple, les entrées de formulaire) de l’instance de publication vers l’instance d’auteur.

Publier le formulaire adaptatif en tant que page d’AEM

Lorsque le formulaire adaptatif est publié en tant que page d’AEM, la page web entière contient uniquement le formulaire publié. Vous pouvez utiliser l’URL du formulaire adaptatif pour le lier à partir d’une autre page web. Pour publier le formulaire adaptatif shipping-address-add-update-form en tant que page d’AEM :

1. Connectez-vous à l’instance d’auteur Forms et localisez le formulaire adaptatif shipping-address-add-update-form dans l’interface utilisateur Forms d’AEM.
   https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
2. Sélectionnez le formulaire adaptatif shipping-address-add-update-form et appuyez sur Publier. Une boîte de dialogue contenant les ressources liées au formulaire adaptatif s’affiche. Appuyez sur Publier. Le formulaire adaptatif est publié et une boîte de dialogue de réussite s’affiche.
3. Ouvrez le formulaire sur l’instance de publication. Le formulaire peut être rempli et envoyé par l’utilisateur final.
   https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Incorporer le formulaire adaptatif dans une page AEM Sites

AEM Forms permet aux développeurs de formulaires d’incorporer facilement des formulaires adaptatifs dans une page Sites AEM. Le formulaire adaptatif incorporé est entièrement fonctionnel et les utilisateurs peuvent le remplir et le soumettre sans quitter la page. Il permet à l’utilisateur de rester dans le contexte d’autres éléments de la page web et d’interagir simultanément avec le formulaire.

AEM Forms fournissez un composant, AEM Forms Conteneur, pour incorporer un formulaire adaptatif à une page Sites d’. Par défaut, le composant n’est pas visible dans AEM conteneur Sites. Effectuez les étapes suivantes pour activer le composant de conteneur Forms AEM et pour incorporer le formulaire adaptatif dans une page Sites AEM :

1. Créez et ouvrez une page du site We.Retail en vue de la modifier. Par exemple, https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Le formulaire adaptatif est incorporé à la page Sites.

   Vous pouvez également incorporer le formulaire adaptatif dans une page We.Retail Site’s existante. Par exemple, la page À propos des États-Unis https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Cela vous permet de gagner du temps lors de la création d’une page. Les étapes ci-dessous utilisent la page nouvellement créée.

   Le site We.Retail est fourni avec AEM. Si le site We.Retail n’est pas installé, voir Implémentation de référence We.Retail pour installer le site.

2. Appuyez sur informations de page et sélectionnez l’option Modifier le modèle dans la page de site We.Retail nouvellement créée. Le modèle de la page s’ouvre dans un nouvel onglet du navigateur.

3. Appuyez dans la zone Conteneur de mises en page et appuyez sur . Dans l’onglet Composants autorisés, développez l’accordéon Général, sélectionnez l’option AEM Formulaire et appuyez sur . Le composant de conteneur Forms de l’AEM est activé pour la page.

4. Ouvrez l’onglet du navigateur contenant AEM page Sites ouverte à l’étape 1. Appuyez sur la zone Faire glisser les composants ici et appuyez sur +. Dans la zone Insérer un nouveau composant, appuyez sur AEM formulaire. Le composant Conteneur AEM Forms est ajouté à la page.

5. Appuyez sur le composant Conteneur AEM Forms et appuyez sur . Une boîte de dialogue avec les propriétés du conteneur Forms s’affiche. Dans le champ Chemin d’accès à la ressource, recherchez et sélectionnez le formulaire adaptatif shipping-address-add-update-form . Appuyez sur . Le formulaire adaptatif est incorporé dans la page

6. Publiez le formulaire adaptatif et la page Sites. Voici quelques points à prendre en considération :

   • Si vous publiez la page Sites AEM pour la première fois et qu’elle comprend un formulaire incorporé, publiez la page Sites et le formulaire incorporé.

   • Si vous modifiez uniquement le formulaire incorporé dans une page de site publiée, publiez le formulaire d’origine et les modifications sont répercutées dans la page de site publiée. La page de site publiée comprend une référence au formulaire et n’exige pas de republier la page.

   • Si vous modifiez la page Sites et le formulaire incorporé, republiez la page Sites et le formulaire.

     
     Formulaire de changement d’adresse d’expédition et de facturation ajouté à une page Sites d’AEM.

Incorporer le formulaire adaptatif dans une page Web externe

Vous pouvez incorporer un formulaire adaptatif à une page Web externe (une page Web non AEM hébergée en dehors d’AEM) en insérant quelques lignes de code JavaScript dans la page Web externe. Le code JavaScript envoie une requête HTTP au serveur Forms AEM pour le formulaire adaptatif et les ressources associées et ajoute le formulaire adaptatif à la page web. Pour obtenir des instructions détaillées, voir incorporer le formulaire adaptatif à une page Web externe.