Show/hide fields based on checkbox in multifield

[sufyan-ayub]

Hi,

I am trying to show/hide fields based on checkbox toggle inside a multifield. I have been referring to this great article by Theo Pendle: 
https://levelup.gitconnected.com/aem-conditionally-show-or-hide-a-field-based-on-a-checkbox-widget-o...

It works great with individual fields. The problem arises when the fields that needs to be show/hide are placed inside the multifield. It will toggle every item in the multifield when the desired functionality is to hide that specific item in multifield. Has anyone found a workaround to this issue? I have also tried using the ACS Commons library but that too don't work with the multifield.

[ManviSharma]

Hi,

>Could you check if this ACS feature works for you:

https://adobe-consulting-services.github.io/acs-aem-commons/features/ui-widgets/show-hide-widgets/in...

>There are various blogs about implementing this online, e.g.:

https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

[sufyan-ayub]

Hi,

The ACS link you shared is what I was talking about in my original post. It does work but only outside the multifield context. The functionality to show or hide fields based on checkbox toggle (when the checkbox and the fields are placed inside a multifield) doesn't work with the ACS feature as well.
About the second link you shared, it is from the same author about whom I mentioned in post. Also, it is just for the showing/hiding of fields based on dropdown, whereas, the link I shared is the more generic one which can handle checkbox as well. The problem is that this too doesn't work as expected when the fields are placed inside a multifield.

[sufyan-ayub · Accepted solution]

After a lot of messing around with the ACS common feature. I got it working finally. So, the problem is that the documentation in the provided link is incomplete about handling the multifield. Fortunately there was some documentation in the original JS located at (/apps/acs-commons/touchui-widgets/showhidedialogfields/source/showhidedialogfieldstabs.js). In this file, there is a mention of multifield as: 

* - If the fields lie within a multifield

* - add the extra empty property acs-cq-dialog-dropdown-checkbox-showhide-multifield to the dropdown/select or checkbox element

After adding this property in granite:data node, I finally got it working. They should update the official documentation as well according to the comments provided in the JS file.

[Mohit_KBansal]

Same problem is discussed in this post [1]

[1] https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hiding-the-fields-in-multi...

[sufyan-ayub]

Actually no, the problem discussed in the above mentioned thread is related to the dropdown about which the AEM itself provide some OOTB solution for showing or hiding of fields but my concern is with the checkbox toggle and that too when the fields that needs to be show/hide based on checkbox toggle are placed inside the multifield. So, this is unrelated to my problem.

[Manu_Mathew_]

@sufyan-ayub You can loop the multifield with the length of multifield and use name selector

$("input[name='./<yourNameElement>']")

with dynamic item values or use multifield wrapper selector and get the elements one by one and then select the checkboxes using seletors within the element for manupulation.

$coralElementsLength.each(function (i, element) {
Coral.commons.ready(element, function(panel) {
var $THIS_PANEL = $(panel).find(CLASSNAMES.GROUP_WRAPPER);
var $checkboxEle = $THIS_PANEL.find(CLASSNAMES.CHECKBOX_SELECTOR);
$checkboxEle.on("change", function(){
//code
}):
}
}

[sufyan-ayub]

I do not have much experience with writing JQuery code myself so I have absolutely no idea what to do with this code or where to place it or how to customize it according to my requirement.

[Jagadeesh_Prakash]

@sufyan-ayub 

You can refer to below URL

multifield :

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-show-hide-fields-d...

Nested multifield

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-there-any-way-in-aem-6-...

Hope this is useful for you

[sufyan-ayub]

Hi,

So, the first link you shared is about the showing or hiding of fields based on dropdown about which there are countless examples available on internet but the problem is with the checkbox based toggle of fields that too when they are placed inside the multifield. The link I have shared in my original post solves the problem with the checkbox toggle but when used inside the multifield context, this solution doesn't work as well. The second link is completely unrelated to my question.

[ak_2985]

May i know your dialog. We do have same requirement.after playing around acs-commons JS still not working. 
Can you post your dialog how you added empty property and data attribute for multi field hide and show field on base of checkbox selection

[Zendark]

Hi @ak_2985  , did you get it to work? I am facing the same issue if possible please do share the dialog or steps to get it to work.Thanks @sufyan-ayub @ak_2985