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

Conditional loading of clientlib

Avatar

Level 4

 

Hello Community - I am loading the clientlib based on wcmmode. For some reason it is not working as expected.

 

If I access the page in edit mode, it should load only the categoryA clientlib not categoryB but I could see categoryB is also loading when I check the network calls.

is there any issue with the below snippet? Can someone tell me how can we restrict the loading of the clientlib?

----------------

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />

 

<sly data-sly-test.editor="${wcmmode.edit || wcmmode.design}">

      <sly data-sly-call="${clientlib.css @ categories=’categoryA’}”/>

</sly>

 

<sly data-sly-test="${!editor}">

      <sly data-sly-call="${clientlib.css @ categories=’categoryB’}” />

</sly>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I have tried the syntax below, and it works as expected:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-test.isEdit="${wcmmode.edit || wcmmode.design}"/>
<sly data-sly-test="${isEdit}" data-sly-call="${clientlib.css @ categories='sourcedcode.categoryA'}"/>
<sly data-sly-test="${!isEdit}" data-sly-call="${clientlib.css @ categories='sourcedcode.categoryB'}"/>

I've tried:
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=edit
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=design
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=disabled

I am able to see the output of the clientlib files as expected.

Lastly, pleas validate if your clientlibs are actually registered properly. using this tool, http://localhost:4502/libs/granite/ui/content/dumplibs.test.html

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

I have tried the syntax below, and it works as expected:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-test.isEdit="${wcmmode.edit || wcmmode.design}"/>
<sly data-sly-test="${isEdit}" data-sly-call="${clientlib.css @ categories='sourcedcode.categoryA'}"/>
<sly data-sly-test="${!isEdit}" data-sly-call="${clientlib.css @ categories='sourcedcode.categoryB'}"/>

I've tried:
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=edit
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=design
view-source:localhost:4502/content/sourcedcode/us/en/home.html?wcmmode=disabled

I am able to see the output of the clientlib files as expected.

Lastly, pleas validate if your clientlibs are actually registered properly. using this tool, http://localhost:4502/libs/granite/ui/content/dumplibs.test.html