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

Can I have 2 clientlibs with the same category ?

Avatar

Level 7

"categories (string) multiple - is the identifier used to directly include this clientlib from a content page or to embed it in other clientlibs. We can categorize our clientlibs using this property to manage files easily and only load whatever we need. The categories property, being multi-valued, allows a library folder to be    part of more than one category."

 

hi folks,

I'm just try to understand the above. Can I have multiple clientlibs with the same "category" value in the .content.xml files ?

I tried it and it seems to work but I have some doubts if it is allowed.

I know all about "embed" and "dependency" etc. and I didn't use them here.

Just asking if I can use the above method. I know you can have a clientlib with multiple categories.

thanks!

Fiona

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@fionas76543059 

I think it should work

I am not too sure of this though. We can find out by testing it though

 

For eg: we can have three components A B C with clientlibs having same category name as 'a.b.c'. And the category 'a.b.c' is called in each component's HTL 

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<div data-sly-call="${clientLib.all @ categories='a.b.c'}" data-sly-unwrap></div>

Now when component A is loaded we would expect this will also load the js and css included in component B and C. And so on.

 

So if this helps some how it should be ok to use the approach I suppose. Sorry for not having a sure answer but wanted to share what we could try to find a solution
I will try this out as possible and update. 

 

See this too - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/load-clientlib-based-on-co...

cq.authoring.dialog is probably an example. It can be included as a category where required. 

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

@fionas76543059 

I think it should work

I am not too sure of this though. We can find out by testing it though

 

For eg: we can have three components A B C with clientlibs having same category name as 'a.b.c'. And the category 'a.b.c' is called in each component's HTL 

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<div data-sly-call="${clientLib.all @ categories='a.b.c'}" data-sly-unwrap></div>

Now when component A is loaded we would expect this will also load the js and css included in component B and C. And so on.

 

So if this helps some how it should be ok to use the approach I suppose. Sorry for not having a sure answer but wanted to share what we could try to find a solution
I will try this out as possible and update. 

 

See this too - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/load-clientlib-based-on-co...

cq.authoring.dialog is probably an example. It can be included as a category where required. 

Avatar

Community Advisor
Ok I found https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/categories-unique-across-p... where it is suggested that the clientlib category be unique otherwise they will be pulled regardless, which is what I said, they will be pulled wherever it is called. Hope this helps.

Avatar

Community Advisor

@fionas76543059 Yes you can have it. That is exactly why we use categories for. What AEM does is, it will compile all the files in the same categories to a single JS or CSS file and include it wherever that category is referred. 

 

Let us say you have scenario where you are using same category name for two different projects

                     Proj X --> Clientlib Category AB

                     Proj Y --> Clientlib Category AB

 

  When you include your Clientlib AB for you Project X , files in both project X and Y 's clientLibraries will be compiled and added as single file. Same way when you add the Clientlib AB in Project Y. 

So when adding categories value , you have to keep this in mind. Categories can be same given you intend to use it along with the rest of the JS and CSS in Clientlibs with same category name elsewhere. 

 

If your clientlibrary is your project specific , make sure to give unique category name so that unwanted JS or CSS doesn't get added to your project.

 

A simple example would be  cq.authoring.dialog categories used in ClientLibraries , which we need to be added as part of the authoring dialogs to do some custom actions on the dialogs . If you use this category name in your ClientLib folder , it will add your JS or CSS to the rest of the files already under the same category in different locations and then compile them into one single file. 

 

You can go to  http://localhost:4502/libs/granite/ui/content/dumplibs.html in your local and check for all the client libraries which gets included for a particular category. 

 

Veena_Vikram_1-1615658111359.png

 

 

Hope this helped.

 

Thanks

Veena