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

  2. Dans la liste déroulante Configurer la disposition de champ, sélectionnez une disposition personnalisée, puis cliquez sur OK.

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

Effectuez les étapes suivantes pour appliquer une disposition personnalisée à tous les champs d’un formulaire :

  1. Dans le panneau Début d’un formulaire adaptatif, cliquez sur Modifier, puis sélectionnez l’onglet Définition de styles.

  2. Dans la liste déroulante Configurer la disposition de champ, sélectionnez une disposition personnalisée, puis cliquez sur OK.

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

  1. Ouvrez CRXDE Lite. L’URL par défaut est http://[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.

Telechargement

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne