Article updated on July 27, 2016.

With the release of AEM 6.1, there are new features added to the HTML Template Language (HTL), formerly known as Sightly, which was introduced with AEM 6.0. Together with the release, there is now also a FeaturePack available to backport all these new features, and HTL itself, to AEM 6.0 and CQ 5.6.1.

If you want to download this FeaturePack, follow this link to packageshare, or refer to “featurepack-6431”.

Here some code example of the new features:

<sly> element

The <sly> element doesn’t get displayed in the resulting HTML, and can be used instead of the data-sly-unwrap. The goal of the <sly> element is to make it more obvious that the element isn’t outputted. If you want you can still use data-sly-unwrap.

<sly data-sly-test.varone="${properties.yourProp}"/>

As with data-sly-unwrap, try to minimize the use of this. Usually it is a ‘bad smell’ when your code is overloaded with data-sly-unwrap.

data-sly-repeat

With data-sly-repeat you can “repeat” an element multiple times based on the list that is specified.

<div data-sly-repeat="${currentPage.listChildren}">${item.name}</div>

This works the same way as data-sly-list, except that you don’t need a container element.

You can also refer to the ‘item’ for attributes, here an example:

<div data-sly-repeat="${currentPage.listChildren}" data-sly-attribute.class="${item.name}">${item.name}</div>

i18n and locale objects

When you are using i18n and HTL, you can now also pass in custom locale objects, this wasn’t available earlier.

${'Hello World' @ i18n, locale=request.locale}

URL manipulation

A new set of url manipulations is available, here some examples how you can use this.

Adds the html extension to a path

<a href="${item.path @ extension = 'html'}">${item.name}</a>

Adds the html extension and a selector to a path

<a href="${item.path @ extension = 'html', selectors='products'}">${item.name}</a>

Adds the html extension and a fragment (#value) to a path

<a href="${item.path @ extension = 'html', fragment=item.name}">${item.name}</a>

New to HTL? Have a look at the getting started guide.

Look for the full set that is available, in the Specification of the HTML Template Language.

Read-on

Other posts on the topic:

And here other resources to learn more about it:

Happy programming with HTL!

@heervisscher

0 comments