Access JS from the Clientlib | Community
Skip to main content
T
test1234567
Level 6
April 16, 2024
Solved

Access JS from the Clientlib

  • April 16, 2024
  • 4 replies
  • 1283 views

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.                                    

                                          

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DPrakashRaj

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

4 replies

ksh_ingole7
Community Advisor
ksh_ingole7Community Advisor
Community Advisor
April 16, 2024

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

    T
    test1234567Author
    Level 6
    April 17, 2024

    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

      DPrakashRaj
      Community Advisor
      DPrakashRajCommunity Advisor
      Community Advisor
      April 16, 2024

      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/introduction/clientlibs

      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 

        T
        test1234567Author
        Level 6
        April 17, 2024

        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.

          DPrakashRaj
          Community Advisor
          DPrakashRajCommunity AdvisorAccepted solution
          Community Advisor
          April 17, 2024

          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

            EstebanBustamante
            Community Advisor and Adobe Champion
            EstebanBustamanteCommunity Advisor and Adobe Champion
            Community Advisor and Adobe Champion
            April 18, 2024

            @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
              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              June 19, 2024

              @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
              Terms & ConditionsAccessibility statement

              Loading footer...