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

Category Name Description
cq.wcm.admin SiteAdmin and Tools
cq.wcm.edit ContentFinder and edit page
cq.dam.admin DAM Admin
cq.dam.edit DAM AssetShare, AssetEditor

  • 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

تنزيل

 Adobe

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟

Adobe MAX 2024

Adobe MAX
مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX

مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX 2024

Adobe MAX
مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت

Adobe MAX

مؤتمر الإبداع

في الفترة من 14 إلى 16 أكتوبر في ميامي بيتش وعبر الإنترنت