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:
However, when you select the Document Listing variation from the drop down menu, it renders incorrectly in the authoring UI like this:
(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!
Solved! Go to Solution.
Views
Replies
Total Likes
Can you try with Coral3 resource type instead of Coral2?
granite/ui/components/coral/foundation/form/multifield
Please post sample dialog xml so we can reproduce the issue.
Can you try with Coral3 resource type instead of Coral2?
granite/ui/components/coral/foundation/form/multifield
Please post sample dialog xml so we can reproduce the issue.
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>
@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.
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.
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.
Views
Likes
Replies
Views
Likes
Replies