Adding custom JavaScript libraries to | Community
Skip to main content
roberth55706517
roberth55706517
Level 4
October 7, 2016
Solved

Adding custom JavaScript libraries to

  • October 7, 2016
  • 14 replies
  • 16513 views

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?

    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 kautuk_sahni

    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

    14 replies

    W
    Adobe Employee
    workflowuserAdobe Employee
    Adobe Employee
    October 7, 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

    roberth55706517
    roberth55706517Author
    Level 4
    October 7, 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.

    G
    GirishBedekar
    Level 8
    October 7, 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/

    roberth55706517
    roberth55706517Author
    Level 4
    October 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?

    W
    Adobe Employee
    workflowuserAdobe Employee
    Adobe Employee
    October 10, 2016

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

    roberth55706517
    roberth55706517Author
    Level 4
    October 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.

    W
    Adobe Employee
    workflowuserAdobe Employee
    Adobe Employee
    October 10, 2016

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

    roberth55706517
    roberth55706517Author
    Level 4
    October 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?

    W
    Adobe Employee
    workflowuserAdobe Employee
    Adobe Employee
    October 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"

    roberth55706517
    roberth55706517Author
    Level 4
    October 12, 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.

    Show more replies
    Terms & ConditionsAccessibility statement

    Loading footer...