Using sections metadata to implement multiple level of nesting

[AnthonySupa]

I'm currently working on an x-walk EDS project. One of our customer's requirements is a tab block that can serve as a container for any type of block within the project.

However, we soon realized that EDS generally only allows a single level of nesting. We found a document that suggests customizing sections might be the way to achieve our goal.

Unfortunately, the document didn't provide sufficient guidance to accomplish this. We're now looking for any use cases or successful examples of this feature to refer to.

Does anyone know of any use cases or successful examples of this feature that we could check out? Any help would be greatly appreciated!

[HemanthSreenu · Accepted solution]

Hey @AnthonySupa,

We did something like this using fragments. Below is the code snippet, where tab-items accepts either text or fragment as source. This is just a workaround for the current limitation.

{
  "definitions": [
    {
      "title": "Tabs",
      "id": "tabs",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Tabs",
              "filter": "tabs"
            }
          }
        }
      }
    },
    {
      "title": "Tab Item",
      "id": "tab-item",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Tab Item",
              "model": "tab-item"
            }
          }
        }
      }
    }
  ],
  "models": [
    {
      "id": "tabs",
      "fields": []
    },
    {
      "id": "tab-item",
      "fields": [
        {
          "component": "text",
          "name": "label",
          "label": "Tab Label",
          "valueType": "string",
          "required": true
        },
        {
          "component": "select",
          "name": "contentSource",
          "label": "Content Source",
          "options": [
            {
              "name": "Rich Text",
              "value": "richtext"
            },
            {
              "name": "Fragment",
              "value": "fragment"
            }
          ]
        },
        {
          "component": "richtext",
          "name": "panelContent",
          "label": "Panel Content",
          "valueType": "string",
          "condition": {
            "===": [
              {
                "var": "contentSource"
              },
              "richtext"
            ]
          }
        },
        {
          "component": "aem-content",
          "name": "fragment",
          "label": "Fragment Reference",
          "condition": {
            "===": [
              {
                "var": "contentSource"
              },
              "fragment"
            ]
          }
        }
      ]
    }
  ],
  "filters": [
    {
      "id": "tabs",
      "components": [
        "tab-item"
      ]
    }
  ]
}

[AnthonySupa]

Thanks! The approach you suggested sounds like the best way to go. I'll try it out.