Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Adding custom JavaScript libraries to

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

07-10-2016

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,128 likes

Total Posts

6,133 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,128 likes

Total Posts

6,133 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

22-11-2016

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.

                
NameTypeValue
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

Answers (13)

Answers (13)

Avatar

Avatar
Validate 1
Level 2
tw99384403
Level 2

Likes

4 likes

Total Posts

16 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
Boost 3
View profile

Avatar
Validate 1
Level 2
tw99384403
Level 2

Likes

4 likes

Total Posts

16 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 3
Give Back
Boost 3
View profile
tw99384403
Level 2

04-12-2016

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.

Avatar

Avatar
Validate 1
Level 2
sixteenlabsinc
Level 2

Likes

7 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 1
Level 2
sixteenlabsinc
Level 2

Likes

7 likes

Total Posts

32 posts

Correct Reply

9 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 5
View profile
sixteenlabsinc
Level 2

22-11-2016

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.

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

12-10-2016

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.

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

12-10-2016

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.

Avatar

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile
workflowuser
Employee

10-10-2016

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"

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

10-10-2016

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?

Avatar

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile
workflowuser
Employee

10-10-2016

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

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

10-10-2016

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.

Avatar

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile
workflowuser
Employee

10-10-2016

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

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

10-10-2016

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?

Avatar

Avatar
Ignite 1
Level 7
GirishBedekar
Level 7

Likes

162 likes

Total Posts

232 posts

Correct Reply

36 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Level 7
GirishBedekar
Level 7

Likes

162 likes

Total Posts

232 posts

Correct Reply

36 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
GirishBedekar
Level 7

07-10-2016

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/

Avatar

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile

Avatar
Validate 10
Level 3
roberth55706517
Level 3

Likes

3 likes

Total Posts

101 posts

Correct Reply

7 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 5
View profile
roberth55706517
Level 3

07-10-2016

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.

Avatar

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 5
Employee
workflowuser
Employee

Likes

133 likes

Total Posts

443 posts

Correct Reply

70 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 50
Give Back 5
View profile
workflowuser
Employee

07-10-2016

 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