DocumentaçãoKCS da Experience Cloud

O contêiner de vários campos gera blocos HTML vazios ou duplicados no Editor Universal

Última atualização: 21 de junho de 2026

Um contêiner de vários campos no Editor Universal para Edge Delivery (xwalk/xcom) renderiza elementos HTML vazios ou duplica a marcação de bloco quando configurado com um campo de contêiner de vários valores. Para resolver o problema, migre para um padrão de contêiner e bloco de item.

Descrição description

Ambiente

  • Produto: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Sites
  • Cenário: Edge Delivery (xwalk/xcom) com editor universal

Problema/Sintomas

  • Os itens criados pelo contêiner não geram a saída HTML esperada, resultando em <div> elementos vazios.
  • Adicionar vários campos ao componente de vários campos renderiza o HTML de bloco duplicado para uma única instância de container.
  • Atualizar a visualização do editor remove temporariamente os blocos duplicados, mas a duplicação reaparece após as edições subsequentes.

Resolução resolution

Siga as etapas abaixo para resolver o problema:

  1. Remova o campo de contêiner de vários valores do modelo de componente existente para interromper a geração de marcação duplicada ou vazia.

  2. Mantenha campos simples, como texto superior e inferior, no modelo de bloco de contêiner pai para manter o conteúdo no nível do layout.

  3. Crie um modelo de bloco de item dedicado e defina campos individuais para cada item, como campos de texto ou imagem. Exemplo de bloco de item e estrutura de modelo de contêiner:

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

  4. Configure filtros no Editor Universal para permitir blocos de itens no bloco de contêiner pai. Neste exemplo, o filtro garante que o contêiner aceite apenas blocos de itens:

    code language-none 
    {      "id": "multifield-container-component",
  "components": [ "multifield-container-item"]
}

    A definição de contêiner deve fazer referência a este filtro: "filter": "multifield-container-component", e o filtro com id: "multifield-container-component" restringe o contêiner a aceitar somente multifield-container-item.

  5. Atualize os componentes principais substituindo contêineres aninhados com base em vários campos por slots de bloco filho que aceitam blocos de itens.

  6. Adicione scripts de bloco para blocos de contêiner e item se a configuração do projeto exigi-los.

  7. Crie e implante os modelos e componentes atualizados por meio do pipeline padrão.

  8. Recrie o conteúdo no Universal Editor adicionando um bloco de itens para cada entrada necessária dentro do bloco de contêiner.

  9. Valide a saída para confirmar se cada bloco é renderizado uma vez e gera um HTML limpo e não duplicado.

Comportamento do Modelo - Modelo de bloco de itens (multifield-container-item)

  • Cada entrada criada cria uma instância de bloco com:

    • itemText (text)
    • itemImage (reference) - normalmente é resolvido para uma imagem quando o ativo DAM referenciado é uma imagem
    • itemImageAlt (text) - usado para texto alternativo de imagem

Notas:

  • O Universal Editor trata o padrão de campo de contêiner de vários valores (component: "container", multi: true) como acesso antecipado, o que resulta em renderização instável e duplicação de bloco em ambientes Edge Delivery.
  • A configuração de multi: true como multi: false impede a duplicação, mas restringe a criação a uma única entrada de contêiner.
  • O uso de um bloco de contêiner com blocos de item se alinha aos modelos compatíveis do Universal Editor e garante uma renderização consistente e estável do HTML.

Leitura relacionada

recommendation-more-help
experience-cloud-kcs-help-kbarticles