AEM Forms: style personnalisé pour le composant AEM Forms

Le produit AEM Forms est fourni avec de nombreux composants d'interface utilisateur prêts à l'emploi (OOTB) qui vous permettent de créer des formulaires significatifs pour votre entreprise; les formulaires peuvent être utilisés pour collecter des données, telles que des applications, des enquêtes et des autorisations de consentement. Mais, ces composants de formulaire d'interface utilisateur OOTB sont fournis avec un style d'interface utilisateur par défaut. Lorsque nous intégrons AEM Forms dans un site Web, les composants de formulaire OOTB s'adaptent au style des sites Web à l'aide des thèmes. Dans certains cas d'utilisation commerciale, les thèmes ne répondront pas aux exigences. Donc, dans ces cas d’utilisation, nous devons utiliser le style personnalisé pour les composants individuels.

Dans ce blog, je vais souligner à quel point il est facile de personnaliser le style de l’interface utilisateur des composants OOTB. Pour illustrer cela, je vais utiliser le composant Table et champ de texte AEM Forms. Le style d'interface utilisateur par défaut d'un composant de champ de texte est d'afficher la bordure autour du champ de texte comme illustré ci-dessous image:

Fig: Bordure autour de la zone de texte

Mais, lorsque nous utilisons le tableau intérieur de ce champ de texte , les bordures sont masquées par défaut. Veuillez voir l'image ci-dessous où la bordure autour du champ de texte est masquée:

Fig: Bordure autour des cellules du tableau

AEM Forms permet de modifier le style des composants via le panneau des propriétés de style de l'interface utilisateur . Lorsque les propriétés OOTB ne donnent pas d'options pour répondre aux exigences de votre interface utilisateur, nous pouvons ajouter un CSS personnalisé et le référencer dans le panneau des propriétés de style de l'interface utilisateur.

Comment ajouter un CSS personnalisé

Dans la base de code de mon application AEM, ajoutez un code personnalisé CSS et ajoutez-le aux bibliothèques client via le fichier css.txt. Ci-dessous, l'image de mon fichier css personnalisé appelé tableBorderTextbox.css:

Contenu pour tous

Les entreprises qui peuvent répondre rapidement et systématiquement aux demandes des consommateurs prospèrent à l'ère du contenu infini . Découvrez comment créer des expériences fluides pour vos clients omnicanaux.

Obtenir le guide

Remarque: Il est important de noter ici le chemin du sélecteur CSS. Le nom de la classe personnalisée customTableCellTextBox suivi d'un élément de corps de table tbody et enfin de la classe guideFieldWidget.textField. Ce style css spécifique aura un impact uniquement sur le champ de texte à l'intérieur d'une cellule de tableau où il a un nom de classe customTableCellTextBox.

Comment trouver la classe CSS des composants OOTB AEM Forms

Un moyen rapide et facile de trouver la classe CSS d'un composant OOTB AEM Form consiste à utiliser les outils de développement du navigateur. En utilisant l'inspecteur d'élément DOM, nous pouvons sélectionner le champ de texte à l'intérieur de la cellule du tableau comme indiqué dans l'image ci-dessous:

Fig: Inspecting DOM Element.

Pour plus de styles de widgets OOTB AEM Forms classes refer: Constructions de style pour les formes adaptatives | Adobe Experience Manager

Intégration d'une classe CSS personnalisée aux composants AEM Forms

L'étape suivante consiste à lier le nom de classe personnalisé customTableCellTextBox à la table. Comme je l'ai expliqué ci-dessus, le chemin du sélecteur est important. Dans ce cas, mon chemin traverse le nom de la classe personnalisée suivi du corps de la table, puis du champ de texte. Donc, je dois appliquer le CSS personnalisé au style de tableau.

En utilisant le mode d'édition dans la barre d'outils de la page, vous pouvez passer en mode d'édition comme indiqué dans l'image ci-dessous. Sélectionnez le composant de table et cliquez sur le bouton Modifier. Il apportera le panneau des propriétés de style comme indiqué dans l'image ci-dessous:

Fig: champ de classe CSS pour le composant de table.

Dans le champ Classe CSS, ajoutez la classe personnalisée et enregistrez changements. Maintenant, votre tableau ressemblera à l'image ci-dessous:

Ensuite, la question suivante est: que se passe-t-il si je dois personnaliser plus d'éléments d'interface utilisateur dans le même tableau? Nous avons déjà utilisé la classe CSS liée à un chemin de sélecteur. En utilisant la même logique de chemin de sélecteur, vous pouvez ajouter des styles personnalisés supplémentaires, par exemple

customTableCellTextBox tbody guideFieldWidget.

J'espère que vous avez trouvé ces conseils et astuces pour le style personnalisé avec AEM Forms utiles. Si vous avez des questions supplémentaires, veuillez poster vos questions et commentaires. N'hésitez pas à consulter d'autres conseils utiles sur Adobe en en consultant nos blogs .