Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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