i.e. If you define multiple values for this property then this set of JS & CSS belongs to all of these defined categories & wherever you use any of these category this set of JS & CSS will be present there.
NOTE : Name of final JS file will be same as parent client lib name. i.e. main.js or main.min.js (if minified) option is clicked in HTML Service.
5). All categories defined in this property must be in the same order in which you want to add them in main client library. i.e.
if there are four client libs c1, c2, c3, c4 & you want them to be added in c3, c2, c1, c4 sequence in main client library then just maintain the same order in this field so that these client libraries will be added in the same manner.
i.e. if you have embed property value in the given order with simple alert message. c1, c2, c3, c4 then first c1 alert will be executed then c2 alert then c3 then c4 & at the end main.client.lib JS file that embed these categories alert will be executed.
1). It is multivalued property.
if you want to perform some JS functionality only for ie6 not for other browsers, or you want to add some CSS or JS for only touch UI. then this channel property comes into picture.
I will give you a demo for this property for this in my main client library just add channel property & it's values as "touch" as shown in figure -
effect of adding this property is :-
As I added this property to my main client library so the main.min.js or main.js will not be available for desktop system.
I have added three alerts in these three client libs as given below -
main.js - " Main js working fine"
dependency.js - "dependency is working fine"
embed.js - "embed is working fine"
as embed is a part of main.min.js or main.js (if not minified) so you don't get two alerts for main.js as well as for embed.js but for dependency.js, I will get an alert as it is not a part of main.min.js or main.js file.
Use Case for this property -
If you want to achieve some functionality for touch only devices then just create two client libraries with same category name & in first client lib add common code for all channels & in second client lib use this property channels and set it's value as touch. So that for touch devices both of these client libs are loaded and you will get your desired functionality. For non touch devices only first client lib is loaded as second have this channel property it will not be available here.
I have used four values for this property ie6, extjs, touch & negation of these values.
Note: I have checked this functionality only for ie6, extjs, touch, !touch.
AEM provides a UI for debugging a tool for identifying all the JS, CSS & themes related to a particular client lib. you can find it at -
when you hit this URL you will see a screen where you can enter a client lib category name and it will show you How this client library CSS & JS file will be available in different modes. As show in fig. -
It will show which CSS files and which JS file are included in this category with there dependency file name as well as their embedded file name. Also show the channel value.
Adobe CQ HTML Library Manager Service configuration
Go to Felix console ->> Configuration tab -> search for "HTML Manager Service" yow will get a screen as -
All properties are self explanatory.
reference documentation -