Personnalisation de la disposition et de la position des messages d’erreur d’un formulaire adaptatif customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

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

  • Personnalisation de l’emplacement et de 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
  • Personnalisation de 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 customize-layout-of-fields

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.

Pour appliquer une disposition personnalisée à un champ, procédez comme suit :

Personnalisation de la disposition d’un champ spécifique customize-layout-of-a-single-field

  1. Ouvrez le formulaire en mode Style. Pour ouvrir le formulaire en mode Style, dans la barre d’outils de la page, sélectionnez liste déroulante canevas > Style.

  2. Dans la barre latérale, sous Objets de formulaire, sélectionnez le champ et cliquez sur le bouton Modifier 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 customize-layout-of-all-the-fields-of-a-form

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 disposition 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 sélectionnez champ-level > Conteneur de formulaires adaptatifs, puis sélectionnez 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 create-a-custom-field-layout

  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.

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

    code language-css
    .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 cliente créée dans le fichier de dispositiion (errorOnRight.jsp).

  7. Ouvrez la boîte de dialogue de modification du champ 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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2