Composite coral Multifield breakages- AEM?

[NitroHazeDev]

Wanted to understand if folks are having issues with coral Multifield( with a coral select, coral text field and coral path browser) and inheritance . On AEM 6.5.12

I am trying to add this feature on the page properties of a page where within Multifield on dropdown select  an option is provided to a user .
 I could use another option without Multifield,  where I show a dropdown and another field but during inheritance the link icon will be present on both the select and the data entry field that appears on click of a dropdown , that could pose trouble with users being shown two link icons 

I chose the coral Multifield option showing just one field 

although hassle I managed to get past it for coral ui .. 

the issues I see are:  

1. inheritance issue - the live copy has inheritance broken, and rollout copies over the data though inheritance is broken 

2 . Add a field , choose dropdown and select a value, a text field is displayed for entry , now click add field again, and you will see a select dropdown displayed but the previous field where user entered value disappears 

wondering if there are better ways to stop the “add” button here . I see folks developed stuff to but that blocks after the addition of the new  dropdown 

does anyone know of such issues ?

@arunpatidar  - copying you since I know you have worked extensively on such cases 

[arunpatidar]

Hi @NitroHazeDev 
Could you please share the dialog xml?

Are you trying show hide based on dropdown in the page properties?

[NitroHazeDev]

Will inbox you Arun, yes .. since I couldn’t bind both fields in one chose the multi field with only one option displayed and appreciate your kind response

[NitroHazeDev]

Just shared it @arunpatidar  privately to avoid clutter on this question page. Thanks,

[arunpatidar · Accepted solution]

Hi @NitroHazeDev 
To work with multiple option show hide, you can refer https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue...

To limit the multifield for just one item, you can add disabled the Add button of count is more than one, I did similar to only have max 2 buttons (this code is old, you can refactor further if you want to use this approach)

(function($, $document) {
    "use strict";
    $(document).ready(function() {
        const CTA_SELECTOR = '.cmp-teaser__editor-multifield_actions';
        const CTA_ADD_BTN = '.cmp-teaser__editor-multifield_actions > button.coral3-Button--secondary';
        const MULTI_ITEM = 'coral-multifield-item';

        $(document).on('click', CTA_ADD_BTN, function() {
            let items = $(CTA_SELECTOR).find(MULTI_ITEM);
            if(typeof items !== 'undefined' || items != null){
                if(items.length >= 2){
                    $(this).attr('disabled', 'disabled');
                }
            }
        })
        
        $document.on("dialog-ready", function() {
            let items = $(CTA_SELECTOR).find(MULTI_ITEM);
            if(typeof items !== 'undefined' || items != null){
                if(items.length >= 2){
                    $(CTA_ADD_BTN).attr('disabled', 'disabled');
                }
            }
        })

         $(document).on("DOMSubtreeModified",CTA_SELECTOR, function() {
            let items = $(CTA_SELECTOR).find(MULTI_ITEM);
            if(typeof items !== 'undefined' || items != null){
                if(items.length > 0 && items.length < 2){
                    $(CTA_ADD_BTN).removeAttr('disabled');
                }
            }
        })
    });
})($, $(document));

[NitroHazeDev]

Hi arun,

I managed to fix it with your code but only if the fields such as select  and the text fields that display are not of coral type. Do you know if it works only on non-coral type and script needs to change to accommodate coral types?If it is of coral type the script does not work.
Also, did you happen to check if rollout overrides properties?

 Hide and show can be done using granite:class and granite:data for coral components just an FYI 

[NitroHazeDev]

Altered the script and disabled the delete button as well since i want only one field to be shown for anyone who wants to use it .Thanks @arunpatidar .Only issues that remains is the livecopy inheritance and that the select field cannot be coral type. if it is of coral type, on load it shows no sub option that was set with a selected option, in the prior save. please let me know. Eg. If you choose internal field as an option you should see inetrnal field text field , user enters a value. Now, save. Open it again, the option shows internal field but the text field disappears

(function($, $document) {
"use strict";
$(document).ready(function() {
const SELECTOR = '.custom-multi';
const ADD_BTN = '.custom-multi > button.coral3-Button--secondary';
const REMOVE_BTN ='.custom-multi > coral-multifield-item.coral3-Multifield-item > button.coral3-Multifield-remove';
const limit=1;
const MULTI_ITEM = 'coral-multifield-item';

$(document).on('click', ADD_BTN, function() {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(this).attr('disabled', 'disabled');
}
}
})

//$document.on("dialog-ready", function() {
$(document).on('click', '.coral-TabPanel-tab', function (event) {
var selectedTab = $.find(".coral-TabPanel-pane.is-active")[0].id;
alert("show hide"+selectedTab);

if (selectedTab === "seoid") {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(ADD_BTN).attr('disabled', 'disabled');
}
}
}
})

$document.on("dialog-ready", function() {

if(typeof items !== 'undefined' || items != null){
$(REMOVE_BTN).attr('disabled', 'disabled');
if(items.length >= limit){
$(ADD_BTN).attr('disabled', 'disabled');
}
}
})

$(document).on("DOMSubtreeModified",SELECTOR, function() {
let items = $(SELECTOR).find(MULTI_ITEM);
if(typeof items !== 'undefined' || items != null){
if(items.length > 0 && items.length < limit){
$(ADD_BTN).removeAttr('disabled');
}
}
})
});
})($, $(document));

[NitroHazeDev]

Only issue left is inheritance.

For coral-ui3 , issue is with Uncaught TypeError: component.getValue is not a function @arunpatidar , resolved by changing script to use  value = component._initialValues;

(function(document, $) {
"use strict";

// when dialog gets injected
$(document).on("foundation-contentloaded", function(e) {
// if there is already an inital value make sure the according target element becomes visible
showHideHandler($(".cq-dialog-dropdown-showhide-multi", e.target));
});

$(document).on("selected", ".cq-dialog-dropdown-showhide-multi", function(e) {
showHideHandler($(this));
});

function showHideHandler(el) {
el.each(function(i, element) {
if ($(element).is("coral-select")) {
// handle Coral3 base drop-down
alert("coral select 3");
Coral.commons.ready(element, function(component) {
showHide(component, element);
component.on("change", function() {
showHide(component, element);
});
});
} else {
// handle Coral2 based drop-down
var component = $(element).data("select");
if (component) {
showHide(component, element);
}
}
})
}

function showHide(component, element) {
// get the selector to find the target elements. its stored as data-.. attribute
var target = $(element).data("cqDialogDropdownShowhideTarget");
var $target = $(target);
var elementIndex = $(element).closest('coral-multifield-item').index();

if (target) {
var value;
if (component.value) {
value = component.value;
} else {
//value = component.getValue();
value = component._initialValues;
}
$target.each(function(index) {
var tarIndex = $(this).closest('coral-multifield-item').index();
if (elementIndex == tarIndex) {
$(this).not(".hide").addClass("hide");
$(this).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");
}
});
}
}

})(document, Granite.$);

[NitroHazeDev]

@arunpatidar  wer you able to check inheritance issue and reproduce it? please let me know

[arunpatidar]

Hi @NitroHazeDev 
I did not checked the multifiled issue, there are other people reported the same issue https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/multifield-on-page-propert... 

I will have a look in this in my free time.

[NitroHazeDev]

thanks @arunpatidar , will update when i hear back from adobe as well. I saw that post and asked if a solution was found but i think it is related to this. https://www.bounteous.com/insights/2017/02/20/hotfix-aem-msm-inheritance-breaking 

If you can also update the JS when you get time and review what i shared would be helpful.
Side note- did you develop anything with a simple dropdown and hide show (independent of multifield) with MSM on page properties?

Thanks,
Thanks.i