Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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