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

[chinmayis865517]

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.

[arunpatidar]

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.

[chinmayis865517]

Hi @arunpatidar ,

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

[arunpatidar]

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

[chinmayis865517]

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

[arunpatidar]

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.$));

[chinmayis865517]

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.

[arunpatidar]

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:

• Coral.Component#coral-component:attached

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 

[MukeshYadav_]

Hi @chinmayis865517 , if your are trying to hide just for accessibility purpose you may try accordion collapsible way of multifield

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

https://github.com/Viji1304/aemlearnings-samples/tree/master/learnings/ui.apps/src/main/content/jcr_...

 https://experiencing150.rssing.com/chan-25971229/article242.html

Thanks

[chinmayis865517 · Accepted solution]

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