Create your first Sightly component

In this session, you will learn how to create an AEM component. You have learned that an AEM component is used to display information in a certain way. You will use Sightly to create the component.

We will call the component as a 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:
• Label: youtube
• Title: DisplayYouTube
• 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 GitHub. Please feel free to use it.