Show Menu
SUJETS×

Présentation de la création 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 actifs d’infrastructure existants. 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 des 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.
  • Sans ou 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 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 :
A. Barre latérale B. Barre d'outils de la page C. Page de formulaire adaptatif

Barre d’outils Page

La barre d’outils de la page, située en haut de l’écran, propose des options permettant d’afficher un aperçu du formulaire, d’en modifier les propriétés, puis d’en modifier la disposition. Vous pouvez prévisualiser le formulaire lors de son écriture et apporter des modifications en conséquence. Dans la barre d’outils de la page, vous voyez :
  • Activer/désactiver le panneau latéral latéral : Permet d’afficher ou de masquer la barre latérale.
  • Informations sur la page : Permet de vue des propriétés de page, de publier/annuler la publication d’un formulaire, de début d’un processus de formulaire et d’ouvrir le formulaire dans l’interface utilisateur classique.
  • ​Règle : Vous permet d’imiter l’aspect de votre formulaire pour différentes tailles d’affichage, telles que les tablettes et les smartphones.
  • Modifier : Permet de sélectionner d’autres modes, tels que : Edition , Style , Développeur et Conception .
    • Modifier  : Modifie 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 aux développeurs de :
      • Découvrir la composition des formulaires.
      • Déboguer en temps réel afin de mieux résoudre les problèmes.
    • Concevoir . 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  : Permet d’afficher les propriétés du composant dans la barre latérale. , La configuration de ces propriétés permet de personnaliser la saisie de données. Vous pouvez changer le nom de l’élément du composant et indiquer le texte d’étiquette du champ Titre du composant. Le nom d’élément permet de capturer des valeurs que les utilisateurs saisissent à 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. Configurez les propriétés de la barre latérale pour capturer les données utilisateur et les utiliser ultérieurement. 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.
For example, if you tap Parent for a text box, you can see:
  • Sous-section
  • Section
  • guideRootPanel
  • Conteneur de formulaires adaptatifs
J. Autres  : Fournit des options permettant d’utiliser 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

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. Dansce 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 d’envoi  : définit la manière dont le formulaire est traité sur le serveur lorsque l’utilisateur 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 mise en page peut être associée à chaque panneau qui comprend le panneau racine. La mise en page 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.
  • 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. This toolbar can be added using the Add Toolbar action in the edit bar, which allows authors to add actions, such as Submit, Save, Reset, and so on.
  • 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.