Arti­cle updat­ed on July 27, 2016.

With the release of AEM 6.1, there are new fea­tures added to the HTML Tem­plate Lan­guage (HTL), for­mer­ly known as Sight­ly, which was intro­duced with AEM 6.0. Togeth­er with the release, there is now also a Fea­turePack avail­able to back­port all these new fea­tures, and HTL itself, to AEM 6.0 and CQ 5.6.1.

If you want to down­load this Fea­turePack, fol­low this link to pack­age­share, or refer to “fea­turepack-6431”.

Here some code exam­ple of the new fea­tures:

<sly> element

The <sly> ele­ment doesn’t get dis­played in the result­ing HTML, and can be used instead of the data-sly-unwrap. The goal of the <sly> ele­ment is to make it more obvi­ous that the ele­ment isn’t out­putted. If you want you can still use data-sly-unwrap.

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

As with data-sly-unwrap, try to min­i­mize the use of this. Usu­al­ly it is a ‘bad smell’ when your code is over­loaded with data-sly-unwrap.

data-sly-repeat

With data-sly-repeat you can “repeat” an ele­ment mul­ti­ple times based on the list that is spec­i­fied.

<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 con­tain­er ele­ment.

You can also refer to the ‘item’ for attrib­ut­es, here an exam­ple:

<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 cus­tom locale objects, this wasn’t avail­able ear­li­er.

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

URL manipulation

A new set of url manip­u­la­tions is avail­able, here some exam­ples how you can use this.

Adds the html exten­sion to a path

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

Adds the html exten­sion and a selec­tor to a path

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

Adds the html exten­sion and a frag­ment (#val­ue) to a path

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

New to HTL? Have a look at the get­ting start­ed guide.

Look for the full set that is avail­able, in the Spec­i­fi­ca­tion of the HTML Tem­plate Lan­guage.

Read-on

Oth­er posts on the top­ic:

And here oth­er resources to learn more about it:

Hap­py pro­gram­ming with HTL!

@heervisscher

0 comments