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

[Dyanamic]

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

[Dyanamic]

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]

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

[Dyanamic]

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.