AEM component with multiple nested multifields render...

[daniel_diaz]

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!

[arunpatidar · Accepted solution]

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.

[daniel_diaz]

Hi, thanks for your response @arunpatidar ! 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>

[iamsumansourav]

@arunpatidar  @daniel_diaz  When we configure any OOTB component, can we give more (styling) design in dialog, Like if button is in simple can we design, I'm not taking about styling from CSS. I'm taking about styling from backend side(in properties) or In AEM we have a property to give more style to button, dropdoWn, cta etc this is the my question.

[arunpatidar]

yes, you can use style system or new fields in the dialog from backend.

In AEM we don't have any OOTB sytles.

you have to write your own CSS to style the buttons based on options chosen from AEM dialog.

[arunpatidar]

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.

[daniel_diaz]

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