AEMaaCS - Multifield with show/hide inside another multifield item is not working properly

[aem-enthu27]

Hi,

Below is the scenario,

* There is a multifiled item for steps , where each step has title,description and multiple images/videos.

* Within each step , since user can enter multiple images/videos that is also been made multifield item.

* This multifield images/videos is show/hide dropdown with image and video as selectors.

* When you select image or video, few fields are hidden/shown depending on what you select.

* This works fine within step1( remember step1 is a part of main multifield item within which we have multifield show/hide items for images/videos).

* But when you try to select video/image in step2 , it breaks.

* Issue is let's say dialog fields are like below:

step1:

 + title

 +description

 +assets

     item1

        +image

        +imagepath

        +alt

    item2

        +video

        +videopath

 step2:

 + title

 +description

 +assets

      item1

        +video

        +videopath

from above example:

when I select video dropdown for item1 in step2 , item1 of the step1 will show videopath instead of imagepath.

I have already incorportated whatever @arunpatidar  has suggested in this question : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem6-4-multifield-with-sho...  , because this changes it is working fine within step1 I mean show/hide works fine within each steps but not between steps.

[Aditya_Chabuku · Accepted solution]

Hi @aem-enthu27 , I understand you are trying to show hide inner multifield in a nested multifield case. Here the code given by Arun will not work as it is looking for your element in the first level.

Here is the approach you need to follow to update that JS.

Step1: Try creating Nested Multifield like below

 <firstMF
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <files
                                granite:class="multifield-class"
                                granite:data="multifielddata"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                class="full-width"
                                composite="{Boolean}true"
                                fieldLabel="First Multi Field"
                                validation="multi-validate">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                    name="./firstMF">
                                    <items jcr:primaryType="nt:unstructured">
                                        <heading
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldLabel="Heading"
                                            name="./heading"
                                            required="{Boolean}true"/>
                                        <secondMF
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                            composite="{Boolean}true"
                                            fieldLabel="Second Multi Field">
                                            <field
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                name="./secondMF">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <label
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                        fieldLabel="Link - Label"
                                                        name="./label"
                                                        required="{Boolean}false"/>
                                                   <image
.
.Your Existing Image Field
.
.<granite:data
id:imagesecondMF
>
./>
<video
.
.Your Existing Video Field
.<granite:data
id:videosecondMF
>
.
./>
                                                </items>
                                            </field>
                                        </secondMF>
                                    </items>
                                </field>
                            </files>
                        </items>
                    </firstMF>

Step2:  Now, Implement Mutationobserver like this 

var ourObserver = new MutationObserver(function() {

});
ourObserver.observe(document.querySelector("#imagesecondMF"), 
{childList: true, subtree: true}
// // try showHide here
);
ourObserver.observe(document.querySelector("#vidoesecondMF"), 
{childList: true, subtree: true}
// try showHide here
// 
);

Step 3:  
Increment each id of image selection & Video selection while adding them to avoid malfunction

I know,this is long approach, but it will help you for sure.

~Aditya.Ch

[aem-enthu27]

I thought only I can mark questions as answered .

[arunpatidar]

Check this if helps https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/hide-and-show-dropdown-in-...