• Heena Shirke

What is an AEM Component?

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:

<section data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
    <h3 style = "background: black; color: white">${properties.title}</h3>
      <p>${properties.description}</p>
</section>
<sly data-sly-call="${templates.placeholder @ isEmpty = !(properties.title && properties.description)}"></sly>

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.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Title and Description"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <description
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Description"
                        name="./description"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

ELSE

Create same structure of nodes in AEM


8. Let's add our component to any page and check.


Feel free check my git project in case of confusion:

GitHub Link


44 views

Recent Posts

See All