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 […]
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 […]
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 […]
AEM Client Library Debugger & Client Library Test Tool
A quick way to validate your AEM client libraries via registered clientlib categories is by using the AEM, out-of-the-box, “AEM Client Library Debugger Test Tool”. The tool is very bareboned. When you are on the tool page, you’ll find a Categories input field. Simply insert your to-be-tested clientlib category value here and press “submit”. Your […]
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, […]
3 Different Ways to Embed Custom Fonts in AEM Sites
In this article, we will go through three different ways how you can embed custom fonts in an AEM site. Embed Custom Font using Google Fonts, CDN Embed Custom Font using Adobe Fonts, CDN Embed Font via AEM Client Library Static Asset Importing fonts from other services such as Google Fonts or Adobe fonts could […]
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 […]
How to Serve Static Assets in AEM as Client Library Resources
This article provides step by step instructions on how to create a client library, to only serve structural static assets as client library resources. Resources from this article will build upon the latest maven AEM Project Archetype, and the instructions below will demo the configuration setup within the code. Mention! Learn more about the reasons […]
Structural Static Assets in AEM as Client Library Resources
As developers, when we are building components or view logic, in typical scenarios require assets like background image patterns, icons, logos, typography, etc.. These assets are considered as structural assets. Structural assets are assets that support CSS styles or JavaScript view logic; which are also static assets. Structural assets should be stored and managed within […]
