Granite UI, Touch UI helpPath
helpPath typically refers to a configuration property that defines the path to the location where help content or documentation is stored within the AEM repository. The helpPath configuration property is often used in AEM components or templates to specify the location where users can access contextual help documentation related to the specific component or template. […]
Sling Resource Merging Properties
In the realm of AEM developers have a powerful tool at their disposal that allows for seamless customization—Sling Resource Merging. This feature might sound a bit technical, but fear not! In this article, we’ll break down the key aspects of Sling Resource Merging and delve into its properties, showing you how they can simplify your […]
Granite UI, Touch UI trackingFeature
In Adobe Experience Manager (AEM), the terms “tracking code” and “tracking feature” are used to refer to elements that help you gather analytics data about the usage and performance of components or features within your AEM instance. Let’s break down what each term means: 1. Tracking Code The term “tracking code” generally refers to a […]
How to Enable AEM Style System Configuration for Components
AEM Style System enables a user-friendly interface, for non-technical users who can easily make style adjustments, fostering creativity and agility. Integrating seamlessly with Adobe Experience Manager, the AEM Style System enables content authors to apply predefined styles effortlessly, maintaining brand consistency across platforms and devices. As developers are trying to create new AEM component’s this […]
AEM Touch UI (Granite UI) Tabs: Example Code
Almost all components require developers to put together the Touch UI experience with tabs as the base of their components. It’s a simple XML code configuration, however, sometimes finding the reference isn’t that easy to find online. This article is just a simple reference article where I share the configuration as XML, so it can […]
AEM Touch UI Show Hide Tabs by Style System Configuration
It’s no doubt that AEM’s Style System for Components has become more popular over the past few years, and is used by almost every author in this industry. However, there are some feature flaws in the product for the authoring experience, where sometimes we would like to show or hide Touch UI tabs depending on […]
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 […]
AEM Granite UI Coral 3 Number Field Default Value
This article is for how can we set the default positive or negative integer value for the Granite UI 1.0 Coral 3 numberfield, granite/ui/components/coral/foundation/form/numberfield. Apparently the Granite UI 1.0 documentation for the granite/ui/components/coral/foundation/form/numberfield, does not support default value configuration for the numberfield. Keep reading… I mean, they do… you can set a default value for […]
AEM Granite UI Multifield Maximum Items Validation
For almost all cases of AEM implementations, adding validation for maximum items for the Granite UI Multifield is a must. In this article, we will put together a script that will register a new validator (foundation.validation.validator) to the foundation-registry (the foundation-registry is used in the Granite UI framework). In this solution, we will be utilizing […]
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 […]
Granite UI Multifield Sightly Traverse | Iterate Simple Example
In this article, we will share an example on on how we can iterate and traverse through multifield nodes that have been generated by the Touch UI using Sightly in a very simple way. Going through this article, we will be setting up multifield Granite UI links (as if we are building a menu navigation). […]
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 […]
How to Write AEM Reusable Touch UI, Granite UI Configuration
Why are we repeating ourselves, writing the same Touch UI (Granite UI Component) configuration again and again as developers? It’s been like the 10th time that we have created a Granite UI Component configuration, an identical block of code. The RTE Granite UI Component should only contain basic format options. Is there a way for […]
ACS Commons multi-field extension, acs-commons-nested, checkbox is not working
This article will provide a solution to the ACS Commons multi-field extension, checkbox Granite UI Component. While utilizing the ACS Commons multi-field extension, for everything I tried, I am not able to get the checkbox Granite UI component working as expected. Not an elegant way to solve the problem, but something that actually works and […]
AEM RichText Remove P Tag, removeSingleParagraphContainer, for Touch UI
You may have been trying to search the internet for an out of box solution to remove the single paragraph container for Touch UI, and have found something like removeSingleParagraphContainer. But however, this attribute was for the Classic UI and deprecated. From my knowledge, there isn’t anything out of the box that can remove the […]
AEM RichText TouchUI, Enabling Code Editor, Source Edit
Sometimes we need to give our power content authors, the flexibility to review their HTML markup from the richText editor, so they can ensure that the semantics are looking as expected. As AEM developers we are summoned to enable and deliver this requirement. In this article, I will provide a code example on how we […]
DRY way of using RichText Granite UI Component in AEM for Static Templates
Every developer have experienced a situation where they are working with AEM multiple AEM components, where Touch UI dialogues consist of a common richtext Granite UI component configuration cq/gui/components/authoring/dialog/richtext. When I mention common richtext Granite UI component, I mean there are multiple AEM components that will have the richtext Granite UI component as one of […]
Re-usable Color Select in Touch UI Dialogs w/ ACS Common’s Generic Lists
While working on AEM component’s Touch UI dialogues, in particular, with colors, there are many cases where developers will need to configure the same color options over and over again. We catch ourselves repeating code, which becomes uneasy to maintain changes to the color options. What happens when there is a new color option? Going […]
AEM RichText Max Characters Length Validation
In this article, we will take a look at how we can add max character length validation to the richtext component, cq/gui/components/authoring/dialog/richtext, by introducing a maxlength attribute. The validation will be executed whenever AEM authors try to save or perform an on-key-up action after applying changes within the richtext input field. After implementing the solution, […]
Creating a Basic AEM Touch UI Dialogue
In this article, we will step through the steps of creating a new Touch UI dialogue configuration within your AEM maven project. Code examples will showcase a basic Granite UI form container & component. Create basic Touch UI Dialogue Within your AEM maven source code, create create a “_cq_dialogue” folder under your targeted component. Example: […]
How to Convert Adobe’s Granite UI 1.0 Documentation to XML
As an AEM developer, we must prepare Touch UI dialogues within code, in the XML format. When it comes to reading the Granite UI 1.0 Documentation, it can be confusing; especially for new AEM developers. These new AEM developers are confused by how properties within the documentation are mapped and converted to XML entries. This […]
AEM Granite UI 1.0 Form Component’s XML Cheat Sheet Reference Guide
This AEM Granite UI 1.0 Form Component’s XML Reference Guide provides code snippets to help developers speed up their AEM Touch UI development. This quick reference includes the most used Granite UI form components with plug and plays XML examples. Note: If you want to understand how to convert Granite UI 1.0 Form Components from […]
