Nested Multifield in Content Fragment

[Vignesh_K_S]

I have created multified in content fragment 

https://jimfrenette.com/aem/content-fragments/composite-multifield/

Is there any way to create nested multifield in CF?

[HrishikeshKa]

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.

[EstebanBustamante]

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/journey... 

Hope this helps.

[gkalyan]

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

[kautuk_sahni]

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

[rk_pandian · Accepted solution]

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!