Custom client library based on specific component

[darren_neville]

Hi I was wondering if someone could help me i am attempting to add a script based only on when one component is present and not in the generic site script. Is this possible and how is it done? I cant seem to find any documentation on the subject.

Thanks in advance

[smacdonald2008]

If you want to include a ClientLib for only 1 component (ie - page component), then simply include that in the comopnent JSP or the HTL (Sightly) code.

For example - to include a client lib that contains JQuery Libs/CSS - you would use: 

<cq:includeClientLib categories="jquerysamples" />

See this article as an example: 

https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

Hope this helps... 

[kautuk_sahni · Accepted solution]

Hi Darren

Please have a look at this community article, this talks about :

1.multiple components with their own Javascript and CSS files

2. global Javascript and CSS files

So here, you can learn to create a component specific javascripts/css and global javascripts/css.

Link:- http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

Read the above article to learn step by step approach to create a component specific JS.

So as stated by Scott, 

If you want to include a ClientLib for only 1 component (ie - page component), then simply include that in the comopnent JSP or the HTL (Formerly known as Sightly) code.

For example - to include a client lib that contains JQuery Libs/CSS - you would use: 

<cq:includeClientLib categories="project.components" />

<cq:includeClientLib css="project.components" /> <cq:includeClientLib js="project.components" />

OR 

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

Some more good reads are:-

Link:- http://www.icidigital.com/blog/best-approaches-to-client-libraries-in-adobe-cq5-part-1/

Link:- http://www.icidigital.com/blog/best-approaches-clientlibs-aem-part-3/

I hope this will help you.

Thanks and Regards

Kautuk Sahni

[darren_neville]

thanks