Jan 23, 2014

Sightly intro part1

Posted by Feike Visser

In this article I want to give you an introduction into Sightly. This is the new way to develop components and templates in the AEM6 release.

I won't go much into text, but want to show you 10 code samples, and compare these to the existing way of component development via JSP.

The main 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

Ready for the first code sample?, here we go!


currentPageName : ${}

Well that looks like a JSP, but not quite. Two main differences:

  1. extension of the file is changed to .html
  2. 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 toolset.

Next one...


Show this only in edit mode to the author

Now it is getting more interesting, we have now a data-sly-test attribute and a wcmmode object.

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


Show this to the author
Not in author mode anymore..

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.


Mock page title

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.


  • ${child.title}

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.

This is quite a basic list example, let go to a more advanced one!


  • ${child.title}

In this sample you see a few new elements:

  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

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


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.


${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.


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.

In my next article I will explain more advanced topics on how to use your custom Java-classes with Sightly.

Next articles: part 2, part 3, part 4, part 5