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 sgaem.blog02@gmail.com.

Hope it will help you guys !!👍

Thanks and Happy Learning 😊