Why Sightly is not including dependency client library ? | Community
Skip to main content
Mario248
Mario248
Level 7
November 21, 2023
Solved

Why Sightly is not including dependency client library ?

  • November 21, 2023
  • 4 replies
  • 1714 views

I am trying to include client library using Sightly using below code.

 

 

 

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly> <sly data-sly-call="${clientLib.js @ categories='hero-platform'}"></sly>

This code works but it is including the client library without it's dependency. 

 

 
View source -  <script src="/etc.clientlibs/solution/clientlibs/hero-platform.js"></script>
 

I expect this data-sly-call will include "jquery" and "bootstrap" dependencies. Any reason why it is not working ? I dont see any error in log.

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 A_H_M_Imrul

@mario248 

I don't see anything wrong with the setup however, I hope you have separate clientlibs (for js) with categories jquery and bootstrap. 

Here is an article with clear explanation (just in case you need): https://khakiout.wordpress.com/2016/02/23/aem-clientlibs-difference-between-dependencies-and-embed/

 

4 replies

A_H_M_Imrul
Community Advisor
A_H_M_ImrulCommunity AdvisorAccepted solution
Community Advisor
November 21, 2023

@mario248 

I don't see anything wrong with the setup however, I hope you have separate clientlibs (for js) with categories jquery and bootstrap. 

Here is an article with clear explanation (just in case you need): https://khakiout.wordpress.com/2016/02/23/aem-clientlibs-difference-between-dependencies-and-embed/

 

    aanchal-sikka
    Community Advisor
    aanchal-sikkaCommunity Advisor
    Community Advisor
    November 21, 2023

    Hello @mario248 

     

    Majority of the documentation has the js include as a single call, like

    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='clientlib1,clientlib2'}"/>

     Can you please check, if merging them in a single call changes the behavior?

    Aanchal Sikka
      Mario248
      Mario248Author
      Level 7
      November 21, 2023

      Should it pick all the dependencies automatically ? 

        aanchal-sikka
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        November 21, 2023

        Yes @mario248 

        For dependencies, there would be separate <script> calls.

         

        The link shared by @a_h_m_imrul has good examples.

        Aanchal Sikka
          EstebanBustamante
          Community Advisor and Adobe Champion
          EstebanBustamanteCommunity Advisor and Adobe Champion
          Community Advisor and Adobe Champion
          November 21, 2023

          @mario248, can you explain why you believe this isn't working? Are the JS/CSS files missing from the page, resulting in broken styles and functionality related to jQuery and Bootstrap? Or is it that you don't explicitly see the "jquery" and "bootstrap" links in the HTML, leading you to think it's not functioning as expected?

           

          All the dependencies will be combined into a single minified JS/CSS file. In your HTML, you should observe something labeled "dependencies" being included, similar to the following:

          Hope this helps .

           

          Esteban Bustamante
            kautuk_sahni
            Community Manager
            kautuk_sahniCommunity Manager
            Community Manager
            November 23, 2023

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