Adding custom JavaScript libraries to

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.

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.

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.