Create Multifield Dialog In AEM

In this tutorial, we will see the creation of multifield dialog in AEM. Multifield allows us to add/reorder/remove multiple instances of a field. You can create nested multifield also as per your business requirement.

Step 1 — Open CRXde and create a component under the project. the component node should appear like this

Step 2 — Now we will create a multifield dialog that you can refer to below snippet.

In the above snippet, we have used multifield sling:resourceType to make it multifield. Then we created one container node which will appear multiple times.

we created an extra node contactGroup with sling:resourceType=”granite/ui/components/coral/foundation/well” which is completely optional but it will provide a good user experience to our dialog and help to segregate fields.

Step 3 — Now create a sling model for our component and inject our multifield contact node.

In the above model, we injected a list of contacts from the multifield node. Now we have to inject each field from multifield that is name and email.

Step 4 — Create an items class for the contact list and inject name and email.

Step 5 — Now create HTML for our component and add the below HTML code.

line 1–3 placeholder for our component.

line 5 created a model object using data-sly-use.

line 8 iterates over a list using a data-sly-list and passes a contact list to that.

That’s it! You’re done!!!

In the same way, you can create nested multifield.