Universal Editor - No Option to Add a New Component | Community
Skip to main content
daniel-strmecki
Community Advisor and Adobe Champion
daniel-strmeckiCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
November 11, 2024
Solved

Universal Editor - No Option to Add a New Component

  • November 11, 2024
  • 1 reply
  • 1130 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity AdvisorAccepted solution
Community Advisor
November 12, 2024

@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/developing/universal-editor/customizing

 

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

    daniel-strmecki
    Community Advisor and Adobe Champion
    daniel-strmeckiCommunity Advisor and Adobe ChampionAuthor
    Community Advisor and Adobe Champion
    November 13, 2024

    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
      Community Advisor and Adobe Champion
      daniel-strmeckiCommunity Advisor and Adobe ChampionAuthor
      Community Advisor and Adobe Champion
      November 13, 2024

      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`} >
        Terms & ConditionsAccessibility statement

        Loading footer...