Expand my Community achievements bar.

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

Avatar

Level 10

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.

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. 

[img]HeroWebPage.png[/img]

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

[img]Hero.png[/img]

This article covers the following points:

  • how to work with rich text plugins
  • how to develop and register a custom xtype
  • how to work with multifield component
  • how to control the behaviour of the component using a cq:EditConfig node
  • how to style the component (for example, add a strike through style)
  • how to use drag and drop functionality

To read this development article, click  http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html.

0 Replies