Execute JavaScript in the Author Environment for AEM Components AEM 6.5+
To execute JavaScript specifically for the AEM Author Environment, developers can add a condition to check for a Cookie stored in the browser, ‘cq-authoring-mode’; this works on AEM 6.5+. When the Cookie of ‘cq-authoring-mode’ exists, then execute JavaScript during authoring on the editor.html. Only in the Author Environment, the Cookie, ‘cq-authoring-mode’, will exist. Below is […]
Webpack Dev Server ^3.9.0 unable to POST (send data to server)
While working on the web pack dev server (version ^3.9.0), you may have changed some configurations with the proxy configuration, so you can proxy specific paths like /api or /bin to refer to a server of your choice; in this example, we are referencing to our AEM local environment in localhost:4502. While making server calls, […]
Race Conditions with window.Granite?.I18n
We have created a JavaScript micro-frontend in VueJS to handle a new feature for our website. The JavaScript micro-frontend is set up nicely inside of a maven module. Along with it’s own Node Package Manager configuration, we used the aem-clientlib-generator to generate a client library under /apps/sourcedcode/clientlibs/micro-frontend. Within our VueJS application, we have a utility […]
What are AEM ExtraClientlibs?
When dealing with cq:ClientLibraryFolder (node type), you may have come across a property called extraClientlibs. What are extraClientlibs and how does it work? As you may recall, when you want to add custom functionality or styling to the Touch Dialogues (in edit author mode, editor.html), we must include cq.authoring.editor.sites.page as a dependency and cq.authoring.editor.sites.page.hook as […]
Add AEM Custom Frontend CSS JavaScript Editor.html
I would like to re-share one of my existing blog articles on how to add a custom client library for the AEM Author Editor (editor.html). It’s a very simple configuration that requires one dependency and one client category. This method is specific to customizing page authoring in AEM. Click on this link for exactly how […]
Adding Custom Client Library for AEM Author Editor Touch UI
You can use Clientlibs to extend the default implementation and add new functionality while reusing the default functions, objects, and methods. When customizing, you can create your own clientlib under / apps. Specifically, when you want to add CSS or JavaScript to your AEM Author Editor, Touch UI Dialogs, you would want to create a […]
Revealing Module Pattern in JavaScript, Jquery, for AEM Client Libraries
This is a reference to the code that I have written. I call this my version of the perfect AEM JavaScript Jquery Component that uses the Revealing Module Pattern. The Revealing Module Pattern in JavaScript is a design pattern that helps us organize our JavaScript in modules. This pattern makes it possible for us not […]
With HTL, Pass Data from AEM Backend to Javascript
When working with AEM components, it’s very common to pass data from AEM backend to a particular JavaScript event. In this article, we will be focusing on how to pass data from AEM backend using the HTML data-* attribute. HTML data attributes were designed apart of HTML5 where these attributes allow developers to store data, […]
How to include JavaScript for an AEM Website
Adding behaviour to a form, button, list of items, or page scroll are some examples of front-end user interactions that we as developers must implement, to enable user rich experiences. How do we add behaviours to a page? JavaScript! JavaScript is the technology used to add user rich experiences for a website. AEM website can […]
