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, labelling, 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.

ootb-field-comp

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.

ootb-textarea-comp

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.

custom-textarea

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.

custom-render-jsp

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

custom-field-asign

dialog-char-count

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.

shortDesc

longDesc

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.

text-error

Hope this will be useful.:)

Thank you!

Madhu Samala