Utilisation du mode Mise en page pour redimensionner les composants d’Adaptive Forms use-layout-mode-to-resize-components
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.
L’interface de création de formulaires adaptatifs vous permet de redimensionner des composants en mode Mise en page. Faites glisser les points bleus dans les colonnes pour définir les points de départ et de fin afin de positionner les composants. Les points bleus s’affichent après avoir appuyé sur le composant dans la grille réactive. La grille réactive est composée de 12 colonnes égales. L’ombrage blanc et bleu différencie une colonne d’une l’autre.
Vous pouvez utiliser le mode Mise en page afin de redimensionner les composants pour tous les types d’appareils tels que les ordinateurs de bureau, les tablettes, les smartphones et d’autres appareils plus petits. La tablette dérive automatiquement la configuration de la disposition de la version de bureau. Les appareils plus petits dérivent la configuration de la disposition du téléphone. Vous pouvez toutefois remplacer les configurations dérivées automatiquement pour définir une configuration différente pour chaque type d’appareil.
Accès au mode Mise en page access-layout-mode
Sélectionnez Mise en page dans la liste déroulante qui s’affiche en haut de l’interface de création de formulaires adaptatifs à côté de l’option Prévisualiser. Le formulaire s’affiche en mode Mise en page.
-
Connectez-vous à l’instance d’auteur Adobe Experience Manager et accédez à Adobe Experience Manager > Formulaires > Formulaires et documents.
-
Créez un formulaire ou ouvrez un formulaire adaptatif existant.
-
Sélectionnez Mise en page dans la liste déroulante qui s’affiche en haut à côté de l’option Prévisualiser. Le formulaire s’affiche en mode Mise en page.
Redimensionnement des composants resize-components
-
En mode Disposition, sélectionnez le composant à redimensionner. Les points bleus s’affichent au début et à la fin de la grille réactive.
-
Faites glisser les points bleus pour définir la position du composant dans la grille réactive.
La barre d’outils qui s’affiche après avoir appuyé sur des composants comprend les options suivantes :
- Parent : permet de sélectionner le parent d’un composant.
- Rétablir la disposition des points d’arrêt : permet d’annuler toutes les modifications de redimensionnement et d’appliquer la disposition par défaut au composant.
- Flotter vers la nouvelle ligne : permet de placer le composant sur la ligne suivante s’il existe plusieurs composants dans une même ligne.
Vous pouvez également utiliser l’option Rétablir la disposition du point d’arrêt (
note note NOTE Vous ne pouvez pas redimensionner les composants de colonne de tableau, de barre d’outils, de bouton de barre d’outils et de zone cible à l’aide du mode Mise en page. Utilisez le mode Style pour redimensionner ces composants.
Exemple example
Objectif : vous souhaitez insérer un composant de tableau ainsi qu’un composant d’image et les positionner en parallèle dans un formulaire adaptatif.
-
Insérez les composants de tableau et d’image en utilisant le mode Édition dans le formulaire adaptatif. Le composant d’image s’affiche après le composant de tableau.
-
Passez en mode Disposition et sélectionnez le composant Tableau. Les points bleus pour redimensionner le composant s’affichent aux colonnes 1 et 12.
-
Faites glisser le point bleu de la colonne 12 vers la colonne 6 de la grille réactive.
-
De même, sélectionnez le composant Image et faites glisser le point bleu de la colonne 1 vers la colonne 7 de la grille réactive. Les composants de tableau et d’image s’affichent en parallèle.
Vous pouvez sélectionner le composant Image et sélectionner l’option Flotter sur une nouvelle ligne disponible dans la barre d’outils afin de décaler le composant Image vers la ligne suivante.
Redimensionnement des panneaux resize-panels-layout-mode
Si vous souhaitez redimensionner l’ensemble du panneau au lieu de composants distincts, procédez comme suit :
-
Sélectionnez n’importe quel composant situé dans le panneau que vous souhaitez redimensionner, sélectionnez
Les points bleus s’affichent au début et à la fin de la grille réactive.
-
Faites glisser les points bleus pour définir la position du panneau dans la grille réactive.
Vous pouvez répéter les étapes 1 et 2 et sélectionner
Définition de la disposition à plusieurs colonnes d’un panneau
Pour définir le nombre de colonnes d’un panneau, procédez comme suit :
-
En mode Édition, sélectionnez le panneau, sélectionnez
-
Sélectionnez
-
En mode Disposition, sélectionnez n’importe quel composant du panneau, sélectionnez
-
Sélectionnez
Activation de la nouvelle grille réactive pour les anciennes dispositions réactives enableresponsivegrid
Activez la nouvelle grille réactive pour les formulaires que vous créez à l’aide de la version Adobe Experience Manager Forms 6.4 ou d’une version antérieure pour redimensionner les composants.
Pour activer la nouvelle grille réactive, procédez comme suit :
- Sélectionnez Mise en page dans la liste déroulante qui s’affiche en haut à côté de l’option Prévisualiser. Une confirmation s’affiche pour activer le mode Mise en page.
- Sélectionnez Oui pour activer le mode Disposition pour le formulaire.
Incorporation d’un ancien fragment dans un formulaire adaptatif avec une nouvelle disposition réactive embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
La nouvelle disposition réactive du formulaire adaptatif permet d’ajouter au formulaire un fragment de formulaire adaptatif avec l’ancienne disposition réactive. La nouvelle disposition ignore toutefois les propriétés de disposition déjà définies pour les composants utilisés dans le fragment. Vous pouvez passer en mode Mise en page pour définir les propriétés de disposition des composants utilisés dans le fragment.
Incorporation d’un fragment avec une nouvelle disposition réactive dans un ancien formulaire adaptatif embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
Si vous incorporez un fragment avec la nouvelle disposition réactive dans un formulaire adaptatif avec une ancienne disposition réactive, le système vous invite à activer le mode Mise en page du formulaire et à réincorporer le fragment.
Pour activer le mode Disposition, sélectionnez Disposition dans la liste déroulante qui s’affiche en haut à côté de l’option Prévisualiser et appuyez sur Oui pour confirmer. Sélectionnez le mode Édition pour réincorporer le fragment.
Désactivation du mode Mise en page pour les formulaires avec une ancienne disposition réactive disable-layout-mode-for-forms-with-old-responsive-layout
Vous pouvez désactiver le mode Mise en page pour les formulaires avec une ancienne disposition réactive en modifiant les propriétés du modèle utilisé dans le formulaire.
Pour désactiver le mode Mise en page, procédez comme suit :
-
Sélectionnez Outils > Général > Modèles et ouvrez le modèle utilisé dans le formulaire en mode Édition.
-
Sélectionnez le conteneur de formulaires dans le volet de gauche et sélectionnez Stratégie.
-
Sélectionnez l’onglet Paramètres de disposition puis sélectionnez Désactiver le mode Disposition.
-
Sélectionnez
Voir également see-also
- Créer un formulaire adaptatif AEM
- Ajouter un formulaire adaptatif AEM à une page AEM Sites
- Appliquer des thèmes à un formulaire adaptatif AEM
- Ajouter des composants à un formulaire adaptatif AEM
- Utiliser reCAPTCHA dans un formulaire adaptatif AEM
- Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
- Traduire un formulaire adaptatif AEM
- Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
- Connecter un formulaire adaptatif à Microsoft SharePoint
- Connecter un formulaire adaptatif à Microsoft Power Automate
- Connecter un formulaire adaptatif à Microsoft OneDrive
- Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
- Connecter un formulaire adaptatif à Salesforce
- Utiliser Adobe Sign dans un formulaire adaptatif AEM
- Ajouter un nouveau paramètre régional pour un formulaire adaptatif
- Envoyer des données de formulaire adaptatif à une base de données
- Envoyer des données de formulaire adaptatif à un point d’entrée REST
- Envoyer des données de formulaire adaptatif à un workflow AEM
- Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM
- Ajouter des contrôles de version, des commentaires et des annotations à un formulaire adaptatif
- Comparer des formulaires adaptatifs