Loading Client Libraries From under etc/designs

[tarkash]

We know that AEM recommends to have client libraries under /etc/designs/brand. Now when author selects a design via page properties dialog, then is it possible to automatically include client libraries at page level via this selection. Is there a mapping between design path and client libs placed under it based on some convention?

Like we know that client libs can be loaded based on categories but is there any other way of automatically loading client libs based on selected design path?

[smacdonald2008 · Accepted solution]

You are correct - Adobe recommends placing Clientlibs under etc. The typical way a clientlib is included is use of 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='AEM62CSS.all'}" data-sly-unwrap/>

I would personally recommend using this approach. 

Hope this helps... 

[tarkash]

Thanks for the quick response. 

Just needed one clarification. Even in the suggested approach "categories" are being used. So is there no mapping/linking between the design path (selected by author at page level) and client lib placed under it?

Mainly we wanted the author to have the power of choosing the client lib to be loaded on the page based on design path. And if AEM provides any OOTB way of getting doing this.

[Ratna_Kumar]

Hi,

I think Yes, If you select the design path using page properties, it(CSS, Images etc.,) will automatically apply to all pages that have same design path.

See this link for more reference: https://docs.adobe.com/docs/en/aem/6-2/develop/the-basics/designer.html

And yes, as Scott stated, Adobe recommends placing Clientlibs under etc. (Recommended approach)

~ Ratna.

[perfecci0nista]

I am having same usecase. I am wondering if there is a relation or mapping provided in between designpath and clientlibs. Previously I used design in order to apply the styles to a website. Clientlibs is being the preferred approach which is we can apply the appropriate style in code using

data-sly-call="${clientlib.all @ categories='cq.jquery'}"

However is there a the provision for content author to select the style using clientlibs.

Is selecting the design path in page properties will automatically pick the clientlib underneath it.

What happens if we have more than one clientlib under a design path.

Any help/guidance is much appreciated.