Créer un formulaire adaptatif creating-an-adaptive-form-core-components
Les formulaires adaptatifs vous permettent de créer des formulaires attrayants, réactifs, dynamiques et adaptatifs. AEM Forms fournit un assistant convivial destiné aux entreprises pour créer rapidement un Forms adaptatif. L’assistant fournit une navigation rapide par onglets pour sélectionner facilement un modèle, un style, des champs et des options d’envoi préconfigurés afin de créer un formulaire adaptatif.
Avant de commencer, découvrez les types de composants de formulaires disponibles :
-
Composants principaux de formulaires adaptatifs : il s’agit de composants de capture de données normalisés. Ces composants offrent des fonctionnalités de personnalisation, un délai de développement réduit et de plus bas coûts de maintenance pour vos expériences d’inscription numérique. Un développeur ou une développeuse peut facilement personnaliser et mettre en forme ces composants. Adobe recommande d’utiliser ces composants modernes et extensibles pour développer des formulaires adaptatifs.
-
Composants de base des formulaires adaptatifs : il s’agit de composants de capture de données classiques (anciens). Vous pouvez continuer à les utiliser pour modifier votre formulaire adaptatif existant basé sur les composants de base. Si vous créez des formulaires, Adobe recommande d’utiliser les composants principaux de formulaires adaptatifs.
Conditions préalables
Pour créer un formulaire adaptatif, vous devez disposer des éléments suivants :
-
Activer les composants principaux de Forms adaptatif pour votre environnement : lorsque vous créez un programme, les composants principaux de Forms adaptatif sont déjà activés pour votre environnement. Si vous disposez d’un environnement Forms as a Cloud Service basé sur Archetype 39 ou version antérieure, Activez les composants principaux Forms adaptatif pour votre environnement. Lors de l’activation des composants principaux pour votre environnement, le modèle Formulaires adaptatifs (composant principal) et le thème de la zone de travail sont ajoutés à votre environnement. Si votre version du SDK AEM est antérieure à 2023.02.0, assurez-vous que l’indicateur
prerelease
est activé dans votre environnement, car les composants principaux des formulaires adaptatifs faisaient partie de la version préliminaire avant la version 2023.02.0. -
Modèle de formulaire adaptatif : un modèle fournit une structure de base et définit l’aspect, c’est-à-dire la mise en page et les styles, d’un formulaire adaptatif. Il comporte des composants pré-formatés contenant certaines propriétés et une certaine structure de contenu. Il fournit également les options permettant de définir un thème et une action d’envoi. Le thème définit l’aspect et l’action d’envoi définit l’action à entreprendre lors de l’envoi d’un formulaire adaptatif. Par exemple, l’envoi des données collectées à une source de données. Le service cloud fournit un modèle prêt à l’emploi, sans nom :
- Le modèle
blank
est inclus dans chaque nouveau programme AEM Forms as a Cloud Service. - Vous pouvez installer le package de référence, via le gestionnaire de modules, pour ajouter le modèle
blank
à votre programme AEM Forms as a Cloud Service. - Vous pouvez également créer entièrement un modèle de Forms adaptatif (composants principaux).
- Vous pouvez également déployer des exemples de modèles dans votre environnement. Vous pouvez ainsi créer rapidement des formulaires.
- Le modèle
-
Un thème de formulaire adaptatif : un thème contient des détails de style pour les composants et les panneaux. Ces styles incluent les propriétés telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence, l’alignement et la taille. Lorsque vous appliquez un thème, le style spécifié se reflète sur les composants correspondants. Le modèle
Canvas
est inclus avec chaque nouveau programme as a Cloud Service AEM Forms. Vous pouvez également déployer des thèmes d’exemple dans votre environnement. Cela permet de commencer la mise en forme de vos formulaires et fournit une structure de base pour créer ou personnaliser un thème en fonction des besoins de votre entreprise. -
Autorisations : ajoutez vos utilisateurs et utilisatrices au groupe forms-users. Les membres du groupe forms-users ont les autorisations de créer un formulaire adaptatif. Pour obtenir une liste détaillée des groupes d’utilisateurs et d’utilisatrices spécifiques aux formulaires, voir Groupes et autorisations.
Créer un formulaire adaptatif create-an-adaptive-form-core-components
-
Connectez-vous à votre instance d’auteur Experience Manager Forms. Il peut s’agir d’une instance cloud ou d’une instance de développement local.
-
Entrez vos informations d’identification dans la page de connexion d’Experience Manager. Une fois connecté, dans le coin supérieur gauche, sélectionnez Adobe Experience Manager > Formulaires > Formulaires et documents..
-
Sélectionnez Créer > Forms adaptatif. Cette action permet d’ouvrir l’assistant. Dans l’onglet Source, sélectionnez un modèle :
Lorsque vous sélectionnez un modèle, un thème et l’action d’envoi spécifiée dans le modèle sont sélectionnés automatiquement. Le bouton Créer est activé. Vous pouvez accéder aux onglets Style ou Envoi pour sélectionner un autre thème ou une autre action d’envoi. Si le modèle sélectionné ne spécifie pas de thème, le bouton de création reste désactivé. Vous pouvez accéder à l’onglet Styles pour sélectionner manuellement un thème.
note note NOTE Si vous n’avez pas le modèle Formulaires adaptatifs (composant principal) sur votre environnement, vous devez activer les composants principaux des formulaires adaptatifs pour votre environnement. Quand vous activez des composants principaux pour votre environnement, le modèle Formulaires adaptatifs (composant principal) est ajouté à votre environnement. -
Dans l’onglet Style, sélectionnez un thème :
-
Lorsque le modèle sélectionné spécifie un thème, celui-ci est automatiquement sélectionné dans l’assistant. Vous pouvez également choisir un thème différent dans l’onglet Style.
-
Si le modèle sélectionné ne spécifie aucun thème, vous pouvez utiliser l’onglet Style pour en choisir un. Le bouton Créer n’est activé qu’après la sélection d’un thème.
-
-
(Facultatif) Dans l’onglet Données, sélectionnez un modèle de données :
-
Modèle de données de formulaire (FDM) : un modèle de données de formulaire vous permet d’intégrer des entités et des services provenant de sources de données disparates à un formulaire adaptatif. Choisissez le modèle de données de formulaire (FDM) si le formulaire adaptatif que vous créez implique de récupérer et d’écrire des données à partir de et vers plusieurs sources de données.
-
Schéma JSON : schéma JSON, notre formulaire adaptatif basé sur les composants principaux, permet une intégration transparente au système back-end de votre entreprise en vous permettant d’associer un schéma JSON, qui représente la structure des données générées ou consommées. Cette association permet aux créateurs et créatrices d’ajouter dynamiquement du contenu au formulaire adaptatif à l’aide des éléments du schéma. Les éléments du schéma sont facilement accessibles dans l’onglet Objets de modèle de données de l’explorateur de contenu au cours du processus de création, et tous les champs sont automatiquement ajoutés à tout formulaire adaptatif créé.
Par défaut, tous les champs du schéma JSON associé sont automatiquement sélectionnés et convertis en composants de formulaire adaptatif correspondants, ce qui simplifie le processus de création. L’assistant vous permet, en outre, de sélectionner les champs à inclure dans le formulaire adaptatif au moyen de cases à cocher.
-
-
Dans l’onglet Envoi, sélectionnez une action d’envoi :
-
Lorsque vous sélectionnez un modèle, l’action d’envoi spécifiée dans le modèle est sélectionnée automatiquement. Vous pouvez sélectionner une autre action d’envoi dans l’onglet Envoi. L’onglet Envoi affiche toutes les actions d’envoi disponibles.
-
Lorsque le modèle sélectionné ne spécifie aucune action d’envoi, vous pouvez utiliser l’onglet Envoi pour sélectionner une action d’envoi
-
-
(Facultatif) Dans l’onglet Diffusion, vous pouvez spécifier une date de publication ou de d’annulation de publication pour un formulaire adaptatif.
-
Sélectionnez Créer. Une boîte de dialogue pour spécifier le titre, le nom et l’emplacement d’enregistrement du formulaire adaptatif s’affiche :
- Titre Spécifie le nom d’affichage du formulaire. Le titre vous permet d’identifier le formulaire dans l’interface utilisateur Experience Manager Forms d’AEM Forms.
- Nom : indique le nom du formulaire. Un nœud portant le nom spécifié est créé dans le référentiel. Lorsque vous commencez à saisir un titre, la valeur du champ Nom est automatiquement générée. Vous pouvez modifier la valeur suggérée. Le champ Nom ne peut contenir que des caractères alphanumériques, des traits d’union et des traits de soulignement. Toutes les entrées non valides sont remplacées par un trait d’union.
- Chemin d’accès : indique l’emplacement d’enregistrement du formulaire adaptatif. Vous pouvez enregistrer le formulaire adaptatif directement sur
/content/dam/formsanddocuments
ou créer un dossier tel que/content/dam/formsanddocuments/adaptiveforms
pour enregistrer un formulaire adaptatif. Assurez-vous de créer le dossier avant de l’utiliser dans le chemin d’accès. Le champ Chemin d’accès ne crée pas de dossier automatiquement.
-
Sélectionnez Créer. Un formulaire adaptatif est créé et s’ouvre dans l’éditeur de formulaires adaptatifs. L’éditeur affiche le contenu disponible dans le modèle. En fonction du type de formulaire adaptatif, les éléments de formulaire présents dans le schéma JSON ou le modèle de données de formulaire (FDM) associé sont affichés dans l’onglet Objets de modèle de données de l’ explorateur de contenu de la barre latérale. Vous pouvez également faire glisser ces éléments pour créer votre formulaire adaptatif.
Désormais, vous pouvez faire glisser les composants principaux de Forms adaptatif vers le conteneur de Forms adaptatif pour concevoir et créer le formulaire. Vous pouvez également consulter https://aemcomponents.dev/ pour afficher les composants principaux disponibles en action.
Configurer l’action Envoyer pour un formulaire adaptatif configure-submit-action-for-form
Une action Soumettre vous permet de choisir la destination des données capturées via un formulaire adaptatif. Elle est déclenchée lorsqu’un utilisateur ou une utilisatrice clique sur le bouton Soumettre d’un formulaire adaptatif. Les formulaires adaptatifs incluent certaines actions de soumission prêtes à l’emploi. Vous pouvez également étendre les actions de soumission par défaut pour créer votre propre action de soumission. Pour configurer une action de soumission pour votre formulaire :
-
Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.
-
Cliquez sur l’icône des propriétés du conteneur de guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.
-
Cliquez sur l’onglet Envoi.
-
Sélectionnez et configurez une action d’envoi en fonction de vos besoins. Pour plus d’informations sur les actions d’envoi, voir Action d’envoi de formulaire adaptatif
Rediriger l’utilisateur ou l’utilisatrice vers une page ou afficher un message de remerciement lors de l’envoi du formulaire
Lors de la soumission d’un formulaire, vous pouvez rediriger la personne utilisatrice vers une autre page web ou un message. Pour rediriger la personne utilisatrice ou configurer le message de remerciement :
-
Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.
-
Cliquez sur l’icône des propriétés du conteneur de guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.
-
Ouvrez l’onglet Envoi.
-
Pour configurer une URL de redirection, pour l’option Lors de l’envoi, sélectionnez l’option Rediriger vers l’URL, puis parcourez et sélectionnez une page AEM Sites, ou fournissez l’URL d’une page externe.
-
Pour configurer un message de remerciement ou personnalisé, sélectionnez l’option Afficher le message et écrivez un message dans la zone Contenu du message pour l’option Lors de l’envoi. Il s’agit d’une zone de texte enrichi. Vous pouvez utiliser l’option Plein écran pour afficher tous les éléments de texte enrichi disponibles.
-
Configuration d’un schéma ou d’un modèle de données de formulaire (FDM) pour un formulaire adaptatif configure-schema-or-data-model-for-form
Vous pouvez utiliser le modèle de données de formulaire (FDM) pour connecter un formulaire à une Source de données afin d’envoyer et de recevoir des données en fonction des actions de l’utilisateur. Vous pouvez également connecter un formulaire à un schéma JSON pour recevoir les données envoyées dans un format prédéfini. Selon les besoins, connectez votre formulaire à un schéma JSON ou à un modèle de données de formulaire (FDM) :
Configuration d’un schéma JSON ou d’un modèle de données de formulaire (FDM) pour votre formulaire
Pour configurer un schéma JSON ou un modèle de données de formulaire (FDM) pour votre formulaire :
-
Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.
-
Cliquez sur l’icône des propriétés du conteneur de guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.
-
Ouvrez l’onglet Modèle de données.
-
Sélectionnez et configurez un schéma JSON ou un modèle de données de formulaire (FDM), en fonction de vos besoins :
- Lorsque vous sélectionnez l’option Form Model (Modèle de formulaire), utilisez l’option Select Form Data Model (Sélectionner un modèle de données de formulaire) pour sélectionner un modèle de données de formulaire préconfiguré (FDM).
- Lorsque vous sélectionnez l’option Schéma, utilisez l’option Schéma pour sélectionner un schéma JSON pour votre formulaire.
-
Cliquez sur Terminé.
Configurer un service de préremplissage configure-prefill-service-for-form
Vous pouvez utiliser le service de préremplissage pour remplir automatiquement les champs d’un formulaire adaptatif à l’aide de données existantes. Lorsqu’un utilisateur ou une utilisatrice ouvre un formulaire, les valeurs de ces champs sont préremplies. Vous pouvez effectuer les actions suivantes :
Utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire adaptatif fdm-prefill-service
Vous pouvez utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire adaptatif à l’aide d’un modèle de données de formulaire ou d’un service de préremplissage personnalisé. Le service de préremplissage de modèle de données de formulaire utilise la méthode Obtenir le service du modèle de données de formulaire configuré pour récupérer des données. Pour utiliser le service de préremplissage de modèle de données de formulaire pour un formulaire adaptatif :
- Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide du formulaire adaptatif.
- Cliquez sur l’icône des propriétés du conteneur de guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.
- Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs
. La boîte de dialogue Conteneur de formulaires adaptatifs pour configurer les modèles de données s’ouvre.
- Sélectionnez un modèle de données de formulaire (FDM). Ouvrez l’onglet De base. Dans le service de préremplissage, sélectionnez Service de préremplissage de modèle de données de formulaire.
- Cliquez sur Terminé. Votre formulaire adaptatif est maintenant configuré pour utiliser le préremplissage du modèle de données de formulaire. Vous pouvez désormais utiliser l’éditeur de règles pour créer des règles afin de préremplir les champs du formulaire.
Modifier les propriétés du modèle de formulaire d’un formulaire adaptatif edit-form-model
-
Sélectionnez le formulaire adaptatif et sélectionnez > Ouvrir les propriétés. La page Propriétés du formulaire s’ouvre.
-
Accédez à l’onglet Modèle de formulaire et choisissez un modèle de formulaire. Si le formulaire adaptatif ne comporte pas de modèle de formulaire, vous avez la possibilité de choisir un schéma JSON ou un modèle de données de formulaire (FDM). D’autre part, si le formulaire adaptatif est déjà basé sur un modèle de formulaire, vous avez la possibilité de passer à un autre modèle de formulaire du même type. Par exemple, si le formulaire utilise un schéma JSON, vous pouvez facilement passer à un autre schéma JSON. De même, si le formulaire utilise un modèle de données de formulaire (FDM), vous pouvez passer à un autre modèle de données de formulaire (FDM).
-
Sélectionnez Enregistrer pour enregistrer les propriétés.
Comment renommer un formulaire adaptatif AEM ? rename-an-AEM-Adaptive-Form
Pour renommer un formulaire adaptatif, procédez comme suit :
- Sélectionnez un formulaire adaptatif dans l’interface d’utilisation d’AEM Forms.
- Cliquez sur le bouton Propriétés situé sur le rail supérieur.
- Modifiez le nom du formulaire dans l’onglet Titre, comme illustré ci-dessous.
- Cliquez sur Enregistrer et fermer.
Voir également see-also
- Créer un formulaire adaptatif AEM
- Ajouter un formulaire adaptatif AEM à une page AEM Sites
- Appliquer des thèmes à un formulaire adaptatif AEM
- Ajouter des composants à un formulaire adaptatif AEM
- Utiliser reCAPTCHA dans un formulaire adaptatif AEM
- Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
- Traduire un formulaire adaptatif AEM
- Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
- Connecter un formulaire adaptatif à Microsoft SharePoint
- Connecter un formulaire adaptatif à Microsoft Power Automate
- Connecter un formulaire adaptatif à Microsoft OneDrive
- Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
- Connecter un formulaire adaptatif à Salesforce
- Utiliser Adobe Sign dans un formulaire adaptatif AEM
- Ajouter un nouveau paramètre régional pour un formulaire adaptatif
- Envoyer des données de formulaire adaptatif à une base de données
- Envoyer des données de formulaire adaptatif à un point d’entrée REST
- Envoyer des données de formulaire adaptatif à un workflow AEM
- Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM
- Ajouter des contrôles de version, des commentaires et des annotations à un formulaire adaptatif
- Comparer des formulaires adaptatifs
- Ajouter un comportement dynamique aux formulaires à l’aide de l’éditeur de règles
- Définir la disposition des formulaires pour différentes tailles d’écran et différents types d’appareils