Mettre en forme des éléments pour les formulaires adaptatifs styling-constructs-for-adaptive-forms

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.

Prérequis prerequisites

Connaissances en matière de CSS et structure LESS.

Éléments personnalisables what-can-be-customized

Cet article répertorie les classes CSS de formulaires adaptatifs accessibles au public. Vous pouvez les utiliser pour appliquer un style aux divers composants d’un formulaire adaptatif. La définition de style des composants de création, tels que les boîtes de dialogue et les barres d’état qui affichent des avertissements, ne rentre pas dans le cadre de cet article. Utilisez ces mises en forme des éléments pour créer des styles (en utilisant CSS ou LESS) uniquement lorsque vous ne pouvez pas appliquer un style aux composants à l’aide de l’éditeur de thème.

Personnalisation des styles dans les formulaires adaptatifs customizing-styles-in-adaptive-forms

Le cadre LESS simplifie le cas d’utilisation permettant de personnaliser les styles dans les formulaires adaptatifs. La structure vous permet de définir des styles à l’aide d’un ensemble de variables et de fonctions (mixins). La structure LESS aide à réduire la taille du code imbriqué et augmente sa réemployabilité.

Vous pouvez personnaliser les styles des formulaires adaptatifs des manières suivantes :

Modification du thème changing-theme

Vous pouvez modifier le thème d’un formulaire adaptatif pour vous assurer que son apparence est cohérente avec les pages web auxquelles le formulaire adaptatif est intégré.

Les modifications de l’aspect général du formulaire adaptatif via les propriétés CSS font généralement partie des modifications du thème. Les principales modifications de la convivialité du formulaire adaptatif, telles que les modifications de disposition et le positionnement des composants, ne sont pas considérées comme des modifications du thème.

Selon l’amorçage, l’ensemble suivant de propriétés CSS définit le thème d’une page web :

Actuellement, les variables LESS sont définies uniquement pour ces propriétés des différents éléments d’un formulaire adaptatif.

Modification du style de composant changing-component-style

Vous pouvez modifier l’apparence, la disposition, le positionnement et la visibilité des éléments. Pour réaliser cette tâche, créez ou mettez à jour vos fichiers .css personnalisés pour inclure les mises en forme répertoriées dans cet article.

Pour appliquer un style à un formulaire adaptatif, ouvrez le formulaire adaptatif pour l’édition, ouvrez les propriétés du conteneur de formulaires adaptatifs et spécifiez le chemin du fichier CSS personnalisé dans l’onglet de base. Mises en forme par défaut du formulaire adaptatif remplacé par les mises en forme répertoriées dans le fichier .css personnalisé.

Composants components

Les composants décrits dans cet article ont leurs classes CSS prédéfinies. Vous pouvez modifier les variables pour modifier les styles dans les classes CSS. Sinon, vous pouvez réécrire la classe entière. Cette section décrit les classes dans les composants et les styles que vous pouvez modifier à l’aide de variables.

Définition de style du conteneur container-styling

Un conteneur est le composant de niveau supérieur. D’autres panneaux et champs se trouvent sous le composant de conteneur.

Définition de style du champ field-styling

Les formulaires adaptatifs incluent divers types de champs. Chaque champ a un nom de classe unique, qui est le nom du champ. Le champ possède également un nom de classe commun guideFieldNode.

Les champs incluent des libellés, des widgets, des descriptions d’aide (descriptions longues et courtes), ainsi que des icônes d’aide de champ (point d’interrogation).

Définition de style de libellé label-styling

L’élément HTML label utilisé pour le champ inclut les classes left ou top selon que le libellé se trouve en haut ou à gauche.

Les règles CSS pour le libellé sont appliquées à l’aide de la classe guideFieldLabel. Si vous êtes un auteur, remplacez cette règle pour que vos modifications personnalisées soient visibles.

Définition de style des widgets widgets-styling

Selon leur type, les widgets contiennent également des classes. En règle générale, les widgets incluent la classe guideFieldWidget. Les widgets fournis avec HTML utilisent normalement les éléments HTML standard input et select. La définition de style s’effectue en conséquence. Vous ne pouvez pas modifier le style d’un widget personnalisé en modifiant les variables.

Restrictions de la définition de style de widget limitations-in-widget-styling

La définition du style des champs ciblés, obligatoires et désactivés est limitée à l’aide de variables. Vous pouvez toutefois modifier le style en remplaçant les styles. La restriction à l’aide de variables est fournie principalement pour garder un œil sur le nombre de variables. La restriction peut être relâchée si l’aspect d’un champ change considérablement car il est dans l’un des états décrits précédemment.

Description d’aide help-description

Un auteur peut spécifier le contenu d’aide dans les champs à l’aide de composants de descriptions longue et courte. Les deux composants ont une classe commune .guideHelpDescription et une autre classe .short/.long, en fonction du type de description. Le contenu d’aide est intégré dans un élément de paragraphe pour remplacer la définition de style de la description. La description d’aide (longue et courte) est modifiée à l’aide de variables commençant par widgetshelp, comme indiqué dans le tableau suivant :

Termes et conditions terms-and-conditions

Le widget des termes et conditions (TnC ) vous permet de spécifier les termes et conditions. Vous pouvez personnaliser le widget à l’aide des variables décrites dans le tableau suivant.

Bouton button

Les boutons sont également des widgets. Toutefois, leur définition de style est légèrement différente des widgets. Dans les formulaires adaptatifs, n’importe lequel des éléments suivants constitue un bouton :

Code HTML du bouton :

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Point d’interrogation question-mark

Pour les widgets, un point d’interrogation est affiché lorsque l’auteur ou l’autrice ajoute une description longue dans le contenu d’aide. L’icône par défaut fournie dans l’amorçage est utilisée. Pour utiliser une icône personnalisée, vous pouvez personnaliser les icônes de l’amorçage.

Tableau table

Vous pouvez modifier le thème de couleur de l’en-tête et des rangées de contenu d’un tableau en utilisant les variables suivantes.

Pièce jointe file-attachment

Le widget de pièce jointe des formulaires adaptatifs vous permet de charger des fichiers. Vous pouvez également personnaliser le widget à l’aide des variables.

Styles de navigateur navigator-styles

Il existe quatre types d’onglets de navigateur. Il s’agit des onglets sur la gauche, en haut, de l’assistant et en accordéon. Chaque navigateur possède une classe différente.

Voici le code HTML pour l’élément de navigateur d’onglet (similaire aux onglets d’amorçage) :

<li>

<a>tab title</a>

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></code>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

Vous pouvez modifier la définition de style du navigateur à l’aide des règles CSS qui sélectionnent les éléments à l’aide de sélecteurs descendants. Par exemple, pour ajouter un style de décoration de texte à la balise d’ancrage :

Navigateur d’onglets en haut :

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

En outre, il existe des classes pour définir le style des navigateurs d’onglets (gauche et haut) en fonction de la présence de navigateurs imbriqués ou enfants ou de sous-navigateurs.

La classe guideNavIcon fournit une icône par défaut aux navigateurs d’onglets (gauche et haut) et aux navigateurs de l’assistant.

Définition de style du panneau panel-styling

Un panneau comporte une barre d’outils facultative et son contenu.

Le nœud du panneau est divisé en navigateurs et contenu. Il ``n’y a pas de composant de définition du style séparé pour le contenu. Les variables décrites sont appliquées sur le navigateur et sur le contenu.

Le panneau supérieur (RootPanel) ne dispose pas de cette classe.

Styles mobiles mobile-styling

Barre d’en-tête header-bar

Ces variables influent sur la barre d’en-tête visible sur un appareil mobile ou équipé qui contient un titre de panneau et les navigateurs Suivant et Précédent.

Indicateur de défilement scroll-indicator

Ces variables influent sur l’indicateur de défilement, qui est une flèche orange qui s’affiche sur un appareil mobile ou équipé d’un petit écran. Un indicateur de défilement indique la présence de contenu au-delà de la partie visible à l’écran. Vous pouvez faire défiler l’écran pour l’afficher. Lorsque vous atteignez la fin du contenu, la flèche disparaît.

Variables spécifiques à la disposition de la barre d’outils fixe pour mobile mobile-fixed-toolbar-layout-specific-variables

Ces variables dans le tableau suivant influent sur la disposition de la barre d’outils fixe pour mobile.

Variable spécifique au thème theme-specific-variable

Le thème Simple enrollment (inscription simple) dans /etc/clientlibs/fd/af/guidetheme/simpleEnrollment et la catégorie guide.theme.simpleEnrollment introduisent également quelques variables. Si vous souhaitez créer un thème qui améliore l’inscription simple, vous pouvez utiliser les variables supplémentaires suivantes :