Using container component with Universal Editor in AEM Sites

[Ben_Hu]

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": []
}

[Ben_Hu]

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

[kapil_rajoria]

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/dev... )

{
        "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 

[dirudo · Accepted solution]

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