Use case: pass dynamic values in i18n and get them translated using Adobe Experience Manager (AEM) translator. Let’s say you want to show a pop-up message to end users with their name and the product’s name. You will need to use i18n so that the message gets translated based on the internationalization. The steps below […]
Experience Management
So You’ve Got Bugs, Huh?
Whenever you write JavaScript, you’re risking creating bugs. The risk of bugs increases proportionally as the amount of code and code complexity increases. There are ways to avoid bugs; I recommend ESLint, JSHint, or a language extension such as TypeScript to help reduce the introduction of bugs into your codebase. This post isn’t meant to […]
Reusable Components for a CMS, Using the Revealing Module Pattern
Before we get started, I recommend reading about the revealing module pattern and closure, if you’re not already familiar with them. When you are building components for use in a CMS, it’s important to understand that you have less control over the use of these components than you may initially think. Programming these blocks in such […]
No Matter What Anyone Tells You There’s No TouchUI Under /etc
I’m posting a little-known fact to save anyone else the frustration of banging their head against why this doesn’t work for a couple hours: Except for a few specific conditions, you cannot use TouchUI to edit any components under the /etc directory. There you have it! That’s really the crux of the blog post! Of […]
Using BEM-Style CSS Syntax in SCSS
Modular component styles are becoming significantly important in modern UI trends. Handling scalability while decreasing naming convention differences is a necessary step towards code cohesion. Disclaimer: I use a slightly modified flavor of BEM syntax, feel free to use traditional BEM, or some other flavor of your own. When developing UI components, specifically for use […]
AEM Touch UI Dialog Validation New Best Practice: Use Foundation-Validation
Oftentimes, AEM developers will be asked to develop a validator for the component dialog. Back in the Classic UI dialog days, you would probably write a JavaScript function for dialog before submitting an event. In Touch UI dialog, if you’ve Googled around, you probably found a lot articles/codes to use jQuery based validator, i.e. $.validator.register({}). Recently, I […]
Mastering the AEM Dispatcher Part 4: Sharing Content with SSI
We’re delving deeper into the AEM Dispatcher as we continue in the series, Mastering the AEM Dispatcher. In this post, we’ll discuss how to share content with non-AEM applications in the Dispatcher using SSI includes. Integrating AEM and non-AEM websites is tricky. To create a consistent look and feel, you need to share the stylesheets, header, […]
Mastering the AEM Dispatcher Part 3: Shared Configurations
This is the third post in the series Mastering the AEM Dispatcher where we delve into the mysteries of this opaque technology. In this post, we’ll discuss how to set up configuration variables in the AEM Dispatcher to reduce redundancy and make it easy to compare and sync configuration files across environments. The Starting […]
Things to Look Out for When Upgrading to AEM 6.3
If you have been using Adobe Experience Manager (AEM) to host your sites for a while, and are now looking to upgrade to AEM 6.3 (whether considering an in-place upgrade or a fresh new install), I am sure you’ve already found some good public documentation from Adobe. (If you are wondering if you should upgrade, here are […]
Mastering the AEM Dispatcher Part 1: Debugging the Dispatcher
Loch Ness, the Bermuda Triangle, and the AEM Dispatcher; three great mysteries of our time! Despite playing a critical role in Adobe project, the AEM Dispatcher is a black box. In this series of blog posts, I’ll tear back the veil concealing the AEM Dispatcher and help you master this essential tool! In this first post, we’ll discuss how to […]
RTE Validation for AEM 6.2, The Right Way
I’ve looked far and wide for an RTE validation solution that is straightforward and easy to share between teams. The examples I found online seemed like patches or half-solutions that would break in the next AEM version, or when used in complex dialogs. So I set out to write one myself following my newly acquired […]
How to Pass Page Properties to Angular Controller Through HTL
This article discusses different ways to pass dialog/ page properties rendered through HTL (Sightly) into AngularJS script (Angular Controller in our case). Note that we are not using Javascript Use-API here. Let’s say we have to access a page property foobar in our Angular Controller. One simple and quick way that might come to mind […]