CQ5.x: How to create a custom widget client-library

Question

How is it possible to create a custom widget client-library that provides new or modified WCM functionality?

Answer, Resolution

CQ5 provides an interface to add new JavaScript functionality to the WCM authoring interface through the Ext.JS framework. These so-called client-libraries provide the following:

• add custom functionality or
• override and extend existing features

Create custom client-library

The next steps outline what is required to build a custom client-library.

• Goto CRXDE Lite (e.g. http://<host>:<port>/crxde)
• Create a node with type cq:ClientLibraryFolder, e.g.
  • /apps/myapp/ui/mylib
• set the String property sling:resourceType to widgets/clientlib
• set (multi-value) property categories to one or more of the following

• if required, set (multi-value) String property dependencies to other client-libraries in the system
• save all changes

Overlaying / Adding widgets

• Create a source folder below the client-lib node, e.g.
  • /apps/myapp/ui/mylib/source
• Create a file for each JS class and widget override, e.g.
  • /apps/myapp/ui/mylib/source/MyWidget.js
  • /apps/myapp/ui/mylib/source/override/ComponentList.js
• Create a file js.txt to include above created files in the custom client-lib:

#base=source
MyWidget.js
override/ComponentList.js

• save all changes

CQ5 automatically observes changes to a client-library in the repository and will re-register this library for subsequent usage in the corresponding category, e.g. when editing a page. Attached is an example CQ content package that does the following:

• add custom client-library /apps/myapp/ui/mylib
• category cq.wcm.edit
• overwrite default values of the component-list in the SideKick
  • default max number of component groups to be shown
  • default min number of components required for a group

Applies to

CQ5.x