CQ 5

Multifield is an important xtype which provides flexibility as we saw in the previous post around Multifield with custom xtype. It is good to have flexibility but becomes a bigger challenge in bigger editorial team environments where rules need to be defined to lock down flexibility. Adding validation is one way of locking down flexibility, providing cleaner content entry environment. To extend the previous example around defining custom type with multifield, we need to add “listeners” node under multifield. Then add an attribute called “beforeadd” and specify its value as a Javascript function. As an example: < linkspanel jcr:primaryType="cq:Panel" border="false" height="" title="Links" width=""> < items jcr:primaryType="cq:WidgetCollection"> < links jcr:primaryType="cq:Widget" fieldDescription="Press + to add more links" fieldLabel="Links" hideLabel=

When started working with CQ, one of the cool feature was the list component which allow to add new paths with the plus “+” sign. Based on my experience, it is one of the mandatory requirement to provide such flexibility, then setting a fixed number of text fields. To achieve the same, please refer to the steps below: Within your app project, define a folder called “clientlib”. Create a text files called “js.txt” and specify the name of the js file which holds the custom xtype definition. Example: #base=js CustomPathField.js Define your js file which extends CQ.form.CompositeField and specify attributes required for the custom type. Here is an example for the same: /** * @class MyClientLib.CustomPathFieldWidget * @extends CQ.form.CompositeField * This is a custom path field with link text and target * @param {Object} config the config object */ /** * @class Ejst.CustomWidget * @extends CQ.form.CompositeField This is a custom widget based o

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  folde