Loading Client Libraries From under etc/designs | Community
Skip to main content
T
tarkash
Level 2
March 20, 2017
Solved

Loading Client Libraries From under etc/designs

  • March 20, 2017
  • 4 replies
  • 2877 views

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.
Best answer by smacdonald2008

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

4 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
March 20, 2017

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

T
tarkashAuthor
Level 2
March 21, 2017

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
Ratna_Kumar
Level 10
March 21, 2017

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
perfecci0nista
Level 2
August 17, 2017

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.

Terms & ConditionsAccessibility statement

Loading footer...