Universal Editor - No Option to Add a New Component

[daniel-strmecki]

Hello,

I am doing a demo with Universal Editor and my local AEMaaCS instance. Most things work pretty well, but I cannot figure out why there is no button to "add a new component".

Also, when I click on the "delete existing component" there is no error but nothing happens, the component doesn't get deleted.

Here is my model and component JSON:

   const componentJson = {
      "groups": [
        {
          "title": "Components",
          "id": "general",
          "components": [
            {
              "title": "Header",
              "id": "header",
              "plugins": {
                "aem": {
                  "page": {
                     "resourceType": "meticulous/components/header"
                  }
                }
              }
            },
            {
              "title": "Footer",
              "id": "footer",
              "plugins": {
                 "aem": {
                   "page": {
                      "resourceType": "meticulous/components/footer"
                    }
                 }
              }
            },
            {
              "title": "Hero",
              "id": "hero",
              "plugins": {
                "aem": {
                  "page": {
                    "resourceType": "meticulous/components/hero"
                  }
                }
              }
            },
            {
              "title": "Teaser",
              "id": "teaser",
              "plugins": {
                "aem": {
                  "page": {
                    "resourceType": "meticulous/components/teaser"
                  }
                }
              }
            },
            {
              "title": "Cards",
              "id": "cards",
              "plugins": {
                "aem": {
                  "page": {
                    "resourceType": "meticulous/components/cards"
                  }
                }
              }
            },
            {
              "title": "Card Item",
              "id": "cardItem",
              "plugins": {
                "aem": {
                  "page": {
                    "resourceType": "meticulous/components/cardItem"
                  }
                }
              }
            }
          ]
        }
      ]
    }
    const modelJson = [
      {
        "id": "header",
        "fields": [
            {
              "component": "text",
              "name": "textLeft",
              "label": "Left Text",
              "valueType": "string"
            },
            {
              "component": "text",
              "name": "textRight",
              "label": "Right Text",
              "valueType": "string"
            },
            {
              "component": "aem-content",
              "validation": {
                "rootPath": "/content/dam/meticulous",
              },
              "name": "fileReference",
              "label": "Image",
              "valueType": "string"
            }
        ]
      },  
      {
        "id": "footer",
        "fields": [
            {
              "component": "text",
              "name": "textBottom",
              "label": "Bottom text",
              "valueType": "string"
            },
            {
              "component": "text",
              "name": "textTop",
              "label": "Top text",
              "valueType": "string"
            }
        ]
      },  
      {
        "id": "hero",
        "fields": [
          {
            "component": "text",
            "name": "title",
            "label": "Title",
            "valueType": "string"
          },
          {
            "component": "richtext",
            "name": "text",
            "label": "Description",
            "valueType": "string"
          },
          {
            "component": "aem-content",
            "validation": {
              "rootPath": "/content/dam/meticulous",
            },
            "name": "fileReference",
            "label": "Image",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "ctaText",
            "label": "Link text",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "ctaUrl",
            "label": "Link URL",
            "valueType": "string"
          },
        ]
      },
      {
        "id": "teaser",
        "fields": [
          {
            "component": "text",
            "name": "title",
            "label": "Title",
            "valueType": "string"
          },
          {
            "component": "richtext",
            "name": "text",
            "label": "Description",
            "valueType": "string"
          },
          {
            "component": "aem-content",
            "validation": {
              "rootPath": "/content/dam/meticulous",
            },
            "name": "fileReference",
            "label": "Image",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "linkText",
            "label": "Link text",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "linkUrl",
            "label": "Link URL",
            "valueType": "string"
          },
        ]
      },
      {
        "id": "cards",
        "fields": [
          {
            "component": "text",
            "name": "title",
            "label": "Title",
            "valueType": "string"
          }
        ]
      },
      {
        "id": "cardItem",
        "fields": [
          {
            "component": "text",
            "name": "title",
            "label": "Title",
            "valueType": "string"
          },
          {
            "component": "richtext",
            "name": "text",
            "label": "Description",
            "valueType": "string"
          },
          {
            "component": "aem-content",
            "validation": {
              "rootPath": "/content/dam/meticulous",
            },
            "name": "fileReference",
            "label": "Image",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "ctaText",
            "label": "Link text",
            "valueType": "string"
          },
          {
            "component": "text",
            "name": "ctaLink",
            "label": "Link URL",
            "valueType": "string"
          },
        ]
      }
    ];

I would appreciate advice from anyone more experienced with Universal Editor. Thanks in advance!

Daniel

[Shashi_Mulugu · Accepted solution]

@daniel-strmecki to show add components aka section or block you need to add filter config.

Please check filters section in below link

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

https://github.com/adobe-rnd/aem-boilerplate-xwalk/blob/main/models/_component-filters.json

[daniel-strmecki]

Hi @Shashi_Mulugu,

thanks for the hint, that seems to be the configuration I was missing. I followed the documentation you shared and added a wrapper/container DIV for my components:

<div id="main-content" data-aue-filter="container-filter">
   <!-- All my components render here -->
</div>

I've also added the container filter JSON script:

<script id="aue-filter-json" type="application/vnd.adobe.aue.filter+json" data-nscript="afterInteractive">[{"id":"container-filter","components":["hero","teaser","cards"]}]</script>

However, the option/button to add a new component is still not showing. Did I miss something?

Thanks in advance,

Daniel

[daniel-strmecki]

NVM I was missing some additional properties, worked fine after adding:

<div id='main-content' 
    data-aue-filter='container-filter'
    data-aue-type="container"
    data-aue-label="Container"
    data-aue-resource={`urn:aemconnection:${root_path}/jcr:content/root/container`} 
>