Composant Separator dans les formulaires adaptatifs

Adobe recommande d’utiliser la capture de données moderne et extensible. Composants principaux pour création d’un Forms adaptatif ou Ajout de Forms adaptatif à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de Forms adaptatif, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit une approche plus ancienne de la création de Forms adaptatif à l’aide de composants de base.

Vous pouvez utiliser le composant séparateur pour isoler visuellement les panneaux d’un formulaire. Vous pouvez définir l’aspect global et le style d’un composant Separator en spécifiant les propriétés suivantes du composant :

• Nom de l’élément : Indique le nom du composant. Les expressions SOM s’adressent au composant avec une valeur spécifiée dans le champ Nom de l’élément .

• Épaisseur : indique l’épaisseur en pixels du composant séparateur.

• Classe CSS : spécifie la classe CSS personnalisée pour le composant séparateur

• Styles en ligne : avec AEM Forms, vous pouvez désormais appliquer des styles CSS en ligne à chaque composant de formulaire adaptatif et prévisualiser les modifications en temps réel.

Vous pouvez utiliser le mode Mise en page pour définir le nombre de colonnes sur lequel s’étend le composant séparateur. Pour plus d’informations, voir Utilisation du mode Mise en page pour redimensionner les composants.

Pour spécifier les propriétés d’un composant de séparateur :

1. Sélectionnez un composant séparateur et appuyez sur . Les propriétés s’ouvrent dans la barre latérale.
2. Cliquez sur un onglet dans la section Propriétés CSS intégrées afin de spécifier les propriétés CSS. Par exemple : a. Dans l’onglet Champ, cliquez sur Ajouter un élément. Une ligne avec deux champs est ajoutée.
3. Dans le premier champ de gauche, spécifiez une propriété CSS3 à appliquer. Par exemple : border. Vous pouvez également sélectionner une propriété en cliquant sur la flèche vers le bas. La liste déroulante n’est pas exhaustive et vous pouvez spécifier n’importe quel nom de propriété CSS3 prise en charge dans ce champ.
4. Dans le champ adjacent, spécifiez une valeur valide pour la propriété CSS3 spécifiée. Par exemple : Noir solide 3 px.
5. Cliquez sur Ajouter un élément pour définir une autre propriété et sa valeur.
6. Cliquez sur Aperçu vous pouvez ainsi prévisualiser les modifications dans le formulaire.
7. Cliquez sur OK si vous souhaitez confirmer les modifications ou Annuler pour quitter la boîte de dialogue sans modification.