AEM component with multiple nested multifields renders incorrectly in authoring UI

daniel_diaz 27-12-2019

Hi,

I have an AEM component in which I'm trying to add two nested multifields. The component has two variations that are chosen with a drop down menu under "Choose Variation" (Image-Text Listing and Document Listing). Each variation contains a nested multifield. The Image-Text Listing renders correctly in the authoring UI:

 

https://ibb.co/DYBySjf

 

However, when you select the Document Listing variation from the drop down menu, it renders incorrectly in the authoring UI like this:

 

https://ibb.co/qkMWJM1 

 

(Sorry these imgbb links look like spam; I'm not sure how to upload an image to this forum.)

The "Document Listing Fields" is a multifield (sling:resourceType="granite/ui/components/foundation/form/multifield") that's rendering not in the correct place. But the "Image Text Listing Fields" multifield in the first image is rendering properly. Both have the exact same xml structure; the only difference is that the Document Listing multifield comes after the Image-Text Listing multifield. 

 

Is it the case that you can only have one of these nested multifields inside a component? (i.e. one "granite/ui/components/foundation/form/multifield" within a "granite/ui/components/foundation/form/multifield").

 

If it would be helpful for me to share the entire structure of the xml, please let me know. Also as a note we have AEM 6.3.3.0.

 

Thanks a lot!

 
 
 
bug multifield Nested multifield UI xml

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar
MVP
27-12-2019

Can you try with Coral3 resource type instead of Coral2?

granite/ui/components/coral/foundation/form/multifield

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui...

 

Please post sample dialog xml so we can reproduce the issue.

 

Hi, thanks for your response @Arun_Patidar ! If I were to use the Coral3 resource type, would all the components have to be Coral3 resources? (I've been using AEM for a few months so relatively new!) Here is the xml:

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Visual Listing Dialog"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"/>
        <items jcr:primaryType="nt:unstructured">
            <visual-listing
                jcr:primaryType="nt:unstructured"
                jcr:title="Visual Listing Details"
                sling:resourceType="granite/ui/components/foundation/container">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <visual-variations
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/select"
                                class="cq-dialog-dropdown-showhide"
                                cq-dialog-dropdown-showhide-target=".visuallistingvariation-hide-show"
                                fieldDescription="Please choose visual listing variation."
                                fieldLabel="Choose Variation"
                                id="visual-listing-variation-selection"
                                name="./visuallistingVariation"
                                required="true">
                                <items jcr:primaryType="nt:unstructured">
                                    <imagetextlisting
                                        jcr:primaryType="nt:unstructured"
                                        selected="true"
                                        text="Image-Text Listing"
                                        value="imagetextlisting"/>
                                    <documentlisting
                                        jcr:primaryType="nt:unstructured"
                                        text="Document Listing"
                                        value="documentlisting"/>
                                </items>
                            </visual-variations>
                            <imagetext-listing-fields
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/multifield"
                                class="tnc-parent-multifield hide visuallistingvariation-hide-show vlImg"
                                fieldLabel="Image Text Listing Fields"
                                id="hidden-fields-multifield"
                                name="./imagetextListingFields"
                                showhidetargetvalue="imagetextlisting">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                    name="./imagetextListingFields"
                                    tnc-commons-nested="JSON_STORE">
                                    <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                    <items jcr:primaryType="nt:unstructured">
                                        <column
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Image-Text Listing Fields"
                                            sling:resourceType="granite/ui/components/foundation/container">
                                            <layout
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                            <items jcr:primaryType="nt:unstructured">
                                                <imagelistingNestedMultifield
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                                    class="tnc-child-multifield"
                                                    fieldLabel="CTA Links"
                                                    name="./imagelistingNestedMultifield">
                                                    <field
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                        name="./imagelistingNestedMultifield">
                                                        <layout
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                            method="absolute"/>
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <column
                                                                jcr:primaryType="nt:unstructured"
                                                                jcr:title="CTA Link"
                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                <layout
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <cta-title
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                        emptyText="Enter the CTA title here"
                                                                        fieldDescription="Enter the CTA title here"
                                                                        fieldLabel="CTA Title"
                                                                        id="visual-imagetext-listing-cta-title"
                                                                        name="./imgctaTitle"/>
                                                                </items>
                                                            </column>
                                                        </items>
                                                    </field>
                                                </imagelistingNestedMultifield>  
                                            </items>
                                        </column>
                                    </items>
                                </field>
                            </imagetext-listing-fields>
                            <document-listing-fields
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/multifield"
                                class="tnc-parent-multifield hide visuallistingvariation-hide-show vlDoc"
                                fieldLabel="Document Listing Fields"
                                id="hidden-fields-multifield"
                                name="./documentListingFields"
                                showhidetargetvalue="documentlisting">
                                <field
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                    name="./documentListingFields"
                                    tnc-commons-nested="JSON_STORE">
                                    <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                                    <items jcr:primaryType="nt:unstructured">
                                        <column
                                            jcr:primaryType="nt:unstructured"
                                            jcr:title="Document Listing Fields"
                                            sling:resourceType="granite/ui/components/foundation/container">
                                            <layout
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                            <items jcr:primaryType="nt:unstructured">
                                                <doclistingNestedMultifield
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/multifield"
                                                    class="tnc-child-multifield"
                                                    fieldLabel="CTA Links"
                                                    name="./doclistingNestedMultifield">
                                                    <field
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                                        name="./doclistingNestedMultifield">
                                                        <layout
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                                                            method="absolute"/>
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <column
                                                                jcr:primaryType="nt:unstructured"
                                                                jcr:title="CTA Link"
                                                                sling:resourceType="granite/ui/components/foundation/container">
                                                                <layout
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <cta-title
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                                        emptyText="Enter the CTA title here"
                                                                        fieldDescription="Enter the CTA title here"
                                                                        fieldLabel="CTA Title"
                                                                        name="./docctaTitle"/>
                                                                </items>
                                                            </column>
                                                        </items>
                                                    </field>
                                                </doclistingNestedMultifield> 
                                            </items>
                                        </column>
                                    </items>
                                </field>
                            </document-listing-fields>
                        </items>
                    </columns>
                </items>
            </visual-listing>
        </items>
    </content>
</jcr:root>

 

 

 

Hi, It is not necessary to have all the components of Coral3 type but I would recommend you to use Coral3 components only. Coral3 is an improved version of Coral2.

I will use your sample XML and convert is into Coral2 and coral3 dialog.

Ok, thanks a lot!! I'll look into the coral3 resource types more.

Answers (0)