Touch UI Composite Multi-field with Drop-Down in AEM6.2

Hi,

Composite Multi-Field is the widely used feature in AEM. Multifield is used to store multiple values. Multifield can contain single or multiple field

Steps to create Composite Multi-Field:

Step1: Create a component having touch UI dialog with the following hierarchy:

Step2: Create node "/apps/aem-learning/components/content/multifield/clientlibs" of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.   

Step3: Create file (nt:file) "/apps/aem-learning/components/content/multifield/clientlibs/js.txt"  and add the following js files:
Multifield.js
This is how we create a Composite Multi-Field, But there are some common issues related to this component.
Below are some of the examples:

Issue 1: When we use drop-down widget in Composite Multi-Field, Selected values are saved in node but when we re-open the dialog, saved values are not visible in dialog box.

Fig - Multifield Values saved in node under content hierarchy

Dropdown will look like below:

Fig - Saved Values not showing up in drop-down

To solve this problem we need to update multifield.js

Go to Line 61: and replace the else section with the below code:

Fig - Drop-down with the expected values

Issue 2: By default, multifield container looks so weird as it is so small. Lets see how to beautify the look and feel of same.

Fig- Container with small width

Steps to follow :

• Add the "dialog-width-50rem" css class in the dialog hierarchy to content node ("/apps/aem-learning/components/content/multifield/cq:dialog/content" ) shown below-

Fig- Adding the class in content node

• Add the "column-full-width" css class in the dialog hierarchy to content node ("/apps/aem-learning/components/content/multifield/cq:dialog/content/items/basic/items/column") shown below-

Fig- Adding the class in the column node

• Create file (nt:file) "/apps/aem-learning/components/content/multifield/clientlibs/css.txt" and add the following CSS file

Multifield.css

Now you can see the updated layout of the dialog

Fig- Added the css for make the dialog Clearly

Refer below package and try it yourself.
DEMO PACKAGE INSTALL

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com.

Hope it will help you guys !!👍

Thanks and Happy Learning 😊