With the intro­duc­tion of Sightly in AEM6, I often get the ques­tion: “but what about clientlibs?, how do we do that with Sightly”

In this arti­cle I will explain you how you can use clientlibs in Sightly.

Because Sightly is meant to be a gen­eral lan­guage, with­out spe­cific AEM-features, there is no thing like data-sly-clientlibs or so.

The best exam­ple is from the new foun­da­tion page com­po­nent, this is located at /libs/wcm/foundation/components/page/head.html.

You see there the fol­low­ing things:

data-sly-use.clientLib=”${‘/libs/granite/sightly/templates/clientlib.html’}”

This declares the clientLib object, this is imple­mented as a template.

Inside the head-element you see mul­ti­ple state­ments like:

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

The para­me­ter ‘cat­e­gories’ defines the name(s) of the clientlibs that you want to render.

The call ‘clientLib.all’ will out­put both css and js (you also have clientLib.css and clientLib.js if you only want to out­put css or js).

We use data-sly-unwrap here because we don’t want to have a sur­round­ing ele­ment on top of the gen­er­ated 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:

Then can still lever­age the tag from your JSP-file

I hope this arti­cle has made it eas­ier to under­stand how to use clientlibs in Sightly.

@heervisscher