Home Blog 2016 Adobe Experience Manager: Useful Tips to Customize AEM Dialog Fields

Adobe Experience Manager: Useful Tips to Customize AEM Dialog Fields

Customize AEM Dialog Fields

User interface customization is an important part of any project and AEM 6.1 has many extension points for this. In this blog post, I will describe how to customize Touch UI Dialog fields in AEM 6.1. There are multiple out of the box properties available to add to touch UI dialog, but sometimes it is not enough. There are a lot of posts on how to customize Classic UI dialogs, but Touch UI requires different customization.

I will walk you through the process of customizing Touch UI dialog using a Color Picker dialog example.

Color Picker dialog

To build this dialog, create a new custom field (I named it ‘colorpicker’), and inherit it from ‘granite/ui/components/foundation/form/field’. Then, create local clientlib and override ‘render.jsp’.

Color picker in AEM file structure

In render.jsp define the necessary properties to configure the dialog and bind them with clientlib.

AEM render.jsp

After that, create a new component and set resourceType of field ‘color’ as ‘training/components/colorpicker’

AEM components screenshot

Then, create .html to display the color value. Now we can finally choose a color with our custom color picker and visualize the result.

Color picker in AEM
The selected color in aem color picker

But what if you need to synchronize other field values with the custom field you have created, (e.g. force ‘color value’ field to have the same value as ‘color’)?

AEM color picker custom field

To accomplish this, create a new field, called ‘color value’,inherit it from textfield (granite/ui/components/foundation/form/textfield), and configure ‘granite:class’ value in both ‘colorvalue’ and ‘color’ fields.

In the ‘color’ field configure ‘granite:class’ value for binding.

AEM file structure: granite:class
AEM file structure: granite:class

And bind them by creating ‘granite:data’ node under ‘color’ field.

granite:data node

You can compare values in granite:data and ‘granite:class’ properties to understand what values and property names should be there.


Arseni Vorhan
  • Arseni Vorhan
  • Certified AEM Developer