Présentation de la création de formulaires adaptatifs introduction-to-authoring-adaptive-forms
Vue d’ensemble overview
Les formulaires adaptatifs vous permettent de créer des formulaires attrayants, réactifs, dynamiques et adaptatifs. AEM Forms fournit une interface utilisateur intuitive et des composants prêts à l’emploi pour créer et utiliser des formulaires adaptatifs. Vous pouvez choisir de créer un formulaire adaptatif basé sur un modèle ou un schéma de formulaire ou sans modèle de formulaire. Il est important de choisir avec soin le modèle de formulaire qui convient non seulement à vos besoins, mais qui étend également vos investissements et vos ressources d’infrastructure existantes. Vous pouvez choisir parmi les options suivantes pour créer un formulaire adaptatif :
-
Utilisation d’un modèle de données de formulaire
L’intégration de données vous permet d’intégrer des entités et des services provenant de sources de données disparates dans un modèle de données de formulaire que vous pouvez utiliser pour créer des formulaires adaptatifs. Choisissez le modèle de données de formulaire si le formulaire adaptatif que vous créez implique l’extraction et l’écriture de données depuis et vers plusieurs sources de données. -
Utilisation d’un modèle de formulaire XDP
Il s’agit d’un modèle de formulaire idéal si vous investissez dans des formulaires XFA ou XDP. Il fournit une méthode directe de conversion des formulaires de type XFA en formulaires adaptatifs. Toutes les règles XFA existantes sont conservées dans les formulaires adaptatifs associés. Les formulaires adaptatifs qui en résultent prennent en charge les éléments XFA, tels que les validations, les événements, les propriétés et les modèles. -
Utilisation d’une définition de schéma XML (XSD) ou d’un schéma JSON
Les schémas XML et JSON représentent la structure dans laquelle les données sont produites ou consommées par le système principal de votre entreprise. Vous pouvez associer le schéma à un formulaire adaptatif et utiliser ses éléments pour ajouter du contenu dynamique à un formulaire adaptatif. Les éléments du schéma peuvent être utilisés dans l’onglet Objets du modèle de données de l’explorateur de contenu lors de la création de formulaires adaptatifs. -
Utilisation sans aucun modèle de formulaire
Les formulaires adaptatifs créés avec cette option n’utilisent aucun modèle de formulaire. Les données XML générées à partir de ce type de formulaire présentent une structure plate avec des champs et des valeurs correspondantes.
Pour en savoir plus sur la création d’un formulaire adaptatif, consultez Création d’un formulaire adaptatif.
Interface utilisateur de création de formulaires adaptatifs adaptive-form-authoring-ui
L’interface utilisateur optimisée pour les écrans tactiles permet de créer des formulaires adaptatifs de manière intuitive et offre les avantages suivants :
- Fonctionnalité glisser-déposer
- Composants standard de formulaire
- Référentiel intégré de ressources
Lorsque vous créez ou modifiez un formulaire adaptatif, vous utilisez les éléments suivants de l’interface utilisateur :
A. Barre latérale B. Page de barre d’outils C. Page de formulaire adaptatif
Barre latérale sidebar
La barre latérale vous permet de
- Voir le contenu du formulaire tel que les panneaux, les composants, les champs et la mise en page.
- Modifier les propriétés du composant.
- Rechercher, afficher et utiliser des ressources dans votre référentiel de gestion des ressources numériques (DAM) AEM.
- Ajouter des composants dans le formulaire.
A. Explorateur de contenu B. Explorateur de propriétés C. Explorateur de ressources D. Explorateur de composants
La barre latérale comprend les explorateurs suivants :
-
Explorateur de contenu Dans l’explorateur de contenu, vous pouvez voir
-
Objets de formulaire
Affiche la hiérarchie des objets du formulaire. L’auteur peut accéder au composant spécifique du formulaire en appuyant sur cet élément dans l’arborescence de l’objet de formulaire. L’auteur peut alors rechercher des objets et les réorganiser depuis l’arborescence. -
Objets de modèle de données
Permet de voir la hiérarchie des modèles de formulaire.
Il vous permet de faire glisser des éléments du modèle de formulaire sur le formulaire adaptatif. Les éléments ajoutés sont automatiquement convertis en composants de formulaire, tout en conservant leurs propriétés d’origine. Vous pouvez voir les objets de modèle de données lorsque votre formulaire utilise un schéma XML, un schéma JSON ou un modèle XDP.
-
-
Explorateur de propriétés
Permet de modifier les propriétés d’un composant. Les propriétés affichées varient en fonction d’un composant. Pour voir les propriétés du conteneur de formulaires adaptatifs :
Sélectionnez un composant, puis > Conteneur de formulaires adaptatifs et enfin .
-
Explorateur de ressources
Isole différents types de contenu, tels que des images, des documents, des pages, des séquences vidéo, etc.
-
Explorateur de composants
Comprend des composants que vous pouvez utiliser pour créer un formulaire adaptatif. Vous pouvez faire glisser des composants sur le formulaire adaptatif afin d’ajouter des éléments de formulaire, puis configurer les éléments ajoutés conformément aux exigences. Le tableau ci-dessous décrit les composants répertoriés dans l’explorateur de composants.
Bonnes pratiques pour l’utilisation des composants best-practices
Les bonnes pratiques et les points clés suivants sont à prendre en compte lors de l’utilisation de composants de formulaire adaptatifs :
-
Chaque composant est associé à des propriétés qui contrôlent son apparence et ses fonctionnalités. Pour configurer les propriétés d’un composant, sélectionnez celui-ci et sélectionnez pour ouvrir les propriétés du composant dans l’explorateur de propriétés.
-
Un composant est identifié par son nom d’élément. Lorsque vous sélectionnez , vous pouvez changer le nom du composant en modifiant la valeur du champ Nom de l’élément dans l’explorateur de propriétés. Vous pouvez saisir uniquement des lettres, des chiffres, des traits d’union (-) et des traits de soulignement (_) dans le champ Nom de l’élément. D’autres caractères spéciaux ne sont pas autorisés et le nom de l’élément doit commencer par une lettre.
-
Vous pouvez modifier la propriété de titre d’un composant de formulaire adaptatif en ligne dans l’éditeur de formulaire sans ouvrir le navigateur de propriétés tant que le titre est visible sur le formulaire. Procédez comme suit :
-
Sélectionnez un composant ayant une propriété Titre et dont la propriété Masquer le titre est désactivée.
-
Sélectionnez pour rendre le titre modifiable.
-
Modifiez le titre et sélectionnez la touche Retour ou sélectionnez un emplacement en dehors du composant pour enregistrer les modifications. Sélectionnez la touche Échap pour annuler les modifications.
-
-
Certains composants de formulaire adaptatifs, tels que Courrier électronique et Téléphone, incluent des modèles de validation prêts à l’emploi. Toutefois, vous pouvez spécifier une validation personnalisée en mettant à jour le champ Modèle de validation sous l’accordéon Modèles dans les propriétés du composant. Voir les descriptions des composants dans le tableau ci-dessus pour plus d’informations sur les validations par défaut.
-
Les champs de formulaires adaptatifs, tels que Zone numérique et Adresse électronique, peuvent être configurés de façon à inclure des types spécifiques d’entrée HTML5. Lorsque ces champs sont actifs sur les appareils mobiles et les tablettes, le clavier affiche un alphabet, des chiffres et des caractères spécifiques qui sont généralement utilisés pour saisir des informations dans les champs. Cela permet aux utilisateurs de saisir les informations rapidement sans avoir à basculer entre les jeux de caractères sur le clavier. Pour activer une entrée spécifique pour un composant, cochez la case Utiliser un numéro de type HTML dans ses propriétés de composant.
-
Vous pouvez activer un composant de zone de texte afin de permettre la prise en charge du texte brut. Pour activer le texte enrichi pour une zone de texte, activez la case à cocher Autoriser le texte enrichi dans les propriétés du composant.
-
Vous pouvez activer les composants Zone de texte, Adresse électronique et Téléphone pour remplir automatiquement les champs tels que le nom, l’adresse, la carte de crédit, le téléphone et l’adresse électronique à partir des informations stockées dans les paramètres de remplissage automatique du navigateur. Pour activer cette fonctionnalité, sélectionnez Activer le remplissage automatique dans les propriétés du composant et sélectionnez un attribut de remplissage automatique. Lorsqu’un utilisateur ou une utilisatrice remplit un formulaire adaptatif, les valeurs sont suggérées à partir du profil de remplissage automatique dans le navigateur ou en fonction des valeurs précédemment renseignées par l’utilisateur ou l’utilisatrice. Notez que le remplissage automatique fonctionne si les paramètres de remplissage automatique dans le navigateur de l’utilisateur sont activés.
-
Spécifiez des valeurs pour les éléments Bouton radio et Case à cocher au format
{value}={text}
dans les propriétés du composant. -
Le composant de pièce jointe, par défaut, permet à un utilisateur ou une utilisatrice de joindre un seul fichier. Toutefois, vous pouvez configurer les propriétés du composant pour prendre en charge plusieurs pièces jointes. En outre, si un utilisateur ou une utilisatrice joint plusieurs fichiers avec le même nom de fichier, les pièces jointes peuvent provoquer des problèmes. Par conséquent, il est recommandé d’associer un identifiant unique pour chaque pièce jointe envoyée à l’envoi du formulaire. Pour ce faire :
- Sur votre serveur AEM Forms, accédez à Adobe Experience Manager > Outils > Opérations > Console Web.
- Recherchez et sélectionnez Service de configuration de formulaires adaptatifs.
- Dans la boîte de dialogue Service de configuration de formulaires adaptatifs, activez l’option Rendre les noms de fichier uniques. Par défaut, elle est désactivée.
-
Pour permettre aux utilisateurs et utilisatrices de joindre un fichier PDF à l’aide du navigateur Safari, veillez à ajouter application/pdf à la propriété Types de fichiers pris en charge du composant Pièce jointe de fichier. Les formulaires adaptatifs créés avec la version précédente d’AEM Forms peuvent contenir .pdf au lieu de application/pdf dans la propriété Types de fichiers pris en charge.
Pour connaître les bonnes pratiques concernant les formulaires adaptatifs, voir Bonnes pratiques pour l’utilisation des formulaires adaptatifs.
Barre d’outils Page page-toolbar
La barre d’outils de la page, située en haut de l’écran, propose des options permettant de prévisualiser le formulaire, d’en modifier les propriétés, puis d’en modifier la disposition. Vous pouvez prévisualiser le formulaire lors de sa création et apporter des modifications en conséquence. Dans la barre d’outils de la page, vous voyez :
-
Activer/désactiver le panneau latéral : affiche ou masque la barre latérale.
-
Informations sur la page : affiche les propriétés de la page, permet de publier/d’annuler la publication d’un formulaire, de lancer un processus de formulaire et d’ouvrir le formulaire dans une IU classique.
-
Émulateur : simule l’aspect de votre formulaire pour différentes tailles d’affichage, selon les tablettes et les téléphones, par exemple.
-
Modifier : permet de sélectionner d’autres modes comme : Modifier, Style, Développeur et Conception.
-
Modifier : permet de modifier les propriétés du formulaire et de ses composants. Exemple : l’ajout d’un composant, le dépôt d’une image et l’indication des champs obligatoires.
-
Style : définit l’aspect des composants de votre formulaire. Par exemple, en mode Style, vous pouvez sélectionner un panneau et définir sa couleur d’arrière-plan.
-
Développeur : permet à un développeur de :
- Découvrir la composition des formulaires.
- Déboguer en temps réel afin de mieux résoudre les problèmes.
-
Conception. Permet d’activer ou de désactiver les composants personnalisés ou les composants prêts à l’emploi qui ne sont pas répertoriés dans la barre latérale.
-
-
Aperçu : permet de prévisualiser le formulaire avant de le publier.
Barre d’outils de composants component-toolbar
Lorsque vous sélectionnez un composant, une barre d’outils s’affiche, vous permettant de l’utiliser. Vous avez la possibilité de couper, coller, déplacer et spécifier les propriétés des composants. Vous avez le choix entre :
A. Configurer : lorsque vous sélectionnez Configurer, les propriétés du composant sont visibles dans la barre latérale. La configuration de ces propriétés permet de personnaliser la capture de données. Vous pouvez modifier le nom de l’élément du composant et indiquer le texte de libellé dans le champ Titre du composant. Le nom de l’élément vous permet de capturer les valeurs saisies par les utilisateurs et utilisatrices à l’aide du composant. Dans les propriétés du composant, vous indiquez le comportement du composant et gérez l’entrée de l’utilisateur ou utilisatrice. Configurez les propriétés dans la barre latérale pour capturer les données utilisateur et les utiliser pour un traitement approfondi. Les propriétés du conteneur de formulaires adaptatifs permettent de spécifier des bibliothèques clients, des mises en page, des thèmes, des documents d’enregistrement, des paramètres d’enregistrement, des paramètres d’envoi et des paramètres de métadonnées.
B. Copier : permet de copier un composant et le coller ailleurs dans le formulaire. Lorsque vous collez un composant, ce dernier obtient un nouveau nom d’élément mais conserve les propriétés du composant copié.
C.Couper : Permet de déplacer un composant d’un endroit à un autre dans le formulaire adaptatif.
D. Supprimer : permet de supprimer le composant du formulaire.
E. Insérer : permet d’insérer un composant au-dessus du composant sélectionné.
F. Coller : permet de coller du composant coupé ou copié à l’aide des options décrites ci-dessus.
G. Éditeur de règles : permet d’ouvrir l’éditeur de règles. Pour plus d’informations, voir Éditeur de règles.
H. Groupe : permet de sélectionner plusieurs composants permettant de couper, copier ou coller plusieurs composants ensemble.
I. Parent : permet de sélectionner le parent d’un composant. Par exemple, un champ de texte se trouve dans une sous-section, qui réside elle-même dans une section. La section réside dans le panneau racine de guide, et le conteneur du formulaire adaptatif est le parent d’un panneau racine de guide. Pour chaque composant s’affichent toutes les options avec la hiérarchie triée de bas en haut.
Par exemple, si vous sélectionnez Parent pour une zone de texte, vous pouvez voir les éléments suivants :
- Sous-section
- Section
- guideRootPanel
- Conteneur de formulaires adaptatifs
J. Autres options : fournit d’autres options pour travailler avec le composant sélectionné.
- Afficher l’expression SOM
- Enregistrer un panneau en tant que fragment (pour les panneaux uniquement)
- Ajouter un panneau enfant (pour les panneaux uniquement)
- Ajouter une barre d’outils de panneau (pour les panneaux uniquement)
- Remplacer (pas pour les panneaux)
Page de formulaires adaptatifs af-page
La page de formulaires adaptatifs est le formulaire proprement dit. Elle est identique à toute autre page de gestion de contenu Web modélisée en tant que composant de gestion de contenu Web cq:Page
. L’illustration suivante présente la structure de contenu d’un formulaire adaptatif standard.
La structure de contenu contient généralement les composants principaux ci-dessous :
-
guideContainer : racine d’un formulaire adaptatif, indiquée sous la forme Début du formulaire adaptatif dans l’interface utilisateur du formulaire. Dans ce composant, vous pouvez spécifier les éléments suivants :
- Disposition du formulaire adaptatif pour mobiles : définit l’apparence du formulaire sur les appareils mobiles.
- Page de remerciement : définit la page vers laquelle l’utilisateur ou l’utilisatrice est redirigée après l’envoi du formulaire.
- Action d’envoi : définit la manière dont le formulaire est traité sur le serveur lorsque l’utilisateur ou l’utilisatrice l’envoie.
- Style : indique le chemin d’accès au fichier CSS utilisé pour personnaliser l’apparence du formulaire.
-
rootPanel : panneau racine d’un formulaire adaptatif. Il peut contenir des sous-panneaux sous le nœud d’éléments. Une disposition peut être associée à chaque panneau qui comprend le panneau racine. La disposition du panneau détermine la mise en page du formulaire. Par exemple, dans la mise en page en accordéon, les éléments constitutifs sont disposés sous la forme d’étapes en accordéon.
-
barre d’outils : une barre d’outils globale est associée à un conteneur de formulaires adaptatifs. Il s’agit d’une barre d’outils à l’échelle du formulaire. Cette barre d’outils peut être ajoutée à l’aide de l’action Ajouter une barre d’outils de la barre d’édition, ce qui permet aux auteurs d’ajouter des actions telles que Envoyer, Enregistrer, réinitialiser, etc.
-
ressources : ce nœud contient des informations supplémentaires au sujet de la création de formulaires. Il s’agit, par exemple, de détails sur le modèle de formulaire, de détails de localisation, etc).