How to call content fragment in the universal editor and edit it. | Community
Skip to main content
D
Dyanamic
Level 2
May 26, 2025

How to call content fragment in the universal editor and edit it.

  • May 26, 2025
  • 2 replies
  • 595 views

Hi I have a requirement like on the EDS page when I will add the block it should allow me to browse the Content Fragment and I can edit it on EDS page itself.

Not I have created block as a "content-fragment"

path: blocks/content-fragment

Code :

{
  "definitions": [
    {
      "title": "Content Fragment",
      "id": "content-fragment",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Content Fragment",
              "model": "content-fragment"
            }
          }
        }
      }
    }
  ],
  "models": [
   {
"id": "content-fragment",
"fields": [
  {
"component": "aem-content-fragment",
"name": "cf-picker",
"label": "Content Fragment Picker",
"valueType": "string",
"variationName": "contentFragmentVariation",
"validation": {
"rootPath": "/content/dam/"
}
  }
]
  }
  ],
  "filters": [
 
  ]
}

 

it is not even showing me the block to author inside the section.

I have done the entries in filter, model and definition files too.

if anyone have implemented such functionality kindly share me the sample.

 

Thank You

 

 

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

    2 replies

    D
    DyanamicAuthor
    Level 2
    May 26, 2025

    Updated Json for model

    {
      "definitions": [
        {
          "title": "Content Fragment",
          "id": "content-fragment",
          "plugins": {
            "xwalk": {
              "cf": {
                "name": "Sample CF",
                "cfModel": "author",
                "cfFolder": "content-fragment",
                "title": "Sample",
                "description": "sample description",
                "template": {
                  "name": "Content Fragment",
                  "model": "content-fragment"
                }
              }
            }
          }
        }
      ],
      "models": [
       {
    "id": "content-fragment",
    "fields": [
      {
    "component": "aem-content-fragment",
    "name": "cf-picker",
    "label": "Content Fragment Picker",
    "valueType": "string",
    "variationName": "contentFragmentVariation",
    "validation": {
    "rootPath": "/content/dam"
    }
      }
    ]
      }
      ],
      "filters": [
     
      ]
    }

     

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 26, 2025

    Hi @dyanamic ,

    Pls try below soltuion:

    Your block should look like this:

    blocks/ └── content-fragment/ ├── config.json ├── model.json ├── content.html └── styles.css

    1. config.json

    { "definitions": [ { "title": "Content Fragment", "id": "content-fragment", "plugins": { "xwalk": { "page": { "resourceType": "core/franklin/components/block/v1/block/item", "template": { "name": "Content Fragment", "model": "content-fragment" } } } } } ] }

    Purpose: Registers the block with Universal Editor and ties it to the correct model.

     

    model.json

    { "models": [ { "id": "content-fragment", "fields": [ { "component": "aem-content-fragment", "name": "cfPath", "label": "Select a Content Fragment", "valueType": "string", "variationName": "contentFragmentVariation", "validation": { "rootPath": "/content/dam/content-fragments" } } ] } ] }

    Purpose: Enables CF picker inside Universal Editor.

    Update rootPath to your actual folder where CFs are stored in AEM.

     

    content.html

    <div class="content-fragment-block" data-aem-cf="${cfPath}"> <p><strong>Selected Content Fragment Path:</strong> ${cfPath}</p> </div>

    Purpose: Displays selected CF path and makes it editable inside UE.

    You can later enhance it to fetch and render CF content via GraphQL or JSON API.

    Regards,
    Amit

    D
    DyanamicAuthor
    Level 2
    May 27, 2025

    Hi @amitvishwakarma 

    I tried as per the suggestion but still I am just getting the path of the cOntent Fragment as a link. 

    blocks/ └── cf-fragment/ ├── config.json ├── model.json ├── content.html └── styles.css

     

    adding code of those files.

    config.json

    {
    "definitions": [
    {
    "title": "Content Fragment New",
    "id": "cf-fragment",
    "plugins": {
    "xwalk": {
    "page": {
    "resourceType": "core/franklin/components/block/v1/block/item",
    "template": {
    "name": "Content Fragment New",
    "model": "cf-fragment"
    }
    }
    }
    }
    }
    ]
    }

     

    model.json

    {
    "models": [
    {
    "id": "cf-fragment",
    "fields": [
    {
    "component": "aem-content-fragment",
    "name": "cfPath",
    "label": "Select a Content Fragment",
    "valueType": "string",
    "variationName": "contentFragmentVariation",
    "validation": {
    "rootPath": "/content/dam/hac-eds/content-fragment"
    }
    }
    ]
    }
    ]
    }

     

    content.html

    <div class="content-fragment-block" data-aem-cf="${cfPath}">
    <p><strong>Selected Content Fragment Path:</strong> ${cfPath}</p>
    </div>

     

    style.css : this is blank file.

    after this I have updated the component-model, component-definition, component-filter .

    I am getting the path of the fragment on the page.

      Terms & ConditionsAccessibility statement

      Loading footer...