What is an AEM Component? | AEM Community Blog Seeding

[kautuk_sahni]

What is an AEM Component? by Heena Shirke

Abstract

Remember the first html project you created in your college days? We added all the content in html even if it was repetitive. Lets take an example of following page:

Here, to create this simple structure I had to copy paste same structure. This was okay during college days, however, things will become complex in real world and this approach will not work in real scenarios.

So, to increase the maintainability of the code and content and avoid duplicity, we have something called components in AEM. In simple words, component is the block of code which we can add to a page multiple times without duplicating the code.

Going back to the example, to create same structure in an AEM Page we will create a component with accepts a title and description and add it 3 times to the page.


Lets create an AEM component with same structure:

1. Go to your project in apps folder where you want to create a component in CRX.

2. Right click on the folder -> Create ->Create Component

3. Fill in following details


Label: This is the name that would appear here


Group: You can copy this value from any other component. Eg:



(We will try understand technicality about these fields in some other post)


4. Click on next and then Ok followed by Ctrl + S (to save the changes).

5. If you click on small + icon besides the component name, you will see .jsp file. Delete it and create html file with same name.


6. Open the the html and replace its content with following:

${properties.title}

${properties.description}

Note: ${properties.title} and ${properties.description} are the variables that will return the value of the title and description


7. Next, we will create a dialog to accept title and description values. To make this step easier, you can import the changes in eclipse IDE (Follow this post incase you don't know: Link). Create a folder named "_cq_dialog" under "/components/title-and-description" and create ".content.xml" file under it. Paste following content inside it. Now, export the changes back to the AEM server.

Read Full Blog

What is an AEM Component?

Q&A

Please use this thread to ask the related questions.