Create a basic Component using Sightly in AEM

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

Follow the below steps to create a component in Sightly:

· Create a Template, Page and a Basic Component as shown in the previous tutorial.

· 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 the traditional JSP component in aem. Like all HTML editor supports sightly code, you can leverage all features of an editor like syntax highlighting, formatting, etc.

Follow the below steps to create a component in Sightly:

· In Crxde , Navigate to /apps/training/components/ .

· Select component.jsp under /apps/training/components/ and rename it to myComponent.html or you can delete the existing JSP file and create a new html file with the same name.

· Double click on myComponent.html.

· Lets use API’s to display basic page information.

§ Edit myComponent.html and enter the 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 a var folder in crxde.

AEM Tutorials for Beginners

March 15, 2020
Estimated Post Reading Time ~