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

Connaissances préalables

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 des formulaires AEM

Présentation de la création de formulaires

Types de disposition

Un formulaire adaptatif vous propose les types de disposition ci-dessous :

Mise en page du panneau

Contrôle la manière dont les éléments ou composants d’un panneau sont affichés sur l’écran d’un appareil.

Disposition pour appareil 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.

Remarque :

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

Mise en page du panneau

Un auteur de formulaire peut associer une disposition à chaque panneau d’un formulaire adaptatif, y compris le panneau racine.

Les mises en page de panneau sont disponibles à l’emplacement suivant : /libs/fd/af/layouts/panel.

Liste des mises en page pour le panneau racine d’un formulaire adaptatif
Liste des mises en page de panneau dans des formulaires adaptatifs

Réactif : tous sur une page sans navigation

Utilisez cette mise en page de panneau pour créer une disposition réactive qui s’adapte à la taille d’écran de votre appareil sans qu’il faille 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 écran de petite taille
Formulaire avec disposition réactive, tel qu’il est affiché sur un écran de petite taille
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 : création de formulaire en plusieurs étapes, une étape à la fois

Utilisez cette mise en page de panneau pour offrir 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 Panneau de formulaire adaptatif pour fournir 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

Mise en page de la conception en accordéon

Cette disposition vous permet de placer le composant Panneau de formulaire adaptatif dans un panneau avec un style de navigation en accordéon. Cette disposition vous permet également de créer des panneaux reproductibles. Ces panneaux vous permettent d’ajouter ou de supprimer des panneaux de manière dynamique suivant vos besoins. Vous pouvez définir le nombre minimum et maximum de répétitions d’un panneau. Le titre du panneau peut également être déterminé de manière dynamique sur la base 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 reproductibles créés à l’aide de la disposition Accordéon

Mise en page à onglets – Les onglets s’affichent sur la gauche

Cette disposition vous permet de placer le composant Panneau de formulaire adaptatif dans un panneau avec une navigation par onglets. Les onglets sont placés à gauche du contenu du panneau.

Dans la mise en page A onglets, les onglets sont affichés à gauche.
Onglets affichés à gauche d’un panneau

Mise en page à onglets – Les onglets s’affichent en haut

Cette disposition vous permet de placer le composant Panneau de formulaire adaptatif dans un panneau avec une navigation par onglets. Les onglets sont placés au-dessus du contenu du panneau.

Mise en page A onglets dans des formulaires adaptatifs, avec affichage des onglets en position supérieure
Onglets affichés dans la partie supérieure d’un panneau

Mises en page pour appareils mobiles

Ces dispositions permettent de naviguer de manière conviviale sur les appareils mobiles équipés d’écrans relativement petits. Les styles Avec onglets ou Assistant sont utilisés pour naviguer dans les formulaires. L’application d’une telle disposition permet de bénéficier d’une mise en page unique pour l’ensemble du formulaire.

Avec cette disposition, le contrôle de la navigation s’effectue à 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 mises en page pour appareils mobiles sont disponibles à l’emplacement : /libs/fd/af/layouts/panel. Les mises en page pour appareils mobiles suivantes sont disponibles, par défaut, dans les formulaires adaptatifs.

Liste de mises en page pour appareils mobiles dans les formulaires adaptatifs
Liste de mises en page pour appareils mobiles dans les formulaires adaptatifs

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


Mise en page avec titres de panneau dans l’en-tête de formulaire

Cette disposition, comme son nom l’indique, affiche les titres du panneau avec la barre et le menu de navigation. Les icônes Suivant et Précédent sont également disponibles à des fins de navigation.

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

Mise en page sans titres de panneau dans l’en-tête de formulaire

Cette disposition, comme son nom l’indique, affiche uniquement le menu et la barre de navigation, sans les titres de panneau. Les icônes Suivant et Précédent sont également disponibles à des fins de navigation.

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

Mises en page de barre d’outils

La mise en page de barre d’outils détermine le positionnement et l’affichage de tout bouton d’action que vous ajoutez à vos formulaires adaptatifs. La mise en page 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 suivant : /libs/fd/af/layouts/toolbar. Les formulaires adaptatifs fournissent, par défaut, les dispositions de barre d’outils suivantes.

Mise en page par défaut pour la barre d’outils

Cette disposition est sélectionnée par défaut lorsque vous ajoutez des boutons d’action dans un formulaire adaptatif. Lorsque vous sélectionnez cette disposition, elle est affichée pour les appareils fixes (ordinateurs de bureau) et mobiles.

Vous pouvez, en outre, 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 apparaissent avant ou après le panneau.

Affichage par défaut de la barre d’outils
Affichage par défaut de la barre d’outils

Mise en page fixe mobile pour la barre d’outils

Sélectionnez cette disposition pour fournir des variantes d’affichage pour les ordinateurs de bureau et les appareils mobiles.

Dans le cas de la disposition pour ordinateur de bureau, vous pouvez ajouter des boutons d’action à l’aide de libellés spécifiques. Une seule barre d’outils peut être configurée avec cette disposition. Si plusieurs barres d’outils sont configurées avec cette disposition, elles se chevauchent dans le cas des appareils mobiles et une seule barre est visible. Il peut, par exemple, y avoir une barre d’outils dans la partie inférieure ou supérieure du formulaire ou encore avant ou après les panneaux du formulaire.

Dans le cas de la disposition pour appareils mobiles, vous pouvez ajouter des boutons d’action avec des icônes.

Disposition fixe mobile pour la barre d’outils
Disposition fixe mobile pour la barre d’outils

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne