OOTB/Custom cq:listeners In cq:editConfig Node In AEM

Hello Everyone,

Today In this blog we will talk about cq:listeners in editConfig (node type cq:EditConfig) node in AEM components.The cq:listeners node (node type cq:EditListenersConfig) defines what happens before or after an action on the component.

So you must have been seen many values corresponding to actions (i.e., afterinsert, afterdelete, aftermove,afteredit) of a component.

The following table defines its possible properties:

Properties	Description of each Property
beforedelete	The handler is triggered before the component is removed.
beforeedit	The handler is triggered before the component is edited.
beforecopy	The handler is triggered before the component is copied.
beforeinsert	The handler is triggered before the component is inserted.
beforechildinsert	The handler is triggered before the component is inserted. Only operational for the touch-enabled UI.
beforemove	The handler is triggered before the component is moved.
afterdelete	The handler is triggered after the component is deleted.
afteredit	The handler is triggered after the component is edited.
aftercopy	The handler is triggered after the component is copied.
afterinsert	The handler is triggered after the component is inserted.
afterchildinsert	The handler is triggered after the component is inserted inside another component (containers only).
aftermove	The handler is triggered after the component is moved..

For nested components, the values of the following properties must be REFRESH_PAGE:

• aftercopy
• aftermove

There are some predefined values corresponding to the above listeners  properties:

• REFRESH_SELF
• REFRESH_PARENT
• REFRESH_PAGE
• REFRESH_INSERTED

The detailed description of the most probably used listener properties has been written below.

REFRESH_SELF: Using this value the component gets refresh before or after the component has been inserted,deleted,edited etc.This is being used when the component is individual and not having any dependency on any component.

REFRESH_PARENT:Using this value the component parent gets refresh before or after the component has been inserted,deleted,edited etc.This is being used when the component is having any dependency on other component like a component A is including other component B in it. So When any actions on B, we can use this option to refresh A also.

REFRESH_PAGE:Using this value the page gets refresh before or after the component has been inserted,deleted,edited etc.Usually people avoid to do this action as every time you are doing any action on a component, if the whole page gets refreshed, then it's so annoying and it takes time for author also to do authoring.

Fig -1 : cq:listeners node in cq:editConfig

The event handler can be implemented with a custom implementation. It means that we can also write our custom methods corresponding to the predefined properties.

For example:

afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

Here I wanna talk about one problem statement which i faced few days ago regarding listeners.

Problem Statement: There was a container component which includes a parsys and I want to throw an “item component” under the parsys of container component.

There was some min and max for the item components and if author throw less or more components than the expectations, then the container component shows a message like please throw minimum or maximum item components. Now the issue was when author throw item component, it doesn’t refresh the container component.

So the hierarchy is like:

+--container     +--parsys        +--item        +--item        +--item

So what i tried is, I was trying to REFRESH_PARENT on “item component” cq:listeners but this only refresh parsys but not the container component. Then what to do? So to conclude the problem is I was supposed to refresh the grand parent but not the parent.

Custom Listener to refresh grandparent

I managed to write the logic for classic and touch UI so it can work in both for the same component. So we need to make two clientlibs one for classic (with categories “cq:widgets”) and one for touch (categories “cq.authoring.dialog”). In AEM 6.4, use “cq.authoring.editor” in place of “cq.authoring.dialog”.

Fig -2: Custom listeners

Function to call custom listener from cq:listeners node:

function(path, definition) {    CQ.Myproject.Component.superParentRefresh(this); }

Listener for Touch UI:

(function($, ns, channel, window, undefined) {    "use strict";    window.CQ.Myproject = window.CQ.Myproject || {};    window.CQ.Myproject.Component = window.CQ.Myproject.Component || {};    var superParentRefresh = function(cmp) {        ns.edit.actions.doRefresh(cmp.getParent().getParent())        return true;    };    window.CQ.Myproject.Component.superParentRefresh = superParentRefresh; }(jQuery, Granite.author, jQuery(document), this));

Listener for Classic UI:

CQ.Myproject.Component = function() {    return {        superParentRefresh: function(cmp) {            var parent = cmp.getParent();            parent.getParent().refresh();        }    }; }();

Demonstration Video On OOTB/Custom cq:listeners in cq:editConfig node:

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!

Thanks and Happy Learning.