load clientLib based on components(CQ.AUTHORING.DIALOG GETS LOADED ON ALL THE PAGES OR ALL THE PROJECTS) | Community
Skip to main content
mallipanchal
Level 2
Nov 22, 2016 3:22 AM UTC
Solved

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

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.
    akashs51893872
    akashs51893872Accepted solution
    Level 3
    Aug 8, 2018 1:02 AM UTC

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

    View reply

    12 replies

    Show previous replies
    kautuk_sahni
    kautuk_sahni
    Employee
    Nov 23, 2016 8:07 AM UTC

    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

    Translate
    Kautuk Sahni
      smacdonald2008
      smacdonald2008
      Level 10
      Nov 22, 2016 7:18 PM UTC

      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. 

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...