Éditeur de formulaires adaptatifs

Présentation

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 la création et l’utilisation de formulaires adaptatifs. Vous pouvez choisir de créer un formulaire adaptatif basé sur un modèle de formulaire ou un schéma 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 motifs.

• 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.

  REMARQUE

  Vous pouvez modifier les propriétés du modèle de formulaire à partir de l’éditeur de formulaires adaptatifs ou de l’éditeur de modèles de formulaires adaptatifs. Pour plus d’informations, consultez l’article Modifier les propriétés du modèle de formulaire d’un formulaire adaptatif.

Pour créer un formulaire adaptatif, consultez l’article créer un formulaire adaptatif.

Interface utilisateur de création de formulaires adaptatifs

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 :

• Barre latérale
• Barre d’outils de la page
• Barre d’outils de composants
• Page de formulaires adaptatifs

Barre latérale

La barre latérale vous permet de

• Rechercher, afficher et utiliser des ressources dans votre référentiel de gestion des ressources numériques (DAM) AEM.
• Voir le contenu du formulaire tel que les panneaux, les composants, les champs et la mise en page.
• Ajouter des composants dans le formulaire.
• Modifier les propriétés du composant.

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.
    Vous pouvez 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 des 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 appuyez sur  > Conteneur de formulaires adaptatif, puis sur .

• 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.

Barre d’outils de la page

La barre d’outils de la page supérieure propose des options permettant de prévisualiser le formulaire, de modifier ses propriétés et de modifier sa mise en page. 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écouvrez les formulaires composés.

    • 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

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 appuyez sur Configurer, les propriétés du composant sont visibles dans la barre latérale. La configuration de ces propriétés vous permet de personnaliser l’expérience de capture de données. Vous pouvez modifier le nom de l’élément du composant, spécifier le texte du libellé dans le champ Titre du composant. Le nom de l’élément vous permet de capturer les valeurs saisies par les utilisateurs à l’aide du composant. Dans les propriétés du composant, vous spécifiez le comportement du composant et gérez les entrées utilisateur. Configurez les propriétés dans la barre latérale pour capturer les données utilisateur et les utiliser pour un traitement ultérieur. 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,

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 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 tapez Parent pour une zone de texte, vous pouvez voir les éléments suivants :

• Sous-section
• Section
• guideRootPanel
• Conteneur de formulaires adaptatifs

J. Autres: Fournit d’autres options pour utiliser le composant sélectionné.

• Afficher l’expression SOM
• Enregistrement d’un panneau en tant que fragment (pour les panneaux uniquement)
• Ajouter un panneau enfant (pour les panneaux uniquement)
• Barre d’outils Ajouter un panneau (pour les panneaux uniquement)
• Remplacer (pas pour les panneaux)

Page de formulaires adaptatifs

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 :

  • Mise en page 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 est redirigé après l’envoi du formulaire.
  • Action Envoyer: Définit le mode de traitement du formulaire sur le serveur une fois que l’utilisateur l’a envoyé.
  • Style: Spécifie le chemin d’accès au fichier CSS utilisé pour personnaliser l’aspect du formulaire.

• rootPanel : panneau racine d’un formulaire adaptatif. Il peut contenir des sous-panneaux sous le noeud éléments . Une disposition peut être associée à chaque panneau, y compris le panneau racine. La disposition du panneau détermine la disposition 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.

• toolbar: : 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.

Ressources Business.Adobe.com