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

Customizing Touch AEM Dialog Fields

User interface customization is an essential part of any project, and AEM 6.1 has many extension points for this. This blog post will describe how to customize Touch UI Dialog fields in AEM 6.1. Multiple out-of-the-box properties are available for adding touch UI dialogs, 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 the 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 a local clientlib and override ‘render.jsp’.

Color picker in AEM file structure

In the render.jsp script, define the necessary properties to configure the dialogs 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. 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