Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

The show hide function does not work on click of the add button on multifield.

Avatar

Level 4

The show hide function does not work for the new set of fields on click on the add button , but works for the existing fields on the dialog.

1 Accepted Solution

Avatar

Correct answer by
Level 4

I've implemented a check box to show/hide different fields respectively.

Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

 

var target = $(input).data('cqDialogShowhideTarget');
if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
var value = $(input).val();
if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

$(target).each((_, elem) => {

var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
$(elem).toggleClass('hide', isHidden);
if ($(elem).parent().parent().is('coral-panel')) {
var tabIndex = $(elem).closest('coral-panel').index();
$(elem)
.closest('coral-tabview')
.find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
.toggleClass('hide', isHidden);
}
if (!$(elem).hasClass('hide')) {
$(elem).siblings().find('coral-select').removeAttr('required');
$(elem).siblings().find('coral-select').removeAttr('aria-required');
}
});

 

 

 

Thanks,

Chinmayi

View solution in original post

9 Replies

Avatar

Community Advisor

Hi @chinmayis865517 
If you are looking for dropdown show/hide then you can check

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem6-4-multifield-with-sho... 

 

Otherwise please share more details.



Arun Patidar

Avatar

Level 4

Hi @arunpatidar ,

 

It's not a drop down. It should get hidden on click of the add buttton of the multifield.

Avatar

Community Advisor

Hi @chinmayis865517 
Could you please add more details

 

what field should be hidden on 'ADD' button?

What AEM OOTB feature you are talking about? Or you have custom script to show/hide?
Sample Component Dialog?

Screenshot if any



Arun Patidar

Avatar

Level 4

Hi @arunpatidar ,

 

I want a text field to be hidden on click of the add button.

$(document).on("dialog-ready", function (event) {
$("coral-multifield").children("button[coral-multifield-add]").on("click", function() {

_newFields(event);
});

});
function _newFields(event) {
var path = ns.page.path
var optinTypeIT= $('[name="./text1"]');

var optinType= $('[name="./'text2'"]');

if(path.indexOf("it") != -1) {
$(text1).parent().hide();
$(text1).hide();
$(text2).show();
}
else if(path.indexOf("it") != -1){
$(text2).parent().hide();
$(text2).hide();
$(text1).show();
}
}

 

Thanks,

Chinmayi

Avatar

Community Advisor

Hi @chinmayis865517 
Here is the refactor code, the issue could be with the field selector, I would suggest to use class(granite:class property) for those text field as a better selector 

var optinTypeIT = multifield.find('[name="./text1"]'); // Use class/id based selector
var optinType = multifield.find('[name="./text2"]'); // Use class/id based selector

 

 

(function (window, Granite, $) {
    "use strict"; 

    // Add click event listener to the add button of the multifield inside the dialog-ready event
    $(document).on("foundation-contentloaded", function () {
        $("coral-multifield").each(function () {
            var multifield = $(this);
            multifield.find("button[coral-multifield-add]").on("click", function (event) {
                _newFields(event, multifield);
            });
        });
    });


    /**
     * Function to show or hide fields based on page path conditions
     * @param {Object} event - The event object
     * @param {Object} multifield - The multifield element
     */
    function _newFields(event, multifield) {
        var path = Granite.author.page.path; 
        var optinTypeIT = multifield.find('[name="./text1"]'); // Use class/id based selector
        var optinType = multifield.find('[name="./text2"]'); // Use class/id based selector

        // Show or hide fields based on conditions
        if (path.indexOf("it") !== -1) {
            optinTypeIT.closest(".coral-Form-fieldwrapper").hide();
            optinType.closest(".coral-Form-fieldwrapper").show();
        } else {
            optinType.closest(".coral-Form-fieldwrapper").hide();
            optinTypeIT.closest(".coral-Form-fieldwrapper").show();
        }
    }

}(window, Granite, Granite.$));

 



Arun Patidar

Avatar

Level 4

Thank you for the reply @arunpatidar .

It's not able to find the fields after click of the add button, as the fields load after some time.

The set timeout function also does not help here.

Avatar

Community Advisor

Hi @chinmayis865517 
There used to be an event when attach multifield item but seem deprecated.

coral-component:attached

 

Triggered when the component is attached to the DOM.

 

Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

Example which I used in the past with DOMSubtreeModified:

(function($, $document) {
    "use strict";
    $(document).ready(function() {
        
        $(document).on('click', MULTI_ADD_BTN_SELECTOR, function() {
        	hideItems() 
        })
        
        $document.on("dialog-ready", function() {
            hideItems()
        })


         $(document).on("DOMSubtreeModified",MULTIFIELD_SELECTOR, function() {
            hideItems()
        })
    });
})($, $(document));

 

Differences are here : https://gist.github.com/zplume/de65d55702d0735398105e50f2d6de0c 

 



Arun Patidar

Avatar

Correct answer by
Level 4

I've implemented a check box to show/hide different fields respectively.

Source: https://blog.3sharecorp.com/show-and-hide-dialog-fields-based-on-any-field-type

 

var target = $(input).data('cqDialogShowhideTarget');
if ($(input).closest('coral-multifield-item').length) target = $(input).closest('coral-multifield-item').find(target);
var value = $(input).val();
if ($(input).is('coral-checkbox')) value = (!!input.checked).toString();

$(target).each((_, elem) => {

var isHidden = $(elem).attr('data-showhidetargetvalue') !== value;
$(elem).toggleClass('hide', isHidden);
if ($(elem).parent().parent().is('coral-panel')) {
var tabIndex = $(elem).closest('coral-panel').index();
$(elem)
.closest('coral-tabview')
.find('coral-tablist>coral-tab:nth-child(' + (tabIndex + 1) + ')')
.toggleClass('hide', isHidden);
}
if (!$(elem).hasClass('hide')) {
$(elem).siblings().find('coral-select').removeAttr('required');
$(elem).siblings().find('coral-select').removeAttr('aria-required');
}
});

 

 

 

Thanks,

Chinmayi