Search code examples
aemsightly

What is done here. What does this syntax means in sightly?

I am reading the docs about calling clientlibs in sightly. I am not getting the below syntax

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories='clientlib1,clientlib2'}"/>

why we are using category here? How does it related to clientlibs?

Solution

  • Lets break this down:

    <sly> - is a sightly tag that does nothing :) So when you don't want to use an HTML tag you can use <sly> as a placeholder.

    data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html - this line references the clientlib.html file that has templates marked with data-sly-template attributes. These templates are reusable piece of markup. Look at them as functions in htl.

    data-sly-call - used to call one of the templates from the above clientlib.html

    clientLib.all - "all" is the name of the template being called from clientlib.html which is referred using clientLib keyword (-use.clientLib)

    @ categories='clientlib1,clientlib2 - categories are used to identify cq:clientLibraryFolder that are used for client side code in AEM. If you check http://localhost:4502/libs/granite/ui/content/dumplibs.html it will show you the location of libraries clientlib1 & clientlib2

    So in a nutshell, this line calls 2 libraries (containing js & css) with categories clientlib1 & clientlib2 and loads them on to the page/component