How to use Sightly in AEM

Sightly Introduction:

Sightly can referred as an HTML templating language, introduced with the version 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.

As in all HTML server-side templating systems, a Sightly file defines the output sent to the browser by specifying the HTML itself, some basic presentation logic and variables to be evaluated at runtime.

Why we use Sightly,

·         Security by Default
·         Separation of Concerns
·         Sightly is HTML5

How to use Sightly:

Every Sightly file is an HTML5 document or fragment, augmented with a specific syntax that adds the dynamic functionality. Here's a first example:

<h1 data-sly-test="${properties.jcr:title}">

${properties.jcr:title}

</h1>

Two different kind of syntaxes have to be distinguished:

• Sightly Block Statements
  To define structural block elements within Sightly file, Sightly employs HTML5 data attributes. This allows to attach behavior to existing HTML elements. All Sightly-specific attributes are prefixed with data-sly-.
• Sightly Expressions
  Sightly expressions are delimited by characters ${ and }. At runtime, these expressions are evaluated and their value is injected into the outgoing HTML stream. They can occur within the HTML text or within HTML attribute values.

<p data-sly-use.logic="logic.js">

    <a href="${logic.link}">

        ${logic.text}

    </a>

</p>

<h1 data-sly-test="${currentPage.title}">

    <a href="${currentPage.path}.html">

        ${currentPage.title}

    </a>

</h1>

Explanation for better understanding:

• Line 1: The data-sly-test statement checks if the page title exists and is not empty. If so, the <h1> element and its content is displayed, otherwise it is removed altogether.
• Line 2: This expression renders the page path into the href attribute. Since Sightly knows the HTML syntax, href and src attributes are automatically protected against cross-site scripting (XSS) injections accordingly. For instance if the variable contained a javascript: URL, it would have been removed.
• Line 3: This expression displays the page title as text. Many special characters are escaped to make it impossible to inject cross-site scripts.

The main goals /objectives of sightly are :
        – giving back the markup, and not mixing it with code
        – everything is secure, by default
        – smoothen the workflow between the designer and the developer

Scenario-1:

<div>currentPageTitle : ${currentPage.title}</div>

• Well that looks like a JSP, but not quite. Two main differences:
• Extension of the file is changed to .html
• We have only markup in the file, no inclusion of a global.jsp, just markup. So in case a designer wants to look at the file he can just open it in his tools

Scenario-2:

<div data-sly-test="${wcmmode.edit}">Showing this only in edit mode to the author</div>

When the expression inside data-sly-test evaluates to false the whole tag while be hidden in the markup.

Scenario-3:

<div data-sly-test.author="${wcmmode.edit || wcmmode.design}">

Show this to the author

</div>

<div data-sly-test="${!author}">

Not in author mode anymore.

</div>

data-sly-test also supports the naming and reuse of tests, we have an expression ‘author’ that we want to reuse in other data-sly-test attributes.

These are very common use-cases and can now be done without writing any code are extension.

Scenario4:

                    <div data-sly-text="${currentPage.title}">My page title</div>

data-sly-text will replace the value of the HTML-element with the expression of the data-sly-text.

In the example above the page-title will be printed. But the mock value can still be in there to make it easier to view the file in HTML-editors.

Scenario-5:
                    <ul data-sly-list.child="${currentPage.listChildren}">

                               <li>${child.title}</li>

                    </ul>

Here you see an example of a loop, the list object is passed to the data-sly-list attribute. Based on the name (‘child’) you can reference each item in the loop.The output is here that see you a list of the subpages with all the page-titles.

Scenario-6:

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

          <li class="${ childList.odd ? 'odd' : 'even'}">${child.title}</li>

</ul>

Observations are:

1. inside a data-sly-list you have access to a list-variable that contain things like : index, count, odd, even, first, last, middle
2. in the expression you see the use of the ternary operator

Scenario-7:

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

With data-sly-resource you can include components and resources. In the above sample you include of standard cq parsys in your template.

Scenario-8:

    <footer data-sly-resource="${ @ path='footer', resourceType='myproject/footer', wcmmode='disabled'}"></footer>

So you are in need to disable the wcmmode for a specific component? That can now be done via the wcmmode-option when including a component.

Scenario-9:

                    ${pageProperties.jcr:title || properties.title || "No title"}

Within an expression you can use the ‘or’ operator to define fallbacks in case properties are empty. You read the expression from left to right, in the example here “No title” is shown when jcr:title and properties.title are both empty.

Scenario-10:

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

<div data-sly-include="mytestfile.html"></div>

Via data-sly-include you can include other files like the cq:include tag. From sightly you can still use and re-use JSP files if you want. Like shown here for the author-environment.

We will discuss more in detail in our next posts.

Cheers!!!

SonyCharan