Expand my Community achievements bar.

SOLVED

Access JS from the Clientlib

Avatar

Level 3

Hello Community - I have a requirement to access the specific js from the clientlib (/etc.clientlibs/proj1/clientlibs/clientsite/js/test2.js) which resides under /apps path and allowProxy is set to true for the clientlib. My requirement is to access only the specific JS not all the JS as part of the clientlib and also the location of the clientlib should come under /apps and not /etc and we shouldn't grant any read permission to specific clientlib JS to access using /apps/proje/clientlibs/.../test1.js. 

 

Also this should be handled using UI i.e not using HTL. we shouldn't create a new clientlib with only the specific JS because the below clientlib(testlib) is used in multiple places. 

 

E.g. category name: testcl

/apps/proj1/clientlibs/clientsite/js/

                                                  |-----> test1.js

                                                  |-----> test2.js

                                                  |-----> test3.js

 

Please let me know if anyone is able to achieve this implementation in your project.                                    

                                          

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Yes you can still achieve this using the embedded or dependencies property of clientlibs placed under /apps using etc.clientlibs.

You need to place test2.js in separate clientlibs and test1.js and test3.js in separate clientlibs and add the test2.js as embedded property in clientlibs containing test1.js and test3.js

View solution in original post

7 Replies

Avatar

Community Advisor

Hi @test1234567 

 

You can do the below steps. 

1. Give a unique category name to the Clientlib folder that you want to use e.g : apps.elibrary.common

2. Now on the page where you want this JS to load use the below code snippet in some component. (You can change the HTML tags here as per your need) 

 

 

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">
    <clientlib data-sly-call="${clientLib.all @ categories='apps.elibrary.common'}" data-sly-unwrap/>
</head>

 

This should load the code that resides in that cleintlib. 

 

Although a few points to consider, 

1. Make sure that the clientlib that you want to load doesn't already load on your page. 

2. I am not sure on the particular use case hence I suggested the component approach to load clientlib. You can change the approach of triggering the clientlib based on your use case.

 

Thanks

Avatar

Level 3

Thanks for your reply. I know how to call the clientlib. The requirement is to call/access the specific js from the clientlib and not all the js which is part of the clientlib

Avatar

Community Advisor

You can use dependencies or embedded for your use case of having on js file dependencies to other js as you explained in your requirements. See below for details https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/int...

however for client libs inside apps are always used with etc.clientlibs via proxy servlet. That’s the recommendation and not sure why you don’t want to use it but if that’s the case then you can try moving the client libs back to /etc/clientlibs that is not recommended but still supported 

Avatar

Level 3

My requirement is to call/access the specific JS  from the clientib using /etc.clientlib/../test1.js path only and moreover we cannot move the js/clientlib location other than /apps.

Avatar

Correct answer by
Community Advisor

Yes you can still achieve this using the embedded or dependencies property of clientlibs placed under /apps using etc.clientlibs.

You need to place test2.js in separate clientlibs and test1.js and test3.js in separate clientlibs and add the test2.js as embedded property in clientlibs containing test1.js and test3.js

Avatar

Community Advisor

@test1234567 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.



Esteban Bustamante

Avatar

Administrator

@test1234567 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!  



Kautuk Sahni