Personnalisation de la disposition et de la position des messages d’erreur d’un formulaire adaptatif

Vous pouvez personnaliser la disposition et la position des messages d’erreur d’un formulaire adaptatif. Vous pouvez exécuter les personnalisations suivantes :

  • Personnaliser l’emplacement et la disposition de la légende d’un champ sans apporter de modifications aux propriétés CSS correspondantes
  • Personnalisation de la position des messages d’erreur intégrés
  • Personnalisation du contenu d’un indicateur d’aide dynamique
  • Personnaliser la position des composants de champ (légende, widget, brève description, longue description et composants d’indicateur d’aide) sans apporter de modifications aux propriétés CSS correspondantes

Personnalisation de la disposition des champs

Vous pouvez personnaliser la disposition d’un champ spécifique ou de tous les champs pour modifier la position de la légende et des messages d’erreur. Effectuez les étapes suivantes pour appliquer une disposition personnalisée à un champ :

Personnalisation de la disposition d’un champ spécifique

Effectuez les étapes suivantes pour appliquer une disposition personnalisée à un champ spécifique :

  1. Ouvrez le formulaire en mode Style. Pour ouvrir le formulaire en mode Style, écrivez dans la barre d’outils de la page canvas-drop-down > Style.

  2. Dans la barre latérale, sous Objets de formulaire, sélectionnez le champ, puis cliquez sur le bouton de modification edit-button.

  3. Sélectionnez l’état du champ que vous souhaitez personnaliser, puis spécifiez le style de cet état.

    Spécification du style intégré d’un champ

Personnalisation de la disposition de tous les champs d’un formulaire

Avec AEM Forms, vous pouvez désormais créer un thème et l’appliquer à votre formulaire. L’éditeur de thèmes vous permet de spécifier le style des composants de formulaire dans un seul et même endroit. Lorsque vous créez un thème, vous spécifiez le style au niveau du composant. Pour plus d’informations sur les thèmes, consultez la section Thèmes dans AEM Forms.

Créez un thème à l’aide de l’éditeur de thèmes pour personnaliser la mise en forme de tous les champs du formulaire. Après avoir créé un thème, effectuez les étapes suivantes pour l’appliquer à un formulaire :

  1. Ouvrez votre formulaire en mode d’édition.
  2. En mode d’édition, sélectionnez un composant, puis appuyez sur field-level > Conteneur de formulaires adaptatifs, puis appuyez sur cmppr.
  3. Dans la barre latérale, sous Thème de formulaire adaptatif, sélectionnez le thème que vous avez créé à l’aide de l’éditeur de thèmes.

Création d’une disposition de champ personnalisée

  1. Ouvrez CRXDE Lite. L’URL par défaut est https://[Server]:[Port]/crx/de.

  2. Copiez une disposition de champ du nœud /libs/fd/af/layouts/field (par exemple, defaultFieldLayout) vers le nœud /apps (par exemple, /apps/af-field-layout).

  3. Renommez le nœud copié et le fichier defaultFieldLayout.jsp. Par exemple, errorOnRight.jsp.

  4. Modifiez la valeur des propriétés qtip et jcr:description du nœud copié. Par exemple, redéfinissez la valeur des propriétés sur Erreur sur la droite

  5. Pour ajouter de nouveaux styles et un nouveau comportement, créez une bibliothèque cliente sous le nœud /etc node.

    Par exemple, créez à l’emplacement /etc/af-field-layout-clientlib le nœud client-library. Ajoutez la propriété de catégories avec la valeur af.field.errorOnRight et le fichier style.less avec le code suivant :

    .widgetErrorWrapper {

 height: 38px;
 margin: 5px;

 .guideFieldWidget{
 width: 60%;
 float: left;
 }

 .guideFieldError{
 overflow:hidden;
 width:40%;
 }

}

  6. Pour améliorer l’apparence et le comportement, incluez la bibliothèque client créée dans le fichier de dispositiion (errorOnRight.jsp).

  7. Ouvrez la boîte de dialogue de modification et sélectionnez l’onglet Style. Dans la liste déroulante Configurer la disposition de champ, sélectionnez la disposition nouvellement créée, puis cliquez sur OK.

Le package ErrorOnRight.zip contient le code permettant d’afficher les messages d’erreur du côté droit des champs.

Obtenir le fichier

Sur cette page