What I'd like to know is how to add custom clientlib script files to an adaptive form. Do I have to override the page component or can I just set the configuration to add the reference to the library when the page is built?
Solved! Go to Solution.
Hi
Please have a look at this Helpx article :- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
// Creating Custom Carousel components for Adobe Experience Manager
Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP.
To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
Name | Type | Value |
dependencies | String[] | cq.jquery |
categories | String[] | jquerysamples |
Read this article, this will help you.
Reference articles :-
Link:- https://helpx.adobe.com/experience-manager/using/integrating-custom-cq-widgets-third-party.html
// Integrating custom Adobe Experience Manager Component with third-party libraries
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Views
Replies
Total Likes
create your client lib add js and CSS files to your clientlibs folder . Add the newly created client lib 's category to the Adaptive Form . You will have to go to the adaptive form container and there is a property called client libs library. Set its value to the category of the newly created client lib
Views
Replies
Total Likes
What is the CQ name for this property? I have added the path to the client library in the clientLibRef property on the guide container but it doesn't load the script file. There is a reference to the path in the JSON string but nothing gets loaded.
Views
Replies
Total Likes
when you create your client lib, there is a property called categories
you can assign any name to this property
then use this name in the AF
suggest you read this link
http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/
Views
Replies
Total Likes
OK so what I have is a form that I've created. Then in the CQ, I have some javascript unter /etc/clientlibs/TestForm. On the guideContainer node under the form, I have set the clientLibRef to this path. The script is not loaded but I see a reference in the JSON string for the page.
The example shows the client lib added to a custom control then adding the clientlib under that control and then adding the inclusion to the JSP code for the control. So I am lead to assume that I also have to create a custom page control and add all of the references and code in the custom control. Is that correct?
Views
Replies
Total Likes
Add the client lib category as a property of AF using the AF ui
Views
Replies
Total Likes
Where is that property on the UI? I have set the client lib path on the "Client Library Category" field on the UI but it does not load the script.
Views
Replies
Total Likes
Not the path, just set the category name of the client lib there
Views
Replies
Total Likes
OK. So I'm more confused. I'm sure I'm missing something and it probably has a lot to do with internal jargon but could you give me an example of what a "category name" that would work will look like?
Views
Replies
Total Likes
Please follow the AEM documentation on creating client libs , it has all the details.I do not have the link handy but you could google "AEM client lib tutorial"
Views
Replies
Total Likes
Watching the tutorials, they have created custom controls and add code to the JSP page to load the clientlibs there. I thought the new forms were supposed to load your custom libraries based on the clientLibRef setting.
I tried again where I created a folder, then created an adaptive form and two form fragments. Also from this folder, I added a clientlibs folder of type cq:ClientLibraryFolder and added a property categories of String[] type. I set a value for the categories and added that to the clientLibRef property of the form. I see where there is a setting for this in the JSON string for the page but the custom script and styles are not loaded.
Views
Replies
Total Likes
It looks like I may have solved my problem. Part of it may have been that after all of the changes, I hadn't published the form.
Views
Replies
Total Likes
Hi
Please have a look at this Helpx article :- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
// Creating Custom Carousel components for Adobe Experience Manager
Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP.
To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
Name | Type | Value |
dependencies | String[] | cq.jquery |
categories | String[] | jquerysamples |
Read this article, this will help you.
Reference articles :-
Link:- https://helpx.adobe.com/experience-manager/using/integrating-custom-cq-widgets-third-party.html
// Integrating custom Adobe Experience Manager Component with third-party libraries
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Views
Replies
Total Likes
The best documentation to look at before getting into the more complex samples is the overview of how ClientLibs are created and implemented here: https://docs.adobe.com/docs/en/aem/6-2/develop/the-basics/clientlibs.html. I highly recommend you try to implement client libs in a "hello world" example using lots of "console.log("");" in your own code to make sure the code is actually executing. I'd avoid implementing ClientLibs into forms until you've got the concept working outside in a simple page because errors and events that don't fire as part of a form can be "hidden" from you. When script fails in a rule for example, you won't necessarily see anything in the console log. With a plain JSP page for example, you'll see all your events and messages uninterrupted.
In regards to the client library field in the forms UI, the best way to get to this is to switch to your form component view where you can see all your panels and objects, click on the root panel, then click on the configure wheel that appears when the panel is selected. Alternatively (and more simply), switch to classic view and then edit the main panel.
Views
Replies
Total Likes
Hi,
Here are the detailed steps required to get this to work ...
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies