DocumentaciónKCS de Experience Cloud

El contenedor multicampo genera bloques vacíos de HTML o duplicados en el editor universal

Última actualización: 22 de junio de 2026

Un contenedor de varios campos en el Editor universal para Edge Delivery (xwalk/xcom) procesa elementos de HTML vacíos o duplica el marcado de bloque cuando se configura con un campo de contenedor de varios valores. Para resolver el problema, migre a un patrón de bloque de contenedor y elemento.

Descripción description

Entorno

  • Producto: Adobe Experience Manager as a Cloud Service (AEMaaCS) - Sitios
  • Escenario: Edge Delivery (xwalk/xcom) con editor universal

Problema/Síntomas

  • Los elementos creados en contenedores no generan la salida de HTML esperada, lo que da como resultado <div> elementos vacíos.
  • Al agregar varios campos al componente multicampo, se procesan los HTML de bloque duplicados para una sola instancia de contenedor.
  • Al actualizar la vista del editor, se eliminan temporalmente los bloques duplicados, pero la duplicación vuelve a aparecer después de las ediciones posteriores.

Resolución resolution

Siga los pasos a continuación para solucionar el problema:

  1. Quite el campo de contenedor de varios valores del modelo de componentes existente para detener la generación de marcado duplicado o vacío.

  2. Mantenga campos simples como el texto superior e inferior en el modelo de bloque de contenedor principal para mantener el contenido de nivel de diseño.

  3. Cree un modelo de bloque de elementos dedicado y defina campos individuales para cada elemento, como campos de texto o de imagen. Ejemplo de bloque de elementos y estructura del modelo de contenedor:

    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 en el editor universal para permitir bloques de elementos bajo el bloque de contenedor principal. En este ejemplo, el filtro garantiza que el contenedor solo acepte bloques de elementos:

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

    La definición del contenedor debe hacer referencia a este filtro: "filter": "multifield-container-component", y el filtro con id: "multifield-container-component" restringe el contenedor para aceptar solo el elemento contenedor de varios campos.

  5. Actualice los componentes principales reemplazando los contenedores anidados basados en varios campos con ranuras de bloque secundario que aceptan bloques de elementos.

  6. Agregue scripts de bloque para los bloques de contenedor y elemento si la configuración del proyecto los requiere.

  7. Cree e implemente los modelos y componentes actualizados a través de la canalización estándar.

  8. Vuelva a crear contenido en el editor universal agregando un bloque de elementos para cada entrada requerida dentro del bloque contenedor.

  9. Valide el resultado para confirmar que cada bloque se procesa una vez y genera un HTML limpio y no duplicado.

Comportamiento del modelo: modelo de bloque de elementos (multifield-container-item)

  • Cada entrada creada crea una instancia de bloque con:

    • itemText (text)
    • itemImage (reference): normalmente se resuelve en una imagen cuando el recurso DAM al que se hace referencia es una imagen
    • itemImageAlt (text) - se usa para texto alternativo de imagen

Notas:

  • El editor universal trata el patrón de campo de contenedor de varios valores (component: "container", multi: true) como acceso anticipado, lo que produce una representación inestable y una duplicación de bloques en los entornos de Edge Delivery.
  • Establecer multi: true en multi: false evita la duplicación, pero restringe la creación a una sola entrada de contenedor.
  • El uso de un bloque de contenedor con bloques de elementos se alinea con los modelos de editor universal admitidos y garantiza una representación de HTML coherente y estable.

Lectura relacionada

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