AEM CQ:Listeners Node Tutorial

AEM, Tutorial

The purpose of this tutorial is to show you how to add the “cq:listeners” node to a component so when the component is modified the page will automatically refresh. You can read more about “cq:listeners” from a previous post I made here: cq:listeners node

For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

In order to follow along with this tutorial, you will need to have complete the following tutorial:

ShareThis Component Tutorial

If you have not completed the tutorial listed above, you can download a package from GitHub that has the completed component from here: ShareThis-AEM-Component. Just follow the instructions in the “readme” file to install the package into your instance of AEM.

If you have completed the previous steps, we can get started.

  1. Once your instance of AEM is up and running, navigate to crxde lite. Navigate to the “shareThis” component in your projects “components” folder.

  2. Right click on the component and choose “Create Node”. Enter the following information:
  • Name: cq:editConfig
  • Type: cq:EditConfig

3. On the node you just created, right click and choose "Create Node". Enter the following information:
  • Name: cq:listeners
  • Type: cq:EditListenersConfig

4. On the "cq:listeners" node that you just created, add the following property:
  • Name: afteredit
  • Type: String
  • Value: REFRESH_PAGE

5. Now, open the web page the has the "ShareThis Component" on it. If you click on the component to open the dialog box, and click the "OK" button, you will see that the page will automatically refresh.

Summary: This tutorial showed you how to add the "cq:listeners" node to a component and how to use the "afteredit" property to refresh the page when the component is modified.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: ShareThis Component 1.1