Scribd
Upload
46 views3 pages

Create Testimonial Component

The document outlines the steps to create a new component in AEM, including setting up the component directory structure, creating the component node, defining the component dialog, implementing the component logic with HTL, testing the component, and deploying it using the AEM Package Manager.

Uploaded by

Biprotim sen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views3 pages

Create Testimonial Component

The document outlines the steps to create a new component in AEM, including setting up the component directory structure, creating the component node, defining the component dialog, implementing the component logic with HTL, testing the component, and deploying it using the AEM Package Manager.

Uploaded by

Biprotim sen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

Set up the component structure:

In the AEM component directory, you can create a new folder to store the component
code. For example, let's say you want to create a "Testimonial" component. The folder
structure would look like this:

/apps /myproject /components /testimonial

In this example, "myproject" is the name of your AEM project and "testimonial" is the
name of the component. This folder will store all the files associated with the
"Testimonial" component, including the component logic, templates, and dialogs.

2. Create the component node:

To create the component node in AEM, you can use the CRXDE Lite tool. Here's an
example of how to create the component node for the "Testimonial" component:

1. Open CRXDE Lite.


2. Navigate to "/apps/myproject/components".
3. Right-click on the "components" folder and select "Create > Component".
4. Enter "testimonial" as the name of the component and click "OK".
5. The new component node will be created under
"/apps/myproject/components/testimonial".

This creates the component node in the AEM content repository, which is the starting
point for defining the component's dialog, templates, and logic.

3. Define the component dialog:

To define the component dialog in AEM, you can use the WYSIWYG dialog editor or
hand-code an XML file. Here's an example of using the WYSIWYG dialog editor:

1. Open the "testimonial" component node in CRXDE Lite.


2. Right-click on the component node and select "Create > Dialog".
3. In the WYSIWYG dialog editor, add fields for the customer's name, image, and
testimonial text.
4. Save the dialog and close the editor.
5. Implement the component logic:

To implement the component logic in AEM, you can write code using Java and/or HTL.
Here's an example of using HTL to display the customer testimonials:

<div class="testimonial">
<img src="${properties.image}" alt="Customer Image">
<h2>${properties.name}</h2>
<p>${properties.testimonial}</p>
</div>

This code uses the HTL scripting language to retrieve the data from the component's
dialog fields and display it on the web page.

4. Test the component:

To test the component in AEM, you can preview it in the author environment. Here's an
example of how to preview the component:

1. Open the "testimonial" component node in CRXDE Lite.


2. Right-click on the component node and select "Preview".
3. The component will be displayed in a new browser tab and you can check if it
displays the customer's name, image, and testimonial text correctly.
4. Deploy the component:

To deploy the component in AEM, you can use the AEM Package Manager. Here's an
example of how to deploy the component:

1. In CRXDE Lite, navigate to "/apps/myproject/components/testimonial".


2. Right-click on the "testimonial" folder and select "Create Package > AEM
Package".
3. Enter a name for the package and select the "testimonial" folder as the content
for the package.
4. Click "Create" to create the package.
5. Use the AEM Package Manager to install the package on the publish
environment.

This will deploy the "Testimonial" component to the publish environment, making it
available for use on live websites.

You might also like