How do I add a global javascript and css to a whole page that uses a predefined template in Adobe CQ5? | Community
Skip to main content
O
Oliverblaster
Level 2
October 16, 2015
Solved

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

  • October 16, 2015
  • 5 replies
  • 2206 views

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]

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by PaulMcMahon

    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. 

    5 replies

    R
    rcotta
    Level 2
    October 16, 2015

    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!

      smacdonald2008
      smacdonald2008
      Level 10
      October 16, 2015

      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? 

      O
      OliverblasterAuthor
      Level 2
      October 16, 2015

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

      P
      PaulMcMahonAccepted solution
      Level 8
      October 16, 2015

      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. 

      J
      Adobe Employee
      JustinEd3Adobe Employee
      Adobe Employee
      October 16, 2015

      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

      Terms & ConditionsAccessibility statement

      Loading footer...