AEM component with multiple nested multifields renders incorrectly in authoring UI

Forum|Forum|6 years ago
December 27, 2019
1 reply
5280 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by arunpatidar

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/api/jcr_root/libs/granite/ui/components/coral/foundation/form/multifield/index.html

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

arunpatidar

Accepted solution

Community Advisor

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/api/jcr_root/libs/granite/ui/components/coral/foundation/form/multifield/index.html

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

Arun Patidar

daniel_diazAuthor

Level 2

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded