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.
checkbox.PNG
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.
^5FAA1604936855B9E087171B954A51B6D3128746BD378448A6^pimgpsh_fullsize_distr.jpg
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).
^086E03CEF65B2975A334E79817DE7AB66196F7AD841B1B4F9F^pimgpsh_fullsize_distr.jpg
Fig - Showing the correct checkbox status

^4AF3775DC7230CCAD1D2B8F2189C61DC36A8B897BAAA17155A^pimgpsh_fullsize_distr.jpg
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.

Capture.PNG
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 :

Capture.PNG
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 😊

7 comments:

  1. It was a brilliant opportunity to visit this sort of site and I am cheerful to know, much obliged to you such a great amount for allowing us to have this open door.mobile app development company chennai

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

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

    ReplyDelete