Customizing Granite UI Form Field Component

In this article, I will be showing how to customize a Granite UI Field component with an example.

Use case: Customize the Granite UI Textarea field component to display the number of characters the author has entered in the field.

Granite UI already provided a range of components designed to be used in Touch UI dialogs, and in AEM these form field components are available under /libs/granite/ui/components/foundation/form/*

Every Granite UI Form field component inherits /libs/granite/ui/components/foundation/form/field component.

The Granite UI base field component is composed of three files:

field.jsp: handles the generic processing, labeling, description, and calls init.jsp and render.jsp

init.jsp: provides form value that we will need when rendering the field.

render.jsp: this is where the actual rendering of the field is performed and needs to be overridden for our custom field.

By default all the OOTB Granite UI form components uses the sling:resourceSuperType property to inherit from base field component and overrides the render.jsp.

To customize the Textarea component and show the number of characters the author has entered and recommended character count.
Step 1: overlay or override the OOTB Textarea component into /apps/<project>/<any> folder.

Step 2: modify the render.jsp file to show the recommended character count/no. of characters entered using coral UI character count api below the field.

Ref: https://docs.adobe.com/docs/en/aem/6-1/ref/coral-ui/docs/2.17.0-granite-004/character-count.html

Highlighted is the new code added to the overriden Textarea render.jsp file.

Step3: Assign the custom Textarea component to the dialog field nodes.

When the maxLength property is set on the field node its shows the assigned max length value else it shows zero.

I have assigned maxLength 20 on short description field and on long description field maxLength property is not set.

When the maximum Length has reached it displays error by highlighting the field with red border and the count goes to negative. If the MaxLength is not set then the count will be increased from zero to the number of characters entered.