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.

[Jose_CarlosMa1]

I think using this approach if you want to modify the fragment in your page could be a problem. The original fragment will be also modified when you modify his reference in your page. Then if you are thinking to use similar like an Experience Fragment in AEM it will not be the best option because you are modifying all the references and not page by page