What is AEM xtype?

Short Answer

In Adobe Experience Manager (AEM), “xtype” refers to the type of component or widget that is used in the creation of dialogues within AEM’s Classic UI.

Understanding xtype in AEM

Defining xtype

The term “xtype” is derived from Ext JS, a JavaScript framework that AEM used to use for its Classic UI. It stands for “x-type” or “extension type”, which is a symbolic name representing a component class. In AEM, xtpe is used to define the type of widget, like a text field or drop-down, that should be rendered in a dialog window.

The Role of xtype in Classic UI

AEM’s Classic UI relied on xtypes for defining the interface elements authors interact with when configuring components or pages. Each xtype corresponds to a specific function or behavior.

Example of xtypes

Here are a few examples of common xtypes:

• textfield: Defines a single-line text input field.
• pathfield: Provides an input for selecting a path within the JCR.
• selection: Offers a drop-down selection or checkbox options.

Transition from Classic UI to Touch UI

With the introduction of AEM’s Touch UI, the concept of xtype is being phased out, replaced by resource types defined in the Granite UI framework. However, xtype remains relevant for projects maintaining or upgrading older AEM versions that still use the Classic UI.

Using xtype in AEM Classic UI

Creating a Dialog with xtype

1. Define the Dialog Structure: Open or create a dialog XML file under the component’s node in the CRX repository.
2. Add Fields with xtype: For each field you want to add, define a node and set its xtype property according to the desired widget.
3. Configure Properties: Set additional properties for each xtype, like name, fieldLabel, or defaultValue, to control its behavior and appearance.

Example Dialog Field

<field

    jcr:primaryType="cq:Widget"

    name="./title"

    fieldLabel="Title"

    xtype="textfield"/>

This snippet creates a text field in a dialog for authors to enter a title.

Conclusion

The concept of xtype in AEM is essential for understanding the architecture and customization of the Classic UI. While newer AEM versions have shifted towards using Granite UI for the Touch UI, knowing about xtypes is still valuable for developers working with legacy systems or migrating to newer AEM versions. It illustrates the evolution of AEM’s user interface and the continuing need for adaptability in technology roles.