Create a Basic Sightly Component in AEM

Sightly is introduced with the release of AEM 6.0 version, to make component development as a job of UI developer from Java developer’s. AEM insured that components written is Sightly are compatible with components written in JSP, so that both type of components gets supported with AEM 6.x versions. The focus of this tutorials is to learn how to create Sightly component in AEM(Adobe experience Manager).

Follow below steps to create a component in Sightly:
Modify the basic Component to be used as a Sightly Component.
Test Sightly Component.

Creating a Sightly Component in AEM
Creating a Sightly component in AEM is very easy and has many advantages over traditional jsp component in aem. Like all HTML editor supports sightly code , you can leverage all features of editor like syntax highlighting , formatting etc.

Follow below steps to create a component in Sightly:
In Crxde , Navigate to /apps/training/components/ .
Select myComponent.jsp under /apps/training/components/ and rename it to myComponent.html or you can delete existing jsp file and create a new html file with same name.

Double click on myComponent.html .
Lets use API’s to display basic page information.
Edit myComponent.html and enter below code.

Note: You can use more API methods from Sightly API’s

<html>
<head><title>Welcome to AEM Tutorials </title></head>
<body>
<h1>Welcome to AEM Tutorials</h1>
<h2>I am your Sightly rendering script!!</h2>
<h3> Properties</h3>
Title: ${currentPage.properties.jcr:title}
<h3>Page Properties</h3>
Title: ${currentPage.Title}
Name: ${currentPage.Name}
Path: ${currentPage.Path}
Depth: ${currentPage.Depth}
<h3>Node Details</h3>
Name: ${currentNode.Name}
Path: ${currentNode.Path}
Depth: ${currentNode.Depth}
</body>
</html>

Click SaveAll.

Test Newly created Sightly component
Log in to AEM SiteAdmin.
Double click Sightly Page that you have created to render the script.

Replace editor.html in the url to cf#(content finder).

You have successfully created your first Sightly component.

Note: All Sightly components that we create. AEM stores them under var folder in crxde.

AEM Tutorials for Beginners

April 16, 2020
Estimated Post Reading Time ~