{"id":9425,"date":"2024-07-16T09:24:09","date_gmt":"2024-07-16T09:24:09","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9425"},"modified":"2024-09-03T12:36:08","modified_gmt":"2024-09-03T12:36:08","slug":"how-to-add-listeners-in-aem","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/glossary\/aem\/how-to-add-listeners-in-aem\/","title":{"rendered":"How to Add Listeners in Adobe Experience Manager (AEM)"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<p class=\"wp-block-paragraph\">Adobe Experience Manager&nbsp;(AEM) is a comprehensive content management solution for building websites, mobile apps, and forms. It is a part of Adobe\u2019s Marketing Cloud, which includes other products like Analytics, Campaign, Target, and Social. Among AEM\u2019s many features, one key aspect is the ability to add \u201clisteners\u201d. But what does this mean and how do we do it? This guide aims to answer these questions and more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Listeners&nbsp;in AEM are event handlers that respond to various user or system actions.<\/li>\n\n\n\n<li>They can be implemented in both client-side (JavaScript) and server-side (Java).<\/li>\n\n\n\n<li>Listeners provide a way to customize and enhance the user experience in AEM.<\/li>\n\n\n\n<li>Different types of listeners can be added for different types of events.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">The Concept of Listeners in AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A \u201clistener\u201d in AEM is a piece of code that waits for certain events to occur, and then performs a specific action in response. These events can be anything from user interactions, such as clicking a button, to system events like page loading or unloading.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Listeners are a fundamental concept in event-driven programming, which is a programming paradigm where the flow of the program is determined by events such as user actions, sensor outputs, or messages from other programs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Role of Listeners<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Listeners play a crucial role in enhancing the interactivity and user experience of AEM websites. They allow developers to create custom responses to user actions, or automate specific tasks based on system events.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you may want to display a welcome message when a user lands on a page (a system event), or collect form data when a user clicks a&nbsp;submit&nbsp;button (a user action). These are just some of the many possibilities that listeners provide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Client-side Listeners<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Client-side listeners are created using JavaScript. They are typically used to handle user interactions in the browser. Here\u2019s an example of how you can add a click listener to a button in AEM:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">javascriptCopy<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$('.button-class').click(function() {\n    \/\/ Code to run when button is clicked\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the above code, <strong>$(&#8217;.button-class&#8217;)<\/strong>selects the button with the class <strong>button-class<\/strong>, and&nbsp;<strong>.click()<\/strong> adds a click listener to it. The function inside <strong>.click()<\/strong>&nbsp;specifies what should happen when the button is clicked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Server-side Listeners<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Server-side listeners are created using Java and are typically used to handle system events in AEM. Here\u2019s an example of how you can add a server-side listener in AEM:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Component(service = ResourceChangeListener.class, immediate = true)\npublic class CustomListener implements ResourceChangeListener {\n\n    @Reference\n    private ResourceResolverFactory resourceResolverFactory;\n\n    private ResourceResolver resourceResolver;\n\n    @Activate\n    protected void activate() throws LoginException {\n        resourceResolver = resourceResolverFactory.getServiceResourceResolver(\n            Collections.singletonMap(ResourceResolverFactory.SUBSERVICE, \"datawrite\"));\n    }\n\n    @Deactivate\n    protected void deactivate() {\n        if (resourceResolver != null &amp;&amp; resourceResolver.isLive()) {\n            resourceResolver.close();\n        }\n    }\n\n    @Override\n    public void onChange(List&lt;ResourceChange&gt; changes) {\n        for (ResourceChange change : changes) {\n            if (change.getType() == ChangeType.ADDED || change.getType() == ChangeType.CHANGED) {\n                \/\/ Handle the added or changed resource\n                String resourcePath = change.getPath();\n                \/\/ Your custom logic here\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this Java code, a new service is created that implements the <strong>EventListener<\/strong>&nbsp;interface. The <strong>activate()<\/strong>&nbsp;method is called when the service is activated, and the <strong>deactivate()<\/strong>&nbsp;method is called when the service is deactivated.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Listener Types in AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are different types of listeners that you can add in AEM, depending on the type of event you want to handle. Here\u2019s a brief overview:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Listener Type<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>Click<\/td><td>Triggered when a user clicks on an element.<\/td><\/tr><tr><td>Change<\/td><td>Triggered when the value of an input field changes.<\/td><\/tr><tr><td>Load<\/td><td>Triggered when a page or an element has finished loading.<\/td><\/tr><tr><td>Unload<\/td><td>Triggered when a page or an element is unloaded or navigated away from.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">In Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Listeners in AEM are a powerful tool for creating responsive and interactive user experiences. By understanding and utilizing listeners effectively, developers can create more engaging content and applications on the AEM platform. Whether it\u2019s client-side or server-side, understanding how to add and use listeners can greatly enhance your\u00a0<a href=\"https:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/\">AEM development<\/a>\u00a0skills.<\/p>\n","protected":false},"author":12,"featured_media":5015,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"glossary-category":[43],"class_list":["post-9425","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Listeners"},"_links":{"self":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":4,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9425\/revisions"}],"predecessor-version":[{"id":9787,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9425\/revisions\/9787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media?parent=9425"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-category?post=9425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}