In this session, you will learn how to create an AEM component. You have learned that an AEM component is used to display an information in a certain way. You will use Sightly to create the component.
We will call the component as YouTube component. When you drag and drop the component to a web page, it will display a YouTube video – specifically, a YouTube video I uploaded as a part of this learning series.
So, let us start:
- Login to CRXDELite.
- Navigate to the directory stucure we have created earlier.
- Go inside the Component folder.
- Right-click and select Create Component.
- Enter the following:
Description: This component is used to display the YouTube video
Group: AEM Company
- Click Next and Next.
- Enter Allowed Parent as */parsys
- Click Next and Click OK.
- Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
- Add the following code:
<div style="overflow: hidden;"> <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe> </div>
(I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)
- Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
- Right click YouTube, select Create > Create Dialog.
- Enter title as YouTube and select OK.
The component is created now. Let us enable it.
- Open the web page you created.
- Go to the Design View.
- Enable the Component Group; that is, AEM Company.
- Go to the Edit view.
- From the component group, drag and drop the component to your page.
- See the way YouTube video appears.
That’s it. We will see how to customize component shortly.
As usual, I have uploaded the code to my GitHib. Please feel free to use it.