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, properties.link, properties.play 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 property.link. 
Node Properties
  • Once you save the dialog, you will see the output as - 
Video Component Output

Conclusion

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 😊

Comments

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

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

      Delete
  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.

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

      Delete
  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

    ReplyDelete
    Replies
    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.

      Delete

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 01: Introduction to AEM

Day 04: Developing first OSGi bundle