Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Show/hide fields based on checkbox in multifield

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Employee
2 Replies

Avatar

Correct answer by
Employee

Avatar

Level 2

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.

Avatar

Level 2

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.

Avatar

Level 2

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.

Avatar

Level 8

@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
}):
}
}

 

Avatar

Level 2

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.

Avatar

Level 2

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.