You can customize layout and positioning of the error messages of an adaptive form. You can perform the following customizations:

  • Customize location and layout of the caption of a field without making any change to the corresponding CSS properties
  • Customize position of inline error messages
  • Customize content of dynamic help indicator
  • Customize position of the field components (caption, widget, short description, long description, and help indicator components) without making any change to the corresponding CSS properties

Customize layout of fields

You can customize the layout of a single field or of all the fields to change the position of caption and error messages. Perform the following steps to apply a custom layout to a field:

Customize layout of a single field

Perform the following steps to apply a custom layout to a single field:

  1. On the edit dialog of the field,

  2. In the Configure Field Layout drop-down box, select a custom layout, and click OK.

Customize layout of all the fields of a form

Perform the following steps to apply a custom layout to all the fields of a form:

  1. On the Start of an Adaptive Form panel, click Edit, and select the Styling tab.  

  2. In the Configure Field Layout drop-down box, select a custom layout, and click OK.

Create a custom field layout

  1. Open CRXDE lite. The default URL is http://[Server]:[Port]/crx/de.

  2. Copy a field layout from the /libs/fd/af/layouts/field node (For example, defaultFieldLayout) to the /apps node (For example, /apps/af-field-layout).

  3. Rename the copied node and the defaultFieldLayout.jsp file. For example, errorOnRight.jsp.

  4. Change value of the qtip and jcr:description properties of the copied node. For example, change the value of the properties to Error On Right

  5. To add new styles and behavior, create a client library in the /etc node.

    For example, at the location /etc/af-field-layout-clientlib, create the node client-library. Add the categories property with value af.field.errorOnRight and style.less file with following code:

    .widgetErrorWrapper {
    	
    	height: 38px;
    	margin: 5px;
    
    	.guideFieldWidget{
    	width: 60%;
    	float: left;	
    	}
    
    	.guideFieldError{
    	overflow:hidden;
    	width:40%;	
    	}
    
    }
    
    
  6. To enhance the appearance and behavior, include the client library created in the layout file (errorOnRight.jsp).

  7. Open the edit dialog of the field select the Styling tab. In the Configure Field Layout drop-down box, select the newly created layout, and click OK.

Download

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy