Using container component with Universal Editor in AEM Sites | Community
Skip to main content
B
Ben_Hu
Level 2
July 11, 2025
Solved

Using container component with Universal Editor in AEM Sites

  • July 11, 2025
  • 2 replies
  • 822 views

I’m currently using the Universal Editor in AEM Sites.
I have a select component that determines which layout to use.
When I switch to the "Six-grid layout", a container component appears, allowing the user to add multiple items inside it.
At this point, I’m not using any custom JavaScript or CSS.

My issue is that the values inside the container item do not appear in the view or the rendered HTML.
Additionally, the content tree shows a component that I didn’t define, and I’m not sure where it’s coming from.

Can anyone help me identify whether there’s something wrong with my definition file, or if I’m missing a required configuration?

 

{ "definitions": [ { "title": "Foo", "id": "foo", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Foo", "model": "foo" } } } } } ], "models": [ { "id": "foo", "fields": [ { "component": "select", "name": "displayModeSelect", "label": "Display Mode", "valueType": "string", "options": [ { "name": "Six-grid layout", "value": "six-grid layout select" }, { "name": "Text layout", "value": "text layout select" } ] }, { "component": "container", "label": "This is container", "name": "container1", "valueType": "string", "condition": { "===": [ { "var": "displayModeSelect" }, "six-grid layout select" ] }, "multi": true, "validation": { "minSize": 1, "maxSize": 6 }, "fields": [ { "component": "text", "label": "Link Text", "name": "linkText", "valueType": "string" }, { "component": "text", "label": "Link", "name": "link", "valueType": "string" }, { "component": "reference", "label": "Icon", "name": "Icon", "valueType": "string" }, { "component": "text", "label": "Alternative Text", "name": "iconAlternativeText", "valueType": "string" } ] }, { "component": "text", "label": "Text layout", "name": "SearchBarText", "valueType": "string", "condition": { "===": [ { "var": "displayModeSelect" }, "text layout select" ] } } ] } ], "filters": [] }

 

Best answer by dirudo

Support for multi-fields and composite multi-fields (containers with `multi: true`) is still being worked on. It is planned to be available for early access until November. 

 

We will update the documentation once this is ready.

As an outlook

There will be 2 representations of lists:

1. regular lists of multi-fields or composite multi-fields that result in a single semantic element, like lists of images, link lists, or simple text multi-fields (which currently are rendered as comma separated string in a single paragraph)

 

```

<ul>

 <li><a href="...">Text 1</a></li>

 <li><a href="...>Text 2</a></li>

</ul>

```

 

2. flattened list structures for composite multi-fields or richtext multi-fields where each list item may have multiple semantic elements. 

 

```

<hr>

<h4>Title 1</h4>

<p>Description 1</p>

<p><a href="...">Discover now</a></p>

<hr>

<h4>Title 2</h4>

<p>Description 2</p>

<p><a href="...">Discover now</a></p>

<hr>

```

 

Just a gentle reminder to read the https://www.aem.live/developer/component-model-definitions documentation to create semantic content model. In your specific example you should probably not use `displayModeSelect` but `classes` or `classes_dislaplyMode`. 

 

 

 

 

2 replies

B
Ben_HuAuthor
Level 2
July 11, 2025

Add some screenshot for "values inside the container item do not appear in the view or the rendered HTML."

    kapil_rajoria
    Community Advisor
    kapil_rajoriaCommunity Advisor
    Community Advisor
    September 8, 2025

    I am also facing the same issue. 
    Even using a simple multifield like this: (refer - https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/universal-editor/field-types#container )

    { "component": "container", "name": "tabSettings", "label": "Tabs", "valueType": "string", "collapsible": false, "multi": true, "fields": [ { "component": "text", "name": "tabLabel", "label": "Tab Label", "valueType": "string" }, { "component": "richtext", "name": "tabContent", "label": "Tab Content", "valueType": "string", "value": "" } ] }

    doesn't render any html when authored and also we can see a component node (as shown in above image of main question) in the content tree that we never defined.

    Can anyone help on this:
    @daniel-strmecki @Shiv_Prakash_Patel @Martin_Buergi_Adobe @RaphaelWe @dirudo 

      D
      Adobe Employee
      dirudoAdobe EmployeeAccepted solution
      Adobe Employee
      September 9, 2025

      Support for multi-fields and composite multi-fields (containers with `multi: true`) is still being worked on. It is planned to be available for early access until November. 

       

      We will update the documentation once this is ready.

      As an outlook

      There will be 2 representations of lists:

      1. regular lists of multi-fields or composite multi-fields that result in a single semantic element, like lists of images, link lists, or simple text multi-fields (which currently are rendered as comma separated string in a single paragraph)

       

      ```

      <ul>

       <li><a href="...">Text 1</a></li>

       <li><a href="...>Text 2</a></li>

      </ul>

      ```

       

      2. flattened list structures for composite multi-fields or richtext multi-fields where each list item may have multiple semantic elements. 

       

      ```

      <hr>

      <h4>Title 1</h4>

      <p>Description 1</p>

      <p><a href="...">Discover now</a></p>

      <hr>

      <h4>Title 2</h4>

      <p>Description 2</p>

      <p><a href="...">Discover now</a></p>

      <hr>

      ```

       

      Just a gentle reminder to read the https://www.aem.live/developer/component-model-definitions documentation to create semantic content model. In your specific example you should probably not use `displayModeSelect` but `classes` or `classes_dislaplyMode`. 

       

       

       

       

        Terms & ConditionsAccessibility statement

        Loading footer...