How to add clientlib for a extended component ? | Community
Skip to main content
M
monish_gavali
Level 3
February 17, 2024
Solved

How to add clientlib for a extended component ?

  • February 17, 2024
  • 4 replies
  • 959 views

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 ?

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 AsifChowdhury

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.

4 replies

AsifChowdhury
Community Advisor
AsifChowdhuryCommunity AdvisorAccepted solution
Community Advisor
February 17, 2024

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
    Community Advisor
    DPrakashRajCommunity Advisor
    Community Advisor
    February 17, 2024

    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
      Community Advisor
      Imran__KhanCommunity Advisor
      Community Advisor
      February 17, 2024

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        February 21, 2024

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

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...