Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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