Adding custom JavaScript libraries to

[roberth55706517]

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?

[workflowuser]

 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

[roberth55706517]

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.

[GirishBedekar]

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/

[roberth55706517]

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?

[workflowuser]

Add the client lib category as a property of AF using the AF ui

[roberth55706517]

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.

[workflowuser]

Not the path, just set the category name of the client lib there

[roberth55706517]

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?

[workflowuser]

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"

[roberth55706517]

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.

[roberth55706517]

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.

[kautuk_sahni · Accepted 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

[sixteenlabsinc]

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.

[tw99384403]

Hi,

Here are the detailed steps required to get this to work ...

• In CRX DE, create a node of type sling:Folder under etc/designs folder, which I named same as my project
• Under that folder create another node of type sling:Folder node named clientlibs
• Under that folder, create a node of type cq:ClientLibraryFolder, which I named same as my form (if you have more than one form for this project, you would have a directory for each form under clientlibs parent folder).
• On this node (of type cq:ClientLibraryFolder) add property 'categories' of type String[] (select String as Type and click on 'Multi' to make type a String array) and set value to your category name (this is the name you will set as value on 'Client Library Category' in your adaptive form).
• Copy clientlib sub-directory structure from a working reference site, e.g. geometrixx-media, containing  cs.txt, js.txt and referenced 'css' and 'js' subfolders (make sure to save your changes to repository before copy and pasting to your newly created clientlib folder or you will get a 404 not found error).
• Clean out unused css and js files and rename to your preference, then edit js.txt and css.txt to point to your renamed files.
• To call your custom js function add function call to a rule defined on, e.g. a button on your adaptive form.