Incorporer un formulaire adaptatif ou une communication interactive dans une application dʼune seule page AEM Sites embed-an-adaptive-form-or-interactive-communication-in-aem-sites-single-page-application
Adobe recommande d’utiliser les composants principauxde capture de données modernes et extensibles pour créer de nouveaux formulaires adaptatifsou ajouter des formulaires adaptatifs à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de formulaires adaptatifs, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’ancienne approche de la création de formulaires adaptatifs à l’aide de composants de base.
Présentation overview
AEM Forms permet aux équipes de développement de formulaires d’incorporer facilement des formulaires adaptatifs et des communications interactives dans une application monopage AEM Sites. Le formulaire adaptatif et la communication interactive incorporés fonctionnent parfaitement et les utilisateurs peuvent remplir et envoyer le formulaire sans quitter la page. Cela permet à l’utilisateur de rester dans le contexte des autres éléments de la page web et d’interagir simultanément avec le formulaire adaptatif ou la communication interactive.
L’application monopage AEM Sites vous permet dʼajouter un formulaire adaptatif ou une communication interactive à l’aide du Composant Conteneur d’applications monopages d’AEM Forms . Il s’agit d’un composant AEM Forms pour les SPA AEM Sites que vous pouvez ajouter à votre page Sites.
Pour plus d’informations sur l’incorporation d’un formulaire adaptatif dans une page AEM Sites non SPA, consultez la section Incorporation d’un formulaire adaptatif ou d’une communication interactive dans une page AEM Sites.
Prérequis prerequisites
Pour incorporer un formulaire adaptatif ou une communication interactive dans une SPA AEM Sites à l’aide du composant Conteneur SPA AEM Forms, vérifiez que les éléments suivants sont installés :
- Java SE Development Kit 8 ou version ultérieure
- Apache Maven (version 3.3.1 ou ultérieure)
- Instance dʼauteur AEM
- Package de module complémentaire AEM Forms 6.4.2 sur l’instance d’auteur
Installation du composant Conteneur SPA AEM Forms install-aem-forms-spa-container-component
Pour installer le composant Conteneur SPA AEM Forms, procédez comme suit :
-
Installez le composant AEM Forms pour SPA. Les instructions d’installation du composant se trouvent dans le fichier README.md.
Le composant comprend un exemple de composant React qui peut être utilisé pour intégrer le composant Conteneur SPA à un projet SPA basé sur React.
-
Intégrez le composant Conteneur SPA à un projet SPA basé sur React en suivant la procédure décrite dans le fichier README.md.
Une fois le composant Conteneur SPA AEM Forms installé et intégré à un projet SPA basé sur React, vous pouvez incorporer des formulaires adaptatifs et des communications interactives dans la page AEM Sites.
Incorporation d’un formulaire adaptatif ou d’une communication interactive af-component
Pour incorporer un formulaire adaptatif ou une communication interactive à l’aide du composant Conteneur SPA AEM Forms, procédez comme suit :
-
Ouvrez la page AEM Sites, en mode Édition, dans laquelle vous souhaitez incorporer un formulaire adaptatif ou une communication interactive.
-
Insérez le composant AEM Form pour SPA à l’aide de l’une des options suivantes :
-
Sélectionnez le conteneur de mises en page sur la page Sites, puis sélectionnez + et sélectionnez la variable Formulaire AEM pour SPA composant.
-
Depuis le panneau Explorateur des composants, faites glisser et déposez le composant AEM Form pour SPA sur la page.
-
Recherchez un formulaire adaptatif ou une communication interactive dans lʼexplorateur de ressources et effectuez une opération de glisser-déposer sur la page Sites. Le formulaire est ainsi incorporé dans un composant Conteneur AEM Forms pour SPA.
note note NOTE Le rendu de plusieurs composants de conteneurs SPA AEM Forms sur une page nʼest pas pris en charge. Plusieurs conteneurs SPA AEM Forms peuvent être incorporés sur une page, mais un seul composant est rendu à la fois. Assurez-vous qu’un seul composant est visible sur une page pour éviter toute erreur. -
-
Sélectionnez le composant AEM Forms SPA Container incorporé dans la page Sites, puis sélectionnez
-
Dans la boîte de dialogue Modifier le conteneur AEM Forms, précisez ce qui suit :
-
Type de ressource : sélectionnez le type de ressource à incorporer. Vous pouvez choisir entre formulaire adaptatif et communication interactive.
-
Chemin d’accès à la ressource : recherchez et sélectionnez le formulaire adaptatif ou la communication interactive à incorporer. Le champ se remplit automatiquement si un formulaire adaptatif ou une communication interactive est inséré à l’aide de lʼexplorateur de ressources.
-
Canal (Communication interactive uniquement) : sélectionnez le type de canal interactif à incorporer. Les options sont les suivantes : Canal web et Canal d’impression.
-
Thème : sélectionnez un thème qui définit le style des composants de votre formulaire adaptatif ou de votre communication interactive. Style comprend des propriétés d’aspect, comme le style de police, la couleur d’arrière-plan, les dimensions et l’alignement.
-
-
Sélectionner
Publier un formulaire adaptatif et une communication interactive incorporés publish-embedded-adaptive-form-and-interactive-communication
Examinons les scénarios suivants pour publier une ressource incorporée (formulaire adaptatif ou communication interactive) sur une page AEM Sites :
- Si vous publiez la page AEM Sites pour la première fois et qu’elle inclut un formulaire adaptatif ou une communication interactive incorporés, publiez la page Sites et la ressource incorporée.
- Si vous avez modifié uniquement le formulaire adaptatif ou la communication interactive incorporés dans une page Sites publiée, publiez la ressource originale et les modifications se reflètent dans la page Sites publiée. La page Sites publiée comprend une référence à la ressource ; il n’est pas nécessaire de la republier.
- Si vous avez modifié la page Sites et le formulaire adaptatif ou la communication interactive incorporés, republiez la page Sites et la ressource incorporée.
Modifier le formulaire adaptatif et la communication interactive incorporés modify-embedded-adaptive-form-and-interactive-communication
La page AEM Sites conserve une référence au formulaire adaptatif et à la communication interactive dans le conteneur AEM Forms. Par conséquent, toutes les configurations et les propriétés, telles que le thème, les styles et l’action Envoyer, configurées dans le formulaire adaptatif et la communication interactive dʼorigine sont conservées dans le formulaire adaptatif et la communication interactive incorporés.
Pour modifier une configuration ou une propriété du formulaire adaptatif ou de la communication interactive incorporés, effectuez l’une des opérations suivantes.
- Ouvrez le formulaire original dans les formulaires adaptatifs ou la communication interactive dans les éditeurs respectifs et modifiez-les.
- Sélectionnez le formulaire adaptatif ou la communication interactive dans la page Sites en mode d’édition, puis sélectionnez Modifier dans une nouvelle fenêtre. Le formulaire d’origine s’ouvre en mode dʼédition.
Éléments à prendre en compte et bonnes pratiques considerations-and-best-practices
Gardez les points suivants à l’esprit lorsque vous incorporez des formulaires adaptatifs à des pages de sites AEM :
- L’en-tête et le pied de page du formulaire d’origine ne sont pas intégrés dans le formulaire incorporé.
- Les brouillons et les envois de formulaires incorporés sont pris en charge et visibles dans les onglets Brouillons et Formulaires envoyés du portail Formulaires.
- L’action Envoyer configurée sur le formulaire d’origine est conservée dans le formulaire incorporé.
- Le ciblage d’expérience et les tests A/B configurés sur le formulaire d’origine ne fonctionnent pas dans le formulaire incorporé. Cependant, vous pouvez utiliser le ciblage d’expérience sur la page Sites pour présenter différents formulaires en fonction des profils d’utilisateurs.
- Si vous avez configuré Adobe Analytics pour le formulaire d’origine, les données d’analyse du formulaire incorporé seront capturées dans Adobe Analytics. En revanche, elles ne seront pas disponibles dans le rapport d’analyse des formulaires.