Utilisation du mode Mise en page pour redimensionner des composants

L’interface de création de formulaires adaptatifs vous permet de redimensionner les composants à l’aide du mode Mise en page . Faites glisser des points bleus dans les colonnes pour définir les points de début et de fin pour 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

Sélectionnez Mise en page dans la liste déroulante qui s’affiche en haut de l’interface de création de formulaire adaptatif en regard de l’option Aperçu . Le formulaire s’affiche en mode Mise en page.

  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager > Formulaires > Formulaires et documents.

  2. Créez un formulaire adaptatif existant ou ouvrez-le.

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

    Mode Mise en page

Redimensionner les composants

  1. En mode Mise en page, appuyez sur le composant pour le redimensionner. Les points bleus s’affichent au début et à la fin de la grille réactive.

  2. Faites glisser les points bleus pour définir la position du composant dans la grille réactive.

    Redimensionnement en mode Mise en page

    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 (Rétablir le point d’arrêt) au niveau du panneau pour annuler toutes les modifications de redimensionnement.

    REMARQUE

    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

Objectif : vous souhaitez insérer un composant de tableau et un composant Image et les placer l’un parallèlement à l’autre dans un formulaire adaptatif.

  1. Insérez les composants de tableau et d’image à l’aide du mode d’édition dans le formulaire adaptatif. Le composant d’image s’affiche après le composant de tableau.

  2. Passez en mode Mise en page et appuyez sur le composant Tableau. Les points bleus pour redimensionner le composant s’affichent aux colonnes 1 et 12.

  3. Faites glisser le point bleu de la colonne 12 vers la colonne 6 de la grille réactive.

    Définition du point de fin du tableau

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

    Tableau et image en parallèle en mode Mise en page

    Vous pouvez sélectionner le composant d’image et appuyer sur l’option Flotter jusqu’à la nouvelle ligne disponible dans la barre d’outils pour déplacer le composant d’image vers la ligne suivante.

Redimensionnement des panneaux

Effectuez les étapes suivantes si vous souhaitez redimensionner l’ensemble du panneau au lieu de composants distincts :

  1. Appuyez sur l’un des composants du panneau à redimensionner, sélectionnez Sélectionner le parent, puis la première option dans la liste déroulante, si le panneau est le parent immédiat du composant.

    Les points bleus s’affichent au début et à la fin de la grille réactive.

  2. 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 Sélectionner le parent pour déplacer le panneau redimensionné vers la ligne suivante.

Définition d’une mise en page à plusieurs colonnes pour un panneau

Pour définir le nombre de colonnes d’un panneau, procédez comme suit :

  1. En mode Édition, appuyez sur le panneau, sélectionnez Configurer, puis Réactif - tout sur la page sans navigation dans la liste déroulante Disposition du panneau.

  2. Appuyez sur Enregistrer pour enregistrer les propriétés.

  3. En mode Mise en page, appuyez sur l’un des composants du panneau, sélectionnez Sélectionner le parent, puis le panneau.

  4. Appuyez sur plusieurs colonnes et sélectionnez le nombre de colonnes dans la liste déroulante. Le nombre de colonnes peut être compris entre 1 et 12. Le panneau est divisé en une mise en page à plusieurs colonnes.

plusieurs colonnes en mode de mise en page

Activation de la nouvelle grille réactive pour les anciennes dispositions réactives

Activez la nouvelle grille réactive pour les formulaires que vous créez à l’aide d’AEM Forms 6.4 ou d’une version inférieure pour redimensionner les composants.

REMARQUE

Le passage à la nouvelle grille réactive ignore les propriétés de disposition déjà définies pour les composants utilisés dans le formulaire.

Pour activer la nouvelle grille réactive, procédez comme suit :

  1. 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.
  2. Appuyez sur Oui pour activer le mode Mise en page pour le formulaire.

Incorporation d’un ancien fragment dans un formulaire adaptatif avec une nouvelle disposition réactive

La nouvelle disposition réactive du formulaire adaptatif vous 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.

Incorporer un fragment avec une nouvelle mise en page réactive dans un ancien formulaire adaptatif

Si vous incorporez un fragment avec la nouvelle mise en page réactive dans un formulaire adaptatif avec une ancienne mise en page réactive, le système vous invite à activer le mode Mise en page pour le formulaire et à réincorporer le fragment.

Pour activer le mode Mise en page, sélectionnez Mise en page 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

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 :

  1. Sélectionnez Outils > Général > Modèles et ouvrez le modèle utilisé dans le formulaire en mode Édition.

  2. Sélectionnez le conteneur de documents dans le volet de gauche et appuyez sur Stratégie.

    Désactivation du mode Mise en page

  3. Appuyez sur l’onglet Paramètres de mise en page et sélectionnez Désactiver le mode Mise en page.

  4. Appuyez sur Enregistrer pour enregistrer les propriétés.

Sur cette page