Components in AEM

Components in AEM

 

There are several types of components in Adobe Experience Manager (AEM), including OOTB, Custom, WCM, Foundation, and Core components.

1.      OOTB (Out-of-the-Box) Components: These are the components that come pre-built with AEM and are ready to use. As mentioned earlier, AEM provides a wide range of OOTB components such as text, image, list, navigation, social, form, media, search, layout, and miscellaneous components.

The OOTB components are located in the following directory:

/libs/wcm/core/components

This is the default location for AEM's Core Components. Other OOTB components may be located in different locations depending on the AEM version and configuration.

2.     Custom Components: These are components that are created by developers to meet specific business requirements. Custom components can be built from scratch or can be based on existing OOTB components. Developers can use AEM's component framework to build custom components that are integrated with AEM's content and authoring capabilities.

The custom components are typically stored in the following directory:

/apps/[project-name]/components

The [project-name] refers to the name of the project or application that the components are being created for. Developers can create and organize custom components in subfolders within the /apps directory.

3.     WCM (Web Content Management) Components: These components are specific to web content management and are provided by AEM to help content authors create and manage content on web pages. WCM components include components such as teaser, title, text, and image components.

The WCM components are located in the following directory:

/libs/wcm/foundation/components

4.     Foundation Components: These components are basic building blocks for creating web pages. Foundation components are simple and lightweight and include components such as button, alert, and table components.

The Foundation components are located in the following directory:

/libs/foundation/components

5.     ACS Commons Components: a popular open-source library of reusable AEM components and features developed by Adobe Consulting Services (ACS). The ACS Commons library includes several core components that are widely used in AEM implementations.

The ACS Commons core components are typically located in the following directory:

/apps/acs-commons/components

In summary, AEM provides a wide range of OOTB components as well as component libraries such as WCM, Foundation, and Core, which developers can use to create custom components that are integrated with AEM's content and authoring capabilities.

Some of the most commonly used OOTB components in AEM include:

1.       Text components: Rich Text, Plain Text, Text Area, Title, and Subtitle.

2.       Image components: Image, Image Map, Image Hotspot, and Image Carousel.

3.       List components: Unordered List, Ordered List, Definition List, and Nested List.

4.       Navigation components: Breadcrumb, Navigation, Language Navigation, and Pagination.

5.       Social components: Social Sharing, Social Media Links, and Social Media Feed.

6.       Form components: Form Container, Form Components (Text Field, Text Area, Checkbox, Radio Button, Dropdown List, etc.), and Form Submit Button.

7.       Media components: Video, Audio, and Document Download.

8.       Search components: Search Box and Search Results.

9.       Layout components: Column Control, Container, and Row.

10.   Miscellaneous components: Accordion, Tabs, Table, Code Highlighter, and Embed.

These OOTB components are designed to be customizable, and AEM provides tools for developers to modify and extend these components to meet specific business requirements. This allows for the creation of unique and engaging web pages while maintaining consistency and adherence to brand standards.

A component constitutes

1.           FrontEnd

a.       component.html - This element defines the HTML markup that will be rendered when the component is displayed on a web page. It can include standard HTML tags, as well as AEM-specific tags that allow for dynamic content and interaction with other AEM components.

b.       cq:dialog - This element defines the dialog box that appears when editing the component in AEM's authoring interface. It is used to specify the fields and properties that can be configured for the component.

c.       clientlibs Client are used to manage and serve client-side assets such as CSS, JavaScript, and images. They allow you to bundle multiple files together into a single package, which can then be easily included on web pages or components.

a.       js - This is a directory, containing .js files having JavaScript code that is required for the component to function properly. It can include scripts that handle user interaction, data processing, and other functionality.

b.       js.txt

c.       css - This is a directory, containing .css files having styling for the component. It can include CSS rules that control the appearance and layout of the component.

d.       css.txt

d.       cq:design_dialog - the cq:design_dialog node is used to define the design-time configuration for a component. It is similar to the cq:dialog node, which is used to define the configuration dialog that appears when editing a component in AEM's authoring interface, but is instead used to define the configuration dialog that appears when designing the component's layout.

e.       ca:editConfig - This element defines the editing configuration for the component, such as the toolbar buttons that are available when editing the component.

a.       cq:inplaceEditing - This node is used to enable inline editing of a component's content in the authoring interface. It allows authors to edit the content of a component directly on the page, without having to open a separate edit dialog. The cq:inplaceEditing node can contain various elements, such as the path to the editable node, the type of editing widget to use, and any options or configurations for the widget.

b.       cq:dropTargets - This node is used to define drop zones for a component, allowing other components or assets to be dragged and dropped onto it. The cq:dropTargets node can contain various elements, such as the type of drop zone, the allowed drop types, and any event listeners or handlers for when items are dropped onto the zone.

c.       cq:listeners - This node is used to define event listeners and handlers for a component. It can be used to trigger custom functionality or behavior based on user interactions or other events. The cq:listeners node can contain various elements, such as the event to listen for, the type of listener or handler to use, and any additional configuration or options for the listener.

 

2.           Backend

a.       Javascript Controller – This is used to provide interactivity to a component. A controller is a JavaScript file that defines functions that can be called from within the component's HTML or other JavaScript files.

OR

b.       WCMUse Class(WCMPojo) - WCMUse class is used to provide server-side logic and data to an AEM component. The WCMUse interface is a Java interface that components can implement to provide custom logic and data for rendering.

OR

c.       Sling Model(Recommended) - The Sling Model is a Java class that allows you to map the properties of a resource to a Java object. It's a powerful tool that provides a convenient and type-safe way to interact with AEM content.