Jun 29, 2014

Sightly and clientlibs

Posted by Feike Visser

With the introduction of Sightly in AEM6, I often get the question: "but what about clientlibs?, how do we do that with Sightly"

In this article I will explain you how you can use clientlibs in Sightly.

Because Sightly is meant to be a general language, without specific AEM-features, there is no thing like data-sly-clientlibs or so.

The best example is from the new foundation page component, this is located at /libs/wcm/foundation/components/page/head.html.

You see there the following things:


This declares the clientLib object, this is implemented as a template.

Inside the head-element you see multiple statements like:

<meta data-sly-call="${clientLib.all @ categories='cq.jquery'}" data-sly-unwrap></meta>

The parameter 'categories' defines the name(s) of the clientlibs that you want to render.

The call 'clientLib.all' will output both css and js (you also have clientLib.css and clientLib.js if you only want to output css or js).

We use data-sly-unwrap here because we don't want to have a surrounding element on top of the generated output.

Other options are:

<meta data-sly-call="${clientLib.js @ categories='clientlib1,clientlib2'}" data-sly-unwrap></meta>

<meta data-sly-call="${clientLib.css @ categories='clientlib1,clientlib2'}" data-sly-unwrap></meta>

If you want to call the clientlib-functionality, always make sure you have declared the data-sly-use.clientLib attribute in your .html file.

Too much?

If this is too much for you, there is always the JSP-fallback that you can use:

<meta data-sly-include="yourcustomfile.jsp" data-sly-unwrap/>

Then can still leverage the <cq:includeClientLib /> tag from your JSP-file


I hope this article has made it easier to understand how to use clientlibs in Sightly.