Skip to main content

Day 07: Creating your first Component in AEM

AEM Developer Series

Suppose you need to create a website for cute and adorable teddy bears 🐻. In this site, on some web pages, there has to be an image of a teddy bear along with its title, some descriptive text and price.
As you may have guessed, a good way to do it to create a small entity having these fields and which is configurable and can be reused on these pages.

Here to our rescue come the AEM Components. A component as its name suggests a reusable entity that can be used anywhere on our website. As per our requirement, we can configure the same component differently on different pages (different look with the same feel 😊). A typical AEM page is composed of many such components.

Components are the building blocks of pages. A component usually contains a JSP or HTML file that contains the HTML markup and maybe some business logic for that component.

Note: Adobe recommends HTL (HTML Template Language) to be used for markup instead of JSP.

In this post, we will be creating one video component that takes video id from YouTube or Vimeo and plays the video on our page. Let's get started.

Creating the component dialog

For using the component, we first need to create a proper dialog structure in AEM
  • Open CRXDE and move to your project under /apps.
  • Right-Click on the desired folder, then Create..., then Create Component... and configure as per the below screenshot and save and Save All...
Create a Component
  • Create nodes and properties under the component node as per the following XML file
  • Now rename the video.jsp file to video.html and paste the below code in it
  • This is a simple file where we have applied styling and added some JavaScript logic to run the component. If you look closely we are using properties.title,, and properties.pause in our HTML code. 
  • Actually, we are configuring the values from the edit dialog (shown below) and the values we save are getting displayed dynamically in the markup using the property object.
Edit Dialog
  • The values of fields in JCR are saved using the name class in each field node. The value of the name property is used to access the value in the JCR. For e.g. to access the External Link field value, we have to use 
Node Properties
  • Once you save the dialog, you will see the output as - 
Video Component Output


Congratulations!! 🙋 you have created your first AEM Component which displays the video as per the given WebM link. I hope you enjoyed this post.

You can find the complete code of this project on my GitHub. Feel free to fork or open issues, if any.

I would love to hear your thoughts on this and would like to have suggestions from you to make it better. 

Feel free to befriend me on Facebook, Twitter or Linked In or say Hi by email.

Happy Coding 😊


  1. you have an error in video.html code at line 86. no closing bracket

    1. Hi, thanks for your feedback. The closing tag you mentioned is at line #87 and at line #89, the video tag is closed.

    2. style="background-color: ${properties.bgColor"

  2. Thanks for the tutorial. But it was hard to understand this part "Create nodes and properties under the component node as per the following XML file". Only with the help of a colleague I was able to complete this step. Turns out that I needed to create a cq:dialog node and paste the xml inside of it's content.xml. It would be better if you explained it that way. But anyways pretty helpful articles.

    1. Hi, thanks a lot for your valuable feedback. I will try to follow this approach from the next posts.

  3. HI Anirudh, I have doubt in creating the step "Create nodes and properties under the component node as per the following XML file" in Day-07 creating the first component. Can you help me in creating the

    1. Hi Vinay, sure.
      Once you have created the cq:Component node in crx/de, create a node cq:dialog of type nt:unstructured.
      Now, follow the XML file and create nodes accordingly. The name of the XML tag is the node name and the attributes are its properties. The tags which are the children of another tag are nested nodes.

  4. HI Anirudh, very helpful article. I have created the nodes and set properties from crx/de but unable to open video component in dialog form. Could you please me how i open video component in dialog.

    1. Hi, could you please tell me what happens when you double click the component or click on the "Wrench" icon in the "Edit" mode?
      Also, could you please check your browser's console and ./crx-quickstart/logs/error.log for any errors?

    2. Hi Anirudh, I am thoroughly following your articles. It is very helpful. I am having similar issue. I have provided all info in dialog. The component is displaying in preview mode. However, only displaying the border of video element. By inspecting the element I could see the url which I have provided in dialog. Play video button is not working. Not seeing in any error in error log. Any idea what could be the issue. I am using AEM 6.5.


Post a Comment

Popular posts from this blog

Day 00: AEM Developer Series

Hello everyone! Welcome to this AEM development series. We can all see the revolution of Digital Marketing today. Companies are dying to be a part of it and they have made this a war for the Digital Marketing tools.
Adobe is way ahead in this war and has gained a lot of market capture. They are leaders in the Digital Marketing platforms since 2014-15. One of the flagship product in Adobe's Digital Marketing suite is Adobe Experience Manager (AEM).
Since AEM is in huge demand, the people who know how to develop on AEM are also in huge demand. But developing on AEM is not easy as it is made up of various open-source technologies such as Apache Felix (OSGi), Apache Sling, Apache Oak and Adobe's own technologies like Granite, HTL etc. Learning all these technologies in conjunction can sometimes become confusing and frustrating 😫.
When I first started learning AEM in 2016, I was dumbfounded to see there is so much going on under the hood. I then spent months to gather all the res…

Day 05: Working with Sling Servlets in AEM

Day 03: Setting up AEM Development Environment