Creating a Granite/Coral Multi field HTL component for Adobe Experience Manager

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that uses a Granite/Coral multi-field. That is, you can use a Granite/Coral multi-field data type to build a dialog that lets an author enter information into a multi-field control in the component's dialog, as shown in this illustration.


A Granite multi-field is based on granite/ui/components/foundation/form/multifield. To learn how to work with a Granite multi-field, see https://aem4beginner.blogspot.com/2020/04/creating-aem-html-template-language-63.html.

A Granite/Coral multi-field is based on granite/ui/components/coral/foundation/form/multifield. There are several advantages to working with Granite/Coral multi-field. For one thing, you do not need to write a JS script or use the ACS-Commons package.

However, there are also some differences too. One important difference to understand is how the data is stored in the JCR. By default, Granite/Coral multi-field data is stored as child nodes, as shown in the illustration. Notice that each multi-field is a separate node, as shown here.


This changes the way you read the multi-field data when using Java business logic. In this example, item0 represents the first multi-field and item1 represents the second field. The properties of these nodes represent the values that the author entered into the dialog.

You can develop Java business logic in a WCMUsePojo class to read the dialog values and then display the data in the HTL component. This is covered in this development article.

To read this development article, click https://helpx.adobe.com/experience-manager/using/multifield_coral_aem63.html.