Composite coral Multifield breakages- AEM?

Question

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 · Accepted Answer

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

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

arunpatidar · Answer

Hi @nitrohazedev Could you please share the dialog xml?Are you trying show hide based on dropdown in the page properties?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded