Ad Code

Saturday, January 26, 2019

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.

15 comments:

  1. Hi Shivani,

    i have a requirment to add crop,rotate,resize image in rteplugins .Is there any possibility of doing this?i tried doing it through inplace editing .but its not working.

    ReplyDelete
  2. Hi Geetha,

    I dont think that rtePlugin can have this feature as I checked online also I don't think it is possible. If you are using Image Widget individually then cropping,resizing is possible.

    ReplyDelete
  3. I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. relojes personalizados de pulsera

    ReplyDelete
  4. I want to learn course of aem
    Are u ready to teach me?
    If k please contact 9840482433 what's up

    ReplyDelete
  5. I am impressed. I don't think Ive met anyone who knows as much about this subject as you do. You are truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog you have got here. custom writing service

    ReplyDelete
  6. This is one awesome blog.Really looking forward to read more. Really Great. thestylishman.com

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Superb blog. :) It was a great help

    ReplyDelete
  9. Hello Shivani. Is it possible to insert child nodes dynamically based on data entered in the component? for e.g Based on number of tabs for an accordion I would like to provide multiple parsys components. How ever HTL does allow us to manage this because it doesn't care if parys already existed or not. How ever I would like this data to be available in Sling Exporter and be able to use it for SPA Editor or Content Services use case. So we are speaking of use cases that doesn't involve Sightly but still use Headless AEM. Please advise. Thank you !

    ~Mahidhar Ch

    ReplyDelete
  10. HI. AFter edit my components, the respective jquery is not getting loaded.. after i refresh the page only, my jquery getting loaded.. can u pls help?

    ReplyDelete
  11. Hi Shivani,

    Please let us know how the clientlib in container is called in item component. It'll be helpful if u show sightly part of Item component i.e, item.html

    ReplyDelete
  12. No need to call clientlibs via sightly. The clientlibs categories mentioned above call itself in author environment by default.

    ReplyDelete
  13. thank you, this is way better than official shit documentation

    ReplyDelete
  14. Hi Shivani,
    Thanks a lot.
    My component grandparent refresh occurred perfectly with your code.
    But when i copy pasted it onto next parsys i get the following error
    An error has occured during afterinsert listener: Cannot read property 'slingPath' of undefined -> TypeError: Cannot read property 'slingPath' of undefined.

    Can you help?

    ReplyDelete