Wednesday, 8 January 2014

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.

.

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.


Twitter: Follow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel. 


at