Fonctionnalités de disposition des formulaires adaptatifs layout-capabilities-of-adaptive-forms

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.

Version
Lien de l’article
AEM as a Cloud Service
Cliquez ici
AEM 6.5
Cet article

Adobe Experience Manager (AEM) permet de créer des formulaires adaptatifs simples d’emploi, qui offrent des expériences dynamiques aux utilisateurs finaux et aux utilisatrices finales. La disposition des formulaires détermine l’affichage des éléments et des composants dans un formulaire adaptatif.

Connaissances préalables prerequisite-knowledge

Avant de découvrir les différentes fonctionnalités de disposition des formulaires adaptatifs, consultez les articles suivants pour en savoir plus sur les formulaires de ce type.

Présentation d’AEM Forms

Présentation de la création de formulaires

Types de disposition types-of-layouts

Un formulaire adaptatif propose les types de disposition suivants :

Disposition de panneau  : contrôle l’affichage des éléments ou des composants d’un panneau sur un appareil.

Disposition mobile  : contrôle la navigation d’un formulaire sur un appareil mobile. Si la largeur de l’écran d’un périphérique est supérieure ou égale à 768 pixels, la disposition est considérée comme étant adaptée à un appareil mobile et optimisée en conséquence.

Disposition de barre d’outils  : contrôle le positionnement des boutons d’action dans la barre d’outils ou la barre d’outils du panneau d’un formulaire.

Toutes ces dispositions de panneau sont définies à l’emplacement suivant :

/libs/fd/af/layouts.

NOTE
Pour modifier la disposition d’un formulaire adaptatif, utilisez le mode de création dans AEM.

Emplacement des dispositions dans le référentiel CRX

Disposition de panneau panel-layout

L’auteur ou l’autrice d’un formulaire peut associer une disposition à chaque panneau d’un formulaire adaptatif, y compris le panneau racine.

Les dispositions de panneau sont disponibles à l’emplacement /libs/fd/af/layouts/panelsuivant.

Liste des dispositions pour le panneau racine d’un formulaire adaptatif

Liste des dispositions de panneau dans des formulaires adaptatifs

Réactif : tout sur une page sans navigation responsive-everything-on-one-page-without-navigation-br

Utilisez cette disposition de panneau pour créer une disposition réactive, qui s’adapte à la taille d’écran de votre appareil sans avoir à recourir à une navigation spécialisée.

Cette disposition vous permet de placer plusieurs composants  Panneau de formulaire adaptatif l’un après l’autre dans le panneau.

Formulaire avec disposition réactive, tel qu’il est affiché sur un petit écran

Formulaire avec disposition réactive, tel qu’il est affiché sur un petit écran

Formulaire avec disposition réactive, tel qu’il est affiché sur un grand écran

Formulaire avec disposition réactive, tel qu’il est affiché sur un grand écran

Assistant : un formulaire à plusieurs étapes affichant une étape à la fois. wizard-a-multi-step-form-showing-one-step-at-a-time

Utilisez cette disposition de panneau pour proposer une navigation guidée dans un formulaire. Vous pouvez, par exemple, l’utiliser pour capturer des informations obligatoires dans un formulaire, tout en guidant les utilisateurs pas à pas.

Utilisez le composant Panel adaptive form pour proposer une navigation pas à pas dans un panneau. Lorsque vous utilisez cette disposition, l’utilisateur ne passe à l’étape suivante qu’après avoir terminé l’étape en cours.

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

Expression de fin d’étape dans la disposition Assistant d’un formulaire à plusieurs étapes

Expression de fin d’étape dans la disposition Assistant d’un formulaire à plusieurs étapes

Formulaire avec mise en page d‘assistant

Formulaire avec assistant

Disposition pour la conception en accordéon layout-for-accordion-design

Cette disposition vous permet de placer le composant Panel adaptive form dans un panneau avec un style de navigation en accordéon. Cette disposition permet également de créer des panneaux reproductibles. Ces panneaux permettent d’ajouter ou de supprimer des panneaux de manière dynamique en fonction de vos besoins. Vous pouvez définir le nombre minimal et maximal de répétitions d’un panneau. Le titre du panneau peut également être déterminé de manière dynamique en fonction des informations fournies dans les éléments du panneau.

Une expression récapitulative peut être utilisée pour afficher les valeurs fournies par l’utilisateur final dans le titre du panneau réduit.

Panneaux reproductibles utilisant une disposition de type Accordéon dans des formulaires adaptatifs

Panneaux répétables créés à l’aide de la disposition Accordéon

Disposition avec onglets – Les onglets s’affichent à gauche tabbed-layout-tabs-appear-on-the-left

Cette disposition permet de placer le composant Panel adaptive form dans un panneau avec une navigation par onglets. Les onglets sont placés à gauche du contenu du panneau.

Dans la disposition avec onglets, les onglets sont affichés à gauche.

Onglets affichés à gauche d’un panneau

Disposition avec onglets – Les onglets s’affichent en haut tabbed-layout-tabs-appear-on-the-top

Cette disposition permet de placer le composant Panel adaptive form dans un panneau avec une navigation à onglets. Les onglets sont placés au-dessus du contenu du panneau.

Disposition à onglets dans des formulaires adaptatifs, avec affichage des onglets en position supérieure

Onglets affichés dans la partie supérieure d’un panneau

Dispositions pour appareils mobiles mobile-layouts

Les dispositions mobiles permettent une navigation conviviale sur les appareils mobiles dotés d’écrans relativement plus petits. Les dispositions mobiles utilisent des styles à onglets ou avec assistant pour la navigation dans les formulaires. L’application d’une disposition mobile fournit une disposition unique pour l’ensemble du formulaire.

Cette disposition contrôle la navigation à l’aide d’une barre de navigation et d’un menu de navigation. La barre de navigation affiche des icônes < et > pour indiquer les étapes de navigation suivante et précédente dans le formulaire.

Les dispositions pour appareils mobiles sont disponibles à l’emplacement /libs/fd/af/layouts/mobile/. Les dispositions suivantes pour appareils mobiles sont disponibles, par défaut, dans les formulaires adaptatifs.

Liste de dispositions pour appareils mobiles dans les formulaires adaptatifs

Liste de dispositions pour appareils mobiles dans les formulaires adaptatifs

Lorsque vous utilisez une disposition pour appareils mobiles, le menu de formulaire qui permet d’accéder aux différents panneaux de formulaire est disponible en appuyant sur l’icône aem6forms_form_menu .

Disposition avec titres de panneau dans l’en-tête de formulaire layout-with-panel-titles-in-the-form-header

Cette disposition, comme son nom l’indique, affiche les titres des panneaux ainsi que le menu de navigation et la barre de navigation. Cette disposition fournit également des icônes Suivant et Précédent pour la navigation.

Dispositions pour appareils mobiles avec affichage du titre du panneau dans les en-têtes de formulaire

Dispositions pour appareils mobiles avec affichage du titre du panneau dans les en-têtes de formulaire

Disposition sans titres de panneau dans l’en-tête de formulaire layout-without-panel-titles-in-the-form-header

Cette disposition, comme son nom l’indique, affiche uniquement le menu de navigation et la barre de navigation sans les titres des panneaux. Cette disposition fournit également des icônes Suivant et Précédent pour la navigation.

Dispositions pour appareils mobiles sans affichage du titre du panneau dans les en-têtes de formulaire

Dispositions pour appareils mobiles sans affichage du titre du panneau dans les en-têtes de formulaire

Dispositions de barre d’outils toolbar-layouts

La mise en page de barre d’outils détermine le positionnement et l’affichage de tout bouton d’action que vous ajoutez aux formulaires adaptatifs. La disposition peut être ajoutée au niveau d’un formulaire ou d’un panneau.

Liste des dispositions de barre d’outils dans des formulaires adaptatifs en vue de contrôler la disposition des boutons

Liste des dispositions de barre d’outils dans des formulaires adaptatifs

Les dispositions de barre d’outils sont disponibles à l’emplacement /libs/fd/af/layouts/toolbar. Les formulaires adaptatifs fournissent, par défaut, les dispositions de barre d’outils suivantes.

Disposition par défaut de la barre d’outils default-layout-for-toolbar

Cette disposition est sélectionnée comme disposition par défaut lorsque vous ajoutez des boutons d’action dans un formulaire adaptatif. La sélection de cette disposition affiche la même disposition pour les postes de travail et les appareils mobiles.

Vous pouvez également ajouter plusieurs barres d’outils contenant des boutons d’action configurés avec cette disposition. Un bouton d’action est associé à un contrôle de formulaire. Vous pouvez configurer les barres d’outils pour qu’elles soient situées avant ou après un panneau.

Affichage par défaut de la barre d’outils

Affichage par défaut de la barre d’outils

Disposition fixe pour appareil mobile pour la barre d’outils mobile-fixed-layout-for-toolbar

Sélectionnez cette disposition pour proposer d’autres dispositions pour les postes de travail et les appareils mobiles.

Pour la disposition destinée aux postes de travail, vous pouvez ajouter des boutons d’action à l’aide d’étiquettes spécifiques. Vous pouvez configurer une seule barre d’outils avec cette disposition. Si vous configurez plusieurs barres d’outils avec cette disposition, un chevauchement se produit pour les appareils mobiles et une seule barre d’outils est visible. Par exemple, une barre d’outils peut se trouver en bas ou en haut du formulaire, ou après ou avant les panneaux du formulaire.

Pour la disposition destinée aux appareils mobiles, vous pouvez ajouter des boutons d’action à l’aide d’icônes.

Disposition fixe pour appareil mobile pour la barre d’outils

Disposition fixe pour appareil mobile pour la barre d’outils

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2