How to Create Multifields in Adobe Experience Manager (AEM)

In the world of Adobe Experience Manager (AEM), a multifield is a component that allows users to input multiple sets of data. These sets of data can be made up of various field types – text fields, number fields, dropdown selectors, and more. This guide will walk you through the steps of creating a multifield in AEM, providing detailed instructions and insights along the way.

Key Takeaways

• Multifields in AEM allow for the collection of variable amounts of data from users.
• The Touch UI provides an intuitive interface for creating multifields.
• A multifield component is created by defining it in a dialog box.
• The process involves creating nodes and properties in the AEM’s Java Content Repository (JCR) using CRXDE Lite.

Multifields in AEM

Multifields in AEM are used when you need to collect or display multiple sets of data. A common application of multifields is in forms, where users might need to enter multiple entries of the same type of data.

The Role of Touch UI

AEM’s Touch UI provides a modern, user-friendly interface for creating and managing content. It’s through this interface that you’ll be able to create and configure multifield components.

Accessing CRXDE Lite

CRXDE Lite is an integrated development environment (IDE) in AEM that allows you to interact with the JCR directly. This is where you’ll create the nodes and properties for your multifield component.

To access CRXDE Lite:

1. Open AEM in your web browser.
2. Append /crx/de to your AEM URL.

Defining the Multifield in a Dialog

The multifield is defined in a dialog box. A dialog in AEM is a user interface element where authors enter and configure the content.

Let’s define a multifield:

1. Navigate to the dialog of your component.
2. Right-click on the dialog and select Create-> Create Node.
3. Name the node and set the sling:resourceType to granite/ui/components/coral/foundation/form/multifield.
4. Save your changes.

Adding Field Nodes

After defining the multifield, you need to add field nodes, which represent the individual fields in the multifield:

1. Right-click on the multifield node and select Create-> Create Node.
2. Name the field node and set the sling:resourceType to the type of field you want to create. For example, for a text field, you would use granite/ui/components/coral/foundation/form/textfield.
3. Repeat these steps for each field you want to add to the multifield.
4. Save your changes.

Configuring the Fields

Each field node can be further configured with properties:

1. Select a field node.
2. In the Properties tab, click the Add Property button.
3. Add the necessary properties for the field. For example, for a text field, you might add a fieldLabel property with the label of the field.
4. Save your changes.

Testing the Multifield

After creating and configuring the multifield, you should test it to make sure it works as expected:

1. Open the AEM authoring environment.
2. Navigate to a page that uses the component containing the multifield.
3. Open the dialog of the component and check that the multifield is displayed correctly and functions as intended.

Conclusion

Creating a multifield in AEM involves working with the JCR via CRXDE Lite, defining the multifield in a dialog box, adding and configuring field nodes, and testing the multifield. With multifields, you can create more dynamic and flexible components that can handle varying amounts of data, enhancing your ability to collect and display information in AEM.