Article summary

Summary

Discusses how to create an Adobe Experience Manager component that be can used in a LiveCopy page.

A special thank you to Julio Baixauli, a member of the AEM community for submitting the configuration that is used as the basis for this developer article. For information about Julio, click here

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, OSGi, Maven, JavaScript, HTML
Tested On Adobe Experience Manager 5.6.1

Introduction

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

LiveCopy

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 dialog
  • An Image component
  • A standard Text component

By default, the two standard Experience Manager 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.

Echo

This development article walks you through creating a basic AEM custom component named 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). The component is displayed in a LiveCopy page, where it can be modified (this is not desired functionality – it should be locked). Finally the custom component is modified further so that it’s locked within the LiveCopy page.

Create an Experience Manager application folder structure 

Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

This list describes each application folder:

  • Application name: Contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: Contains components that your application uses.
  • page: Contains page components. A page component is a script such as a JSP file.
  • global: Contains global components that your application uses (common may be a substitute for global).
  • templates: Contains templates that you can base page components on.
  • src: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
  • install: Contains a compiled OSGi bundles container.

Create an application folder structure in CRXDE Lite by performing these tasks:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter msm.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

 

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template for the AEM page component  

You can create a template by using CRXDE Lite. A template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click the template folder (within your application), select Create, Create
Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateMsm
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter msm/components/page/templateMsm.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create a render component that is based on templateMsm 

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a AEM developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click /apps/damcomponent/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateMsm.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateGallery.jsp located at: /apps/msm/components/page/templateMsm/templateMsm.jsp.

8. Enter the following HTML code.  

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<html>
<head>
<title>AEM Echo Component page</title>
</head>
<body>
<h2>This page lets you drag and drop the Echo component from the CQ sidekick</h2>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create a custom component named Echo

Create a custom component named Echo that uses a dialog. Create the component under: /apps/msm/components.

To create a component, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click /apps/msm/components, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter echo.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Resource Type: The component to inherit from. Specify /lib/foundation/components.
  • Group: The name of the category under the sidekick where the component appears. Specify General

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open echo.jsp located at: /apps/msm/components/echo/echo.jsp.

8. Enter the following JSP code.
 

<%@include file="/libs/foundation/global.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Echo Component</title>
</head>
<body>
<p> User entered value into the AEM dialog: <%=properties.get("echo","default value" )%> </p>
</body>
</html>

Note:

The value echo, the first parameter of properties.get, is the name of the textfield control that is defined in the AEM dialog. This is created in the next step. 

Add a dialog for the Echo component  

Add a dialog to the custom component. When you are done, the dialog looks like the following illustration.  

dialogTree

Once you create the dialog, an AEM author can enter a value into the textfield located on the dialog, as shown in the following illustration.  

dialog


Perform these tasks to create a dialog for the echo component:

1. Select /apps/msm/components/echo, right click and select New, Dialog.

2. Create an items node (nodeType cq:WidgetCollection) under the your component's Dialog.

3. Create a node named panel (nodetype cq:Widget) under the items node. Assign this property to the panel node.
 

Name Type Value Description
xtype String panel Defines the type of widget as defined by the JSExt library.

4. Create another node named items (nodeType cq:WidgetCollection) under the panel node. (You can use the same node name in a deeper level in the same content branch. Notice that in this content branch, two nodes are named items.)

5. Create a node named echo (nodetype cq:Widget) under the items node. Assign these properties to the echo node. This node is the textfield control on the CQ dialog box. This control lets an author enter a value into the dialog that is displayed in the AEM web page.

Name Type Value Description
xtype String textfield Defines the type of widget as defined by the JSExt library.
fieldLabel String echo Defines the label of the control.  
name String ./echo For this property, specify ./<the name of the node>.  

Create a web page that uses the echo component 

Create an AEM page that is based on templateMsm (the template that you created earlier in this development article). This page will let you select the echo component from the sidekick, as shown in the following illustration.

sidekick


Drag the Echo component onto the CQ web page. Then double click on the component to see the dialog. You can enter a value into the dialog. The value that you enter is displayed in the AEM web page.

Create an AEM web page that displays the custom echo component:

  1. Go to the Websites page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field. Enter MsmComponentPage
  4. Specify the name of the page in the Name field.
  5. Select templateMsm from the template list that appears. 
  6. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page similar to the previous illustration. 
  7. Drag the Echo component from the CQ sidekick into the page. Also drag a Text component and an Image component.
     

Create a LiveCopy page based on the MsmComponentPage 

Create a LiveCopy page based on the MsmComponentPage. When you open the LiveCopy page, click on the three controls. You will see a lock icon on the two standard components. The Echo component does not have a lock icon. (See the illustration shown at the beginning of this article.)

Create a LiveCopy page based on the MsmComponentPage.

1. Open the Websites console at: http://localhost:4502/siteadmin#/content.

2. Select the folder or page below which you want to locate the Live Copy pages.

3. Click New > New Live Copy.

4. In the Source selection tab, define the Live Copy:

  • Title: The title of the root Live Copy page. Specify LiveCopyPage. 
  • Name: The name of the page node. Specify LiveCopyPage.
  • Live Copy From: Browse to MsmComponentPage.
  • Exclude sub pages: Select this option to exclude the child pages from the Live Copy.

5. On the Sync config tab, select Push on modify.
6. Click Create.
 

Modify the custom component to lock it in the LiveCopy page 

The final task is to modify the Echo component so it is locked in the LiveCopy page. To modify the Echo component, perform the following tasks:

1. Add a node ‘cq:editConfig’ of jcr:primaryType=cq:EditConfig in the root folder of the Echo component.
2. Add a node ‘cq:inplaceEditing’ of jcr:primaryType=cq:InplaceEditingConfig under the ‘cq:editConfig’ node
3. Reload the Livecopy page and check that the padlock is shown in the echo component.
 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy