How to include client libraries using Sightly? | Community
Skip to main content
GK-007
GK-007
Level 9
Oct 16, 2015 2:27 AM UTC
Solved

How to include client libraries using Sightly?

Hi All,

We are using sightly to develop components and we want to include client libraries.

How to do this using sightly?

Thanks,

Kishore

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    smacdonald2008
    smacdonald2008Accepted solution
    Level 10
    Oct 16, 2015 2:27 AM UTC

    See this AEM documentation topic:

    http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Loading Client Libraries

    Hope this helps...

    View reply

    7 replies

    RashidJorvee
    RashidJorvee
    Level 4
    Apr 20, 2017 10:59 AM UTC

    Best Answer: https://gist.github.com/yupadhyay/a7348e7fbf98590f176c

    <head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

    <!--for css+js --><meta data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap></meta>

    <!-- only js --><meta data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap></meta>

    <!-- only css --><meta data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap></meta>

    </head>

    Translate
      RashidJorvee
      RashidJorvee
      Level 4
      Mar 24, 2022 4:29 PM UTC

      In AEM 6.5 we can also include clientLibs like this.

       

      <sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' 
          @ categories='components.custom.embed.v1'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
      Translate
        smacdonald2008
        smacdonald2008Accepted solution
        Level 10
        Oct 16, 2015 2:27 AM UTC

        See this AEM documentation topic:

        http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Loading Client Libraries

        Hope this helps...

        Translate
        GK-007
        GK-007Author
        Level 9
        Oct 16, 2015 2:27 AM UTC

        I have configured clientlib as below but client libraries are not effecting on the page.

        <head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">
            <clientlib data-sly-call="${clientLib.all @ categories='apps.elibrary.common'}" data-sly-unwrap/>
            <div data-sly-resource="${'logo' @ resourceType='elibrary/components/page/logo'}"></div>
        </head>

        What's the issue?Please help me.

        Thanks,

        Kishore

        Translate
        smacdonald2008
        smacdonald2008
        Level 10
        Oct 16, 2015 2:27 AM UTC

        When you look at the page in the browser - is there an error message or missing CSS styles? 

        Translate
        GK-007
        GK-007Author
        Level 9
        Oct 16, 2015 2:27 AM UTC

        issue got resoled.

        I have added css file names  with , separated in css.txt file.I have removed them and now css are applying.

        Translate
        GK-007
        GK-007Author
        Level 9
        Oct 16, 2015 2:27 AM UTC

        i don't see any error on the page.

        is there any example which added client libs using Sightly?

        Translate
        Terms & ConditionsAccessibility statement

        Loading footer...