Friday, 11 August 2017

Creating an AEM HTML Template Language 6.3 component that uses a Multifield

You can create an Adobe Experience Manager (AEM) 6.3 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Language (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.

NOTE:  This article uses the Granite Multi-field (granite/ui/components/foundation/form/multifield). To learn how to use the Coral multi-field (granite/ui/components/coral/foundation/form/multifield), see Creating a Coral 3 Multifield HTML Template Language component for Adobe Experience Manager.

To read this Adobe Experience Manager 6.3 development article, click

Added an new package for AEM 6.3 that included a RTE

Based on community feedback - such as, we added a separate package that contains a RTE in the Multifield. It works - see: 

This is the JCR node structure now:

Notice that the RTE data is stored as JSON data under the page: 

You can see this by installing the second package that is part of this article

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


  1. Hi Scott.

    I've managed to get this sample package working but found issues when applying into existing AEM 6.3 codebase.

    I'd already run the Dialog Conversion Tool which had modified the dialog to use the following for 'field' and 'column' node respectively:

    Unless I revert to using Coral2 not only are the multifields not stored in JSON but values are not pre-populating the dialogs.

    Thanks, Richard.

  2. Hi Scott,

    My requirement is for nested multifield. Any example will be really appreciable.

    Thanks, Abhishek!