Adobe Experience Manager (AEM) Basics

Install Adobe Experience Manager locally to develop and test changes, compare AEM 6.5 with AEM as a cloud service, and follow the same concepts across versions.

Install IAM as a cloud service locally by configuring Java, Maven, and an IDE, download JDK 21, set JAVA_HOME and PATH, then run IAM SDK quickstart from Adobe downloads.

Explore the crx quickstart by managing the series quickstart folder, backing up and restoring the iam instance, and using start and stop scripts to run locally.

Explore the IAM development flow by creating a Maven project, deploying to a local IAM instance with Marvin, and using the sites console to verify changes.

Generate a Maven project using the Adobe IAM project archetype to create a multi-module AEM site, configure modules, build, and deploy to a local IAM instance.

Explore how AEM pages are structured and edited using reusable components and containers. Create, configure, and preview pages, adjust metadata, assets, and templates, and perform common page actions.

Navigate the AEM repository using CRXDE Lite to see how nodes and properties organize pages. Edit page titles, manage node structure, and rearrange components with save, refresh, and drag-and-drop.

Explore how the package manager exports and imports content as packages, using filters to define what to include and how to manage repository snapshots.

Learn how templates define page structure in AEM, using the content page template, locking headers and footers, and enabling body editing and template editor features and experience fragments.

Explore how template structure and initial content in AEM govern page updates and starting content. Understand how policies, locked components, and merge of structure and initial content determine page editability.

Learn to use layout mode in the template editor to create responsive two column desktop layouts and single column mobile layouts, and configure initial page properties with predefined values.

Learn how to create AEM templates using a template type as a blueprint, with predefined components copied from the type, and enable the template before creating pages.

Explore how templates are stored in the AEM repository, inspecting the page content template properties, structure mode components, and responsive layout nodes for desktop and phone.

Export a custom AEM template to a Maven project by creating and building a Mysite Custom Templates package, applying a filter, and moving it to ui content module conf templates.

Learn to create a template type in AEM by duplicating a template from templates folder to template type folder, renaming it, deleting secure template type and status properties, and deploying.

Restrict page creation to specific templates by configuring allowed templates on About Us and articles pages, using template paths in the advanced tab and applying relevant regular expressions.

Explore how policies define configurable settings for components at the template level to enforce consistency across pages, customize header and text components, and control allowed components in containers.

Explore how out-of-the-box components function, how to customize and configure them, and how to create reusable components with render scripts in htl, including component data storage and configuration dialogs.

Create and deploy custom AEM components by building a package with a content xml, a render html file, and a secure dialog, then verify on a Mysite page.

Learn to create configuration dialogs in AEM with granite ui components, building multi-tab forms including text fields, checkboxes, color fields, date pickers, and fieldsets.

Explore common attributes in granite ui for secure dialogs. Learn to add granite id, granite class, and granite hidden, deploy changes, and inspect the resulting markup.

Learn to implement dynamic show/hide in a secure dialog with granite classes and data nodes, revealing fields based on a dropdown selection, and note hidden data may still be saved.

Create a design dialog for AEM components by copying the secure design dialog, deploying code, and configuring a component policy using Granite UI that reflects template level configuration.

Explore expression language in granite UI to dynamically configure dialogs, such as appending the current request suffix to a hyperlink using params, headers, cookies, and functions like granite concat.

Explore how the secure design variable retrieves policy properties to prefill secure dialog fields, enabling default values from the design dialog for granite ui components.

Explore conditional rendering in AEM with granite hidden and granite hide, using expression language and a design variable to control component visibility.

Discover how AEM components select icons using the Q icon property, a two-character abbreviation, or a secure icon, and customize thumbnails or abbreviations with core UI icons or custom assets.

Learn how to dynamically display data in components with HDL (HTML Template Language), compiled to Java servlets and evaluated server-side, featuring context-aware escaping for secure href and src attributes.

Explore HTL objects in Adobe Experience Manager basics, focusing on enumerable objects like properties, page properties, and inherited properties, and introduce Java objects such as the component.

Learn HDL syntax through expressions, dot notation access, and identifier resolution; master escapes, operators, casting, comments, formatting, array joining, and context-aware output to protect against XSS vulnerabilities.

Learn block statements in HDL through hands-on practice, using data slide text, data element, and data slide test to manipulate content, tags, and rendering; explore templates and includes.

Explore vcm mode and its role in wcm mode to determine editing, preview, or disabled states, inspect cookies, and apply mode-specific styling and placeholders for unconfigured components.

Discover how client side libraries organize CSS and JavaScript, load into dialogs, and merge files to reduce HTTP requests; create a library with content XML, a JS folder, and js.txt.

Implement AEM dialog validation with Granite UI using selectors and validation functions, return errors to prevent saves, and load client libraries via immediately invoked function expressions and global loading.

Improve the authoring experience for advanced list components by enforcing required fields for badge, description, and multi-field item counts, with configurable limits and dedicated client-side validations and markup updates.