Loading Client Libraries From under etc/designs | Community
Skip to main content
tarkash
Level 2
Mar 20, 2017 5:40 PM UTC
Solved

Loading Client Libraries From under etc/designs

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
smacdonald2008
smacdonald2008Accepted solution
Level 10
Mar 20, 2017 8:12 PM UTC

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... 

View reply

4 replies

perfecci0nista
perfecci0nista
Level 2
Aug 17, 2017 8:25 PM UTC

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.

Translate
Ratna_Kumar
Ratna_Kumar
Level 10
Mar 21, 2017 3:47 AM UTC

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.

Translate
tarkashAuthor
Level 2
Mar 21, 2017 12:58 AM UTC

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.

Translate
smacdonald2008
smacdonald2008Accepted solution
Level 10
Mar 20, 2017 8:12 PM UTC

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... 

Translate
Terms & ConditionsAccessibility statement

Loading footer...