load clientLib based on components(CQ.AUTHORING.DIALOG GETS LOADED ON ALL THE PAGES OR ALL THE PROJECTS) | Community
Skip to main content
M
mallipanchal
New Participant
November 22, 2016
Solved

load clientLib based on components(CQ.AUTHORING.DIALOG GETS LOADED ON ALL THE PAGES OR ALL THE PROJECTS)

  • November 22, 2016
  • 12 replies
  • 14799 views

we have defined components clientLibs as cq.authoring.dialog, But these js libs will be loaded for all templates(all projects) while authoring the pages.

Can we restrict them based on template or components as these JS may create issue in other AEM projects?

I tried extraClientLibs but its not working properly..

Is there anyway other then overlaying out-of-box components?

Thanks,

Malli

    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 akashs51893872

    Hi mallipanchal,

    I solved this problem by inserting two lines of HTL code in the component HTML itself.  PFA the screenshot:

    You need to have a clientLibraryFolder created with this category name:

    Now, ONLY wherever you have this component, the JS/CSS files for this component will be loaded.

    Good Luck...

    12 replies

    Show previous replies
    kautuk_sahni
    kautuk_sahni
    Employee
    November 23, 2016

    Hi 

    Please have a look at this community article for AEM Client Libraries best practices.

    If you want to create component specific clientlibs then you need to create a new clientlibs that gets applied to that particular component. See the article to know how to do it.

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

    This article will explain:

    • multiple components with their own JavaScript and CSS files
    • global JavaScript and CSS files
    • apps folder is not available on the publish instance
    • CSS resources have to go in the <head>, JavaScript resources at the end of the page
    • Resources need to be minified
    • Some resources need to be merged

    I hope this would help you.

    ~kautuk

    Kautuk Sahni
      smacdonald2008
      smacdonald2008
      New Participant
      November 22, 2016

      In this use case - the best way is to overlay components. If you want to change the style of the overlay component - introduce a new clientlib that contains CSS or JS. This is best practice for AEM. 

      Terms & ConditionsAccessibility statement

      Loading footer...