Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How do I add a global javascript and css to a whole page that uses a predefined template in Adobe CQ5?

Avatar

Level 2

I want to Send data via AJax call to serlvet, the serlvet will return some result based to which I will redirect to a page. So where do I add this global .js file i.e the file that contains the AJAX call. PLEASE NOTE I'M USING PREDEFINED FORM COMPONENT AND A PREDEFINED TEMPLATE(Form Template) SO I CAN'T DO STUFF LIKE <cq: includeClientLibs> as I don't have source code of component(form template).

I found a link where we add a global JS but I don't have this option in my CQ5 instance.

So Weird.http://www.sfu.ca/itservices/cms/howto/advanced/style-a-page/customjavascript.html

[img]weird.PNG[/img]

1 Accepted Solution

Avatar

Correct answer by
Level 8

My preferred approach for this type of requirement (page specific CSS/JS) is to do the following:

  1. Have a location in your application to store these page specific files - so in your example /etc/clientlibs/my-project/my-page-specific-libs
  2. Then for each file or set of files create a client library - so for example /etc/clientlibs/my-project/my-page-specific-libs/file1-lib - and make it an actual client lib.
  3. Add a multi-value property to your template's page property - have it be a pathfield that starts at /etc/clientlibs/my-project/my-page-specific-libs and has a predicate to limit selections to client libraries. 
  4. In your head.jsp check this property and if there are value iterate over them and do a <cq: includeClientLibs> for the client lib. You will have to fetch the category from the node selected but that's doable. You could also adopt a naming convention that said the category will always be the same as the node name in which case you could avoid doing the repository read. 

Now you get the benefits of the client library framework but it can still be page specific. 

View solution in original post

5 Replies

Avatar

Level 2

Hi,

I was about to post this question here in the forum, as I have the same problem as you, but for a distinct reason: I need to include some Javascript files that varies accordingly to the **page**, and not by templates.

For example, I have page-1 using file1.js, page-2 using file2.js, but both use template-A (and this does not let me use the client library).

What I did is to place my files inside /etc/clientlibs/my-project/my-custom-static-files-folder/file1.js, although my-custom-static-files-folder is not actually a client library, but just a folder to place those files.

And on the pages, I include the reference to the file placed inside the folder, like <script src="/etc/clientlibs/my-project/my-custom-static-files-folder/file1.js" ...>.

The bad part of this approach is that I can't take advantage of AEM's minification capabilities for those files.

If someone has a better approach, please let us know!

Avatar

Level 10

The typical way is to use clientlibs and  <cq: includeClientLibs> to include JS libs and CSS. I have always used this standard way. However - i will research a way to do this without using clientlibs. 

What version of CQ are you using? 

Avatar

Level 2

I would like to know how to do this in CQ 5.5 and 5.6

Avatar

Correct answer by
Level 8

My preferred approach for this type of requirement (page specific CSS/JS) is to do the following:

  1. Have a location in your application to store these page specific files - so in your example /etc/clientlibs/my-project/my-page-specific-libs
  2. Then for each file or set of files create a client library - so for example /etc/clientlibs/my-project/my-page-specific-libs/file1-lib - and make it an actual client lib.
  3. Add a multi-value property to your template's page property - have it be a pathfield that starts at /etc/clientlibs/my-project/my-page-specific-libs and has a predicate to limit selections to client libraries. 
  4. In your head.jsp check this property and if there are value iterate over them and do a <cq: includeClientLibs> for the client lib. You will have to fetch the category from the node selected but that's doable. You could also adopt a naming convention that said the category will always be the same as the node name in which case you could avoid doing the repository read. 

Now you get the benefits of the client library framework but it can still be page specific. 

Avatar

Employee

Hi,

If the page component includes client libraries by category, you can create a new client library with the *same* category as an existing client library. You must have the source of the components. Aren't they just in JSP scripts in /apps/<something> ?

Justin