Ad Code

Wednesday, April 5, 2017

Touch UI Composite Multi-field with CheckBox Issue in AEM 6.2

Hello Everyone,

In Part-1 of Custom Multifield, we have gone through some of the issues of "Custom Multifield", but there are two more issues still persist. In this blog we will see how to handle them.

Issue 1: When we use checkbox widget in Composite Multi-Field, It doesn’t work properly.

  • In below dialog "Open in new tab" checkbox will be unchecked on re-opening the dialog box in-spite of the fact that it was checked or unchecked earlier.
Fig- Not showing the saved value in node

  • In multifield, it doesn’t matter whether you select or deselect the values, the value of the checkbox  “_target” will always be saved in the repository.
Fig- Always saving the value in node even checkbox is not selected

To fix this we need to update the "Multifield.js" for the same.

Once the above js is updated you can check the "Open in new tab checkbox" and the correct values will be stored in the repository(node).
Fig - Showing the correct checkbox status

Fig - Correct value saved in node
Issue 2: None of the property is available out of the box to restrict the size of multifield.

To solve this issue:

  • Add the limit property in node which is having sling:resourceType as "granite/ui/components/foundation/form/multified" .The value corresponds to limit attribute will denote the number of multifield items allowed. Let's say limit is set to 3 then only 3 multifield values will be allowed and for 4th value it will show an alert with the respective error message.

Fig- Add limit property to multifield node
  • Create file (nt:file) "/apps/aem-learning/components/content/multifield/clientlibs/js/limit.js" and add the following JS file
You can see the alert if you will add more items than the limit :

Fig - Multifield size limit cross
And this is how we can customised the multifield accrodingly.

Refer below package and try it yourself.
Demo Package Install

If you have any query or suggestion then kindly comment or mail us at

Hope it will help you guys !!👍
Thanks and Happy Learning 😊


  1. I have updated my custom multifield.js with the one that you shared above but it's still not working for me.

  2. I tried it in AEM 6.3 previously and it used to work... try to use exact package of mine...

  3. I using aem 6.3.3. I have installed your package , still it was not working and thae values are not saving inside dilog also.