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

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 listener's 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 components like component A is including other component B in it. So When any actions are on B, we can use this option to refresh A also.

REFRESH_PAGE: Using this value the page gets refreshed before or after the component has been inserted, deleted, edited, etc. Usually, people avoid doing 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 the 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 a few days ago regarding listeners.

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

There were some min and max for the item components and if the author throws 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 the author throws the 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 grandparent but not the parent.

Custom Listener to refresh grandparent:
I managed to write the logic for classic and touch UI so it can work 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();
}
};
}();