Nested Multifield in Content Fragment | Community
Skip to main content
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 rk_pandian

Hi @vignesh_k_s,

 

From what I have seen, it is better not to bend the CF model by doing a custom implementation, because you probably might end up with issues in saving the content to AEM and rendering it back while editing it again. So the advisable option is to use content references as @estebanbustamante has pointed out.

 

Thanks!

5 replies

HrishikeshKagne
Community Advisor
Community Advisor
June 11, 2024

Hi @vignesh_k_s ,

Creating a nested multifield in AEM Content Fragments (CF) can be a bit challenging as AEM's Content Fragment models do not natively support nested multifield configurations directly through the UI. However, there are some approaches you can consider to achieve a similar effect.

1. Custom Implementation with JSON Editor

Since AEM Content Fragments support structured data in JSON format, one approach is to manually create and manage the nested structure within the JSON Editor. Here’s a high-level overview of how you can do this:

  1. Define the JSON Structure:

    • You can define a JSON structure that includes nested arrays or objects representing your multifield data.
    • Use the JSON Editor within AEM to manage this data directly.
  2. Example JSON Structure:

 

{ "title": "Sample Content Fragment", "nestedMultifield": [ { "field1": "value1", "field2": "value2", "nestedField": [ { "nestedField1": "nestedValue1", "nestedField2": "nestedValue2" }, { "nestedField1": "nestedValue3", "nestedField2": "nestedValue4" } ] }, { "field1": "value3", "field2": "value4", "nestedField": [ { "nestedField1": "nestedValue5", "nestedField2": "nestedValue6" } ] } ] }

 

  1. Edit and Manage JSON:

    • Use the JSON Editor to directly edit the JSON structure of your Content Fragment.
    • This approach allows for complex nested structures, but it requires manual management of the JSON content.

2. Custom Content Fragment Models with AEM Development

If you prefer a more user-friendly approach within the AEM UI, you might need to extend AEM functionalities by developing custom components and dialog configurations. This requires more advanced AEM development skills.

Steps to Create Custom Nested Multifield:

  1. Create Custom Content Fragment Models:

    • Define your Content Fragment Model in AEM with the necessary fields, ensuring the main structure is in place.
    • Use custom AEM components to enhance the functionality.
  2. Develop Custom Dialog Components:

    • Create custom Granite UI dialog components that support nested multifield structures.
    • This involves developing custom widgets using Coral UI or Granite UI components.
  3. Integrate with Content Fragment:

    • Integrate your custom dialog components with the Content Fragment editor.
    • Ensure that your custom components correctly serialize and deserialize the nested JSON structures.

Example of Custom Multifield Dialog

Here's a simplified example of how you might define a custom multifield within an AEM component dialog:

 

<!-- /apps/your-project/components/nestedmultifield/dialog.xml --> <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" jcr:primaryType="cq:Dialog" cq:dialogMode="floating"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <nestedMultifield jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" fieldLabel="Nested Multifield"> <field jcr:primaryType="nt:unstructured"> <nestedField jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <field1 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Field 1" name="./field1" /> <field2 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Field 2" name="./field2" /> <nestedMultifield jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" fieldLabel="Nested Field"> <field jcr:primaryType="nt:unstructured"> <nestedField1 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Nested Field 1" name="./nestedField1" /> <nestedField2 jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldLabel="Nested Field 2" name="./nestedField2" /> </field> </nestedMultifield> </items> </nestedField> </field> </nestedMultifield> </items> </content> </jcr:root>

 


Creating a nested multifield directly within AEM Content Fragments requires custom development. The most straightforward approach is to manually manage the nested JSON structure via the JSON Editor. For a more integrated and user-friendly solution, you will need to develop custom dialog components that support nested multifields. This requires good knowledge of AEM’s Granite UI and component development.


Hrishikesh Kagane
EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 11, 2024

Hi, 

Unfortunately, there is no out-of-the-box nested Multifield for Content Fragments; you would have to build your own. You can tweak the JavaScript of the article you shared to achieve that. Check the getMultifieldData and fillMultifieldItems functions in the cfm-composite-multifield.js file.

 

But beyond that, I would recommend stepping back and rethinking how you are modeling your Content Fragments. It sounds to me that perhaps using a Content Reference could also fit your requirement and this is better than trying to use a nested multifield. Please explore this option as the first choice: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/journeys/author/references#fragment-references 

 

Hope this helps.

Esteban Bustamante
gkalyan
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 11, 2024

@vignesh_k_s 

 

I second what @estebanbustamante responded. There is no out-of-the-box nested Multifield for Content Fragments, you would have to build your own.

 

There is an earlier question answered about "Nested Multifield in Content Fragment". Check out the below link about it.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/nested-multifield-in-content-fragment-aem-6-5/m-p/421857

kautuk_sahni
Community Manager
Community Manager
June 13, 2024

@vignesh_k_s Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni
rk_pandian
rk_pandianAccepted solution
Level 4
June 13, 2024

Hi @vignesh_k_s,

 

From what I have seen, it is better not to bend the CF model by doing a custom implementation, because you probably might end up with issues in saving the content to AEM and rendering it back while editing it again. So the advisable option is to use content references as @estebanbustamante has pointed out.

 

Thanks!