Multifield container generates empty HTML or duplicate blocks in Universal Editor
A multifield container in Universal Editor for Edge Delivery (xwalk/xcom) renders empty HTML elements or duplicates block markup when configured with a multi-valued container field. To resolve the issue, migrate to a container and item block pattern.
Description description
Environment
- Product: Adobe Experience Manager as a Cloud Service (AEMaaCS) – Sites
- Scenario: Edge Delivery (xwalk/xcom) with Universal Editor
Issue/Symptoms
- Container-authored items fail to generate the expected HTML output, resulting in empty
<div>elements. - Adding multiple fields to the multifield component renders duplicate block HTML for a single container instance.
- Refreshing the editor view temporarily removes duplicate blocks, but duplication reappears after subsequent edits.
Resolution resolution
Follow the steps below to address the issue:
-
Remove the multi-valued container field from the existing component model to stop duplicate or empty markup generation.
-
Keep simple fields such as top and bottom text in the parent container block model to maintain layout-level content.
-
Create a dedicated item block model and define individual fields for each item, such as text or image fields. Example item block and container model structure:
code language-none { "definitions": [ { "title": "Multifield Container", "id": "multifield-container-component", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "multifield-container-component", "model": "multifield-container-component", "filter": "multifield-container-component" } } } } }, { "title": "Multifield Container Item", "id": "multifield-container-item", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "multifield-container-item", "model": "multifield-container-item" } } } } } ] , "models": [ { "id": "multifield-container-component", "fields": [ { "component": "text", "name": "topText", "label": "Top of container", "valueType": "string" }, { "component": "text", "name": "bottomText", "label": "Bottom of container", "valueType": "string" } ] }, { "id": "multifield-container-item", "fields": [ { "component": "text", "name": "itemText", "label": "Item text", "valueType": "string" }, { "component": "reference", "name": "itemImage", "label": "Item image", "valueType": "string", "multi": false }, { "component": "text", "name": "itemImageAlt", "label": "Item image alt text", "valueType": "string" } ] } ] , "filters": [ { "id": "multifield-container-component", "components": [ "multifield-container-item"] } ] } -
Configure filters in Universal Editor to allow item blocks under the parent container block. In this example, the filter ensures that the container accepts only item blocks:
code language-none { "id": "multifield-container-component", "components": [ "multifield-container-item"] }The container definition must reference this filter:
"filter": "multifield-container-component", and the filter withid: "multifield-container-component"restricts the container to accept only multifield-container-item. -
Update parent components by replacing multifield-based nested containers with child block slots that accept item blocks.
-
Add block scripts for both container and item blocks if the project setup requires them.
-
Build and deploy the updated models and components through the standard pipeline.
-
Re-author content in Universal Editor by adding one item block for each required entry inside the container block.
-
Validate the output to confirm each block renders once and generates clean, non-duplicated HTML.
Model Behavior - Item block model (multifield-container-item)
-
Each authored entry creates one block instance with:
itemText (text)itemImage (reference)- typically resolves to an image when the referenced DAM asset is an imageitemImageAlt (text)- used for image alt text
Notes:
- Universal Editor treats the multi-valued container field pattern (
component: "container",multi: true) as early access, which leads to unstable rendering and block duplication in Edge Delivery environments. - Setting
multi: truetomulti: falseprevents duplication but restricts authoring to a single container entry. - Using a container block with item blocks aligns with supported Universal Editor models and ensures consistent, stable HTML rendering.