Identifying AEM Components in Classic and Touch UI: A Comprehensive Guide

This guide will explore how to identify and check a component in Adobe Experience Manager (AEM) using two different user interfaces: Classic UI and Touch UI.

Key Takeaways

• AEM offers two user interfaces: Classic UI and Touch UI.
• AEM Components are reusable modules that make up the building blocks of an AEM site.
• Components can be identified and inspected in both the Classic UI and Touch UI.
• The process to check components varies slightly between the two interfaces.

Understanding AEM Components

An AEM Component is a modular unit which holds, formats, and delivers a page’s content. Examples include image carousels, text boxes, and navigation menus. Components are reusable, meaning they can be used across multiple templates and pages, which increases efficiency and consistency across the site.

The AEM User Interfaces: Classic UI and Touch UI

AEM offers two user interfaces: Classic UI and Touch UI. Classic UI is the older interface, while Touch UI is more modern and mobile-friendly. Depending on the version of AEM, you may be using one or both of these UIs.

Identifying Components in Classic UI

1. Navigate to the page containing the component in the Classic UI.
2. Click on the “Edit” button to enter edit mode.
3. Hover over the component. A border will highlight the component and its name will be displayed.

Identifying Components in Touch UI

1. Navigate to the page containing the component in the Touch UI.
2. Click on the “Edit” button to enter edit mode.
3. Tap or click on the component. The component toolbar will appear at the top, displaying the component name.

Inspecting Component Properties in Classic UI

1. In edit mode, right click on the component and select “Edit”.
2. A dialog box will open, displaying the component’s properties.

Inspecting Component Properties in Touch UI

1. In edit mode, tap or click on the component.
2. Click on the “Configure” (wrench icon) button in the component toolbar.
3. A dialog box will open, displaying the component’s properties.

Conclusion

Understanding how to identify and inspect components in AEM is crucial when managing an AEM site. Whether you’re using Classic UI or Touch UI, being able to check a component’s properties allows you to understand how it functions, how it’s configured, and how it fits into the overall design and structure of the site. Remember, practice makes perfect, so don’t hesitate to explore the AEM interface and learn more about the components used in your AEM site.