How to add clientlib for a extended component ?

[monish_gavali]

I have created a Navigation component by extending the core navigation component. So now i want to add my custom clientlib to my Navigation component. how can i do that ?

[AsifChowdhury · Accepted solution]

Hi @monish_gavali 

It's as same as normal component. Sample screenshot is given below:

Here my accordion component is extending the core component. (clientlib can be in separate place not an issue)

You can call your custom clientlib using category in the html like this:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories=['core.wcm.components.accordion.v1','apps.commons.components.accordion.v1.accordion'], defer=true}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

NB. If you add html or other files which are also exist in the core component then core component's files will override by yours. Dialog xml will add yours along with the core components properties.

[DPrakashRaj]

You must be extending the dialog as well so in that case you can use extraClientlibs=“your.custom.clientlibs”

Learn more on https://sourcedcode.com/blog/aem/what-are-aem-extraclientlibs

[Imran__Khan]

There are multiple ways to load component specific clientlibs. Two main waysentioned below:

* Add component clientlib as a dependency as part of project main clientlib.

* use data-sly-use to load clientlib as part of component html.

[kautuk_sahni]

@monish_gavali Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.