Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM component with multiple nested multifields renders incorrectly in authoring UI

Avatar

Level 2

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!

 
 
 
1 Accepted Solution

Avatar

Correct answer by
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...

 

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

 



Arun Patidar

View solution in original post

6 Replies

Avatar

Correct answer by
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...

 

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

 



Arun Patidar

Avatar

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>

 

 

 

Avatar

Level 1

@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.

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Community Advisor

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.



Arun Patidar

Avatar

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