Fonctions de mise en page des formulaires adaptatifs

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

Types de mise en page

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 appareil 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 /libs/fd/af/layouts suivant :

Pour modifier la disposition d’un formulaire adaptatif, utilisez le mode Création dans Experience Manager.

Mise en page du panneau

L’auteur 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. Appuyez sur le panneau et sélectionnez pour afficher les propriétés du panneau.

Réactif – Tout sur une page sans navigation

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 permet de placer plusieurs composants Panneau de formulaire adaptatif l’un après l’autre dans le panneau.

Assistant

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 Panneau de formulaire adaptatif 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)

Accordéon

Cette disposition permet de placer le composant Panneau de formulaire adaptatif 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.

Disposition avec onglets – Les onglets s’affichent à gauche

Cette disposition 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.

Onglets affichés à gauche d’un panneau

Mises en page avec onglets – Les onglets s’affichent en haut

Cette disposition permet de placer le composant Panneau de formulaire adaptatif dans un panneau avec une navigation à onglets. Les onglets sont placés au-dessus du contenu du 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 disposition 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 dispositions pour appareils mobiles sont disponibles à l’emplacement /libs/fd/af/layouts/mobile/. Les dispositions pour appareils mobiles ci-dessous sont disponibles par défaut dans les formulaires adaptatifs.

Sélectionnez l’option Ajouter des éléments du menu Disposition réactive pour les appareils mobiles pour afficher les options de navigation disponibles pour un panneau dans la disposition pour appareils mobiles. Les options de navigation ne sont visibles que si vous sélectionnez la disposition Réactive pour un panneau.

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 .

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.

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

Ressources Business.Adobe.com