Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Why Sightly is not including dependency client library ?

Avatar

Level 9

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>
 
Mario248_0-1700570315970.png

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

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

 

Avatar

Community Advisor

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

Avatar

Community Advisor

Yes @Mario248 

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

 

The link shared by @A_H_M_Imrul has good examples.


Aanchal Sikka

Avatar

Level 9

No, it is actually same API call. By default it should pick up all dependencies and load the dependencies first before actual clientlibs. 

Avatar

Community Advisor

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

EstebanBustamante_0-1700586449230.png

Hope this helps .

 



Esteban Bustamante

Avatar

Administrator

@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