Customize layout and positioning of error messages of an adaptive form customize-layout-and-positioning-of-error-messages-of-an-adaptive-form

CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

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 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 customize-layout-of-a-single-field

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

  1. Open the form in Style mode. To open the form in style mode, in the page toolbar tap canvas-drop-down > Style.

  2. In the sidebar, under Form Objects, select the field and tap the edit button edit-button .

  3. Select the state of the field you want to customize, and specify the styling for that state.

    Specifying inline styling of a field

Customize layout of all the fields of a form customize-layout-of-all-the-fields-of-a-form

With AEM Forms, you can now create a theme and apply it to your form. Theme editor lets you specify styling of form components in one place. When you create a theme, you specify styling at a component level. For more information on themes, see Themes in AEM Forms.

Create a theme using Theme Editor to customize layout of all fields in your form. After you create a theme, perform the following steps to apply it to a form:

  1. Open your form in edit mode.
  2. In the edit mode, select a component, then tap field-level > Adaptive Form Container, and then tap cmppr .
  3. In the sidebar, under Adaptive Form Theme, select the theme you have created using the Theme Editor.

Create a custom field layout create-a-custom-field-layout

  1. Open CRXDE lite. The default URL is https://[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:

    code language-css
    
    .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.

The ErrorOnRight.zip package contains code to show error messages on the right side of fields.

Get File

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da