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:

1. Login to CRXDELite.
2. Navigate to the directory stucure we have created earlier.
3. Go inside the Component folder.
4. Right-click and select Create Component.
5. Enter the following:
   Label: youtube
   Title: DisplayYouTube
   Description: This component is used to display the YouTube video
   Group: AEM Company
6. Click Next and Next.
7. Enter Allowed Parent as */parsys
8. Click Next and Click OK.
9. 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.)
10. Add the following code:

    <div style="overflow: hidden;">
            
    </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.)

11. 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.
12. Right click YouTube, select Create > Create Dialog.
13. Enter title as YouTube and select OK.

The component is created now. Let us enable it.

1. Open the web page you created.
2. Go to the Design View.
3. Enable the Component Group; that is, AEM Company.
4. Go to the Edit view.
5. From the component group, drag and drop the component to your page.
6. 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.