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:

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.
    create a component in sightly folder structure
  • 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.
    create a component in sightly using api
  • Test Newly created Sightly component
    • Log in to AEM SiteAdmin.
    • Double click Sightly Page that you have created to render the script.
      create a component in sightly page structure
    • Replace editor.html in the url to cf#(content finder).
      create a component in sightly open page

You have successfully created your first Sightly component.

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

AEM sightly component default store location

Also see New features in Sightly

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.