Friday 25 April 2014

Creating your first Adobe Experience Manager Component

You can create a custom Adobe Experience Manager component that you can drag from the CQ sidekick and drop onto an AEM page. Furthermore, the custom component can be displayed in an AEM LiveCopy page. However, by default, the custom component is not locked in the LiveCopy page, as shown in the following illustration.


Notice in the previous illustration, three AEM components are displayed in a LiveCopy page:

  • A custom component named Echo that display text that a user enters into a CQ dialog
  • An Image component
  • A standard Text component

By default, the two standard AEM components have a lock, meaning that these components cannot be modified in the LiveCopy page. However, the custom component can be clicked on and modified, as shown by this illustration.


This custom component should be locked within the AEM LiveCopy page. To successfully lock the custom component, you have to add extra configuration to the custom component (this will be shown later in this development article). 

This development article walks you through creating a basic AEM custom component name Echo. All it does is let an AEM user enter a value into a dialog. Then the value is displayed in the AEM web page (this is about as simple of a custom component as you can develop). Then the component is displayed in a LiveCopy page, where it can be modified. Finally the custom component is modified further so that it’s locked within the LiveCopy page.

To read this development article, click http://helpx.adobe.com/experience-manager/using/aem-first-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.


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

YouTube: Subscribe to the AEM Community Channel