Creating AEM multifield components that support drag and drop and uses custom xtypes

You can create an Adobe Experience Manager (AEM) multi-field component that supports a rich text editor and lets an AEM author drag images from the Content Finder and drop them into the component. In addition, you can define a custom xtype and use it in the component. The custom xtype is rendered in the component’s dialog and lets an AEM author enter values into its controls during design time.

Note: Developing a custom xtype is discussed in this development article.

The AEM component developed in this development article is used by the CQ parsys system and is placed onto the AEM sidekick. An AEM author can drag the component from the CQ sidekick onto an AEM page during design time.


The AEM custom component being dragged from the CQ sidekick

The following illustration shows the component's dialog that lets an AEM author enter data.



In the previous illustration, notice that an image is dragged from the AEM Content Finder onto the component. Also notice this component supports multiple tabs, where each tab contains different fields. For example, when the user clicks the Title tab, a new panel is displayed with an Add Item control.




When the user clicks the Add Item, a Rich Text Editor (RTE) appears that lets the user enter text, as shown in the following illustration.


A Rich Text Editor
The text value entered into the RTE under the Title tab is displayed under the Title section of the AEM web page.


Text entered into the Rich Text Editor displayed in an AEM web page

This development article steps you through how to build this AEM component using xtypes, JavaScript, JCR nodes, and CSS files. Once you read through this article, you will have a solid understanding of how to build an AEM widget using AEM XTypes. To read this development article, click http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html.