Ad Code

Saturday, March 11, 2017

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.
multifield-values.PNG
Fig - Multifield Values saved in node under content hierarchy

Dropdown will look like below:
not-saved.PNG
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:

saved.PNG
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-

class2.PNG
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-

class1.png
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
fullwidthdialog.PNG
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 😊


3 comments:

  1. Really good. #AEM is much better with such hacks.

    ReplyDelete
  2. How to retrieve multi select values in touch ui multifield

    ReplyDelete