Sightly

Sightly is an HTML templating language, introduced with AEM 6.0. It takes the place of JSP (Java Server Pages)

and ESP (ECMAScript Server Pages) as the preferred templating system for HTML.

The name “Sightly” (meaning “pleasing to the eye”) highlights its focus on keeping your markup beautiful, and

thus maintainable, once made dynamic.

Benefits:

Lightweight: No dependencies

Secure: XSS protection and URL externalization

Code-less: Separation of business logic and mark-up .

Powerful: Straight-forward API for logic, allowing to do virtually anything Intuitive Clear, simple.

Sightly Tags/Attributes

Sly Tag

This acts as a DIV but in dom this won’t be shown, we can use data-sly-unwrap for the same functionality.

sly tag don’t let be the statements the part of DOM and clears out the rendered HTML and get rid of additional

divs. You can also use data-sly-unwrap to remove the element from DOM.

<sly>

</sly>

Comments in Sightly

<!--/* Ur code goes here */-->

Use Statement

data-sly-use is used to invoke any Java Model, Use js, html(ClientLibs).

We can pass the values to Java class,use js.

Usage examples:

<sly data-sly-use.obj=”com.adobe.somepackage.Model”/>

Using the values in htl file.

${obj.methodName} or ${obj.variableName}

For calling clientlibs we use as below.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientLib.all @ categories='apps.aem-learning'}"/>

For sending any input values/parameters to Java/Use js use as below.

<sly data-sly-use.obj=”${com.adobe.somepackage.Model @value=’value1’} ”/>

<div data-sly-use.model="${'com.aem.project.core.models.HelloWorldModel'

@ pageTitle=currentPage.title , pageNae = currentPage.name}">

${model.pageTitle}

${model.name}

Test statement

data-sly-test is used to check value exists or Boolean conditions.

We can also assign values to variable by using data-sly-test.

Usage examples.

Check the values.

<sly data-sly-test=${properties.property}>

Goes inside if the value exists.

</sly>

<a data-sly-test=${properties.property} href=”http://google.com”>

Click here to redirect to google.com

</a>

<p data-sly-test="${wcmmode.edit}">You are in edit mode</p>

<meta data-sly-test.keywords="${properties.keywords}" name="keywords" content="${keywords}"/>

Assigning the values.

<sly data-sly-test.value=${properties.property}/>

<sly data-sly-test.path="${currentPage.path}"/>

To print the value in Front end use the below.

${value}

${path}

Include Statement

data-sly-include is used to add any html/Jsp file in the component.

Usage examples:

<sly data-sly-include="/libs/wcm/core/components/init/init.jsp"/>

<sly data-sly-include="/core/components/content/somehtml.html"/>

Resource Statement

data-sly-resource is used to add any component within other component. This will act as component inside

the component, where you can author the component separately.

Usage examples:

<div data-sly-resource="${'parsys' @resourceType = 'wcm/foundation/components/parsys'}"></div>

List Statement

data-sly-list statement is used to iterate the values like array/list with in htl.

Usage:

<ul data-sly-list="${ currentPage.listChildren }">

<li> ${item.name} </li>

</ul>

Where item is a default object for list, we can assign customized object also. In addition to that itemList is

also a default object.

In case of default identifier:

<ul data-sly-list="${currentPage.listChildren}">

<li data-sly-test="${ itemList.even}">${item.title}</li>

</ul>

Below are the default objects used in the data-sly-list

· index: zero-based counter (0..length-1)

· count: one-based counter (1..length).

· first: true for the first element being iterated.

· middle: true if element being iterated is neither the first nor the last.

· last: true for the last element being iterated.

· odd: true if index is odd.

· even: true if index is even

· begin: iteration begins at the item located at the specified index; first item of the collection has index 0

· step: iteration will only process every step items of the collection, starting with the first one

· end: iteration ends at the item located at the specified index (inclusive)

Repeat Statement

It is same as List, but the html structure also iterated, whereas list acts as for loop and repeat will iterate the

complete structure including the conditional statement as well. All the objects present in list are also supported

by repeat.

<ul data-sly-repeat="${ currentPage.listChildren }">

<li> ${item.name} </li>

</ul>

Template Statement

Template and call are mutually used. It is used to call some other html which is based on parameter.

This template can be used globally.

Create a template as per the requirement below is sample html in one of the folder in crx/de.

Step 1:

sample.html

<sly data-sly-template.text="${ @ text,sample}">

<h2> This is coming from CTA Template <br> ${text} ${sample}</h2>

</sly>

Step 2:

Add the above template html , in the component where you want to render it.

<sly data-sly-use.disdate="/apps/training/components/files/ sample.htmll"/>