Level 2

AEM Content Fragment Custom DataTypes and React Spectrum

Forum|Forum|8 months ago
May 6, 2025
2 replies
746 views

I'm reviewing the following article about extending the Content Fragment Model Editor in AEM:
https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/developing/extensibility/ui/content-fragments/examples/editor-custom-field

My goal is to create a custom datatype that can be used within the Content Fragment Model Editor for our project. However, we're currently using AEM 6.5 on-premise (not AEM as a Cloud Service).

Given that, is this article relevant to our setup? If not, what's the recommended approach for adding custom data types in AEM 6.5?

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

AmitVishwakarma

Community Advisor

Hi @sanjeevkumart45 ,

No, the article you referenced is specific to AEMaaCS and relies on React Spectrum UI Extensions, which are not available or supported in AEM 6.5 on-premise.

Solution:

Add Custom Data Types in AEM 6.5 Content Fragment Models

In AEM 6.5, Content Fragment Models are built using Classic Granite UI (not React Spectrum). You’ll extend the Granite UI dialog-based editor, not the newer React-based editor used in AEMaaCS.

Create a Custom DataType for Content Fragment Model in AEM 6.5

1. Define a Custom Field Component

You'll create a custom field component under:

/apps/dam/cfm/models/formbuilderconfigurations

Example path:

/apps/dam/cfm/models/formbuilderconfigurations/custom-mydatatype

This node must include:

sling:resourceType = dam/cfm/models/editor/components/formbuilder/formfield
name = custom-mydatatype

2. Create a Granite UI Dialog for Your Custom Field

The component must render using the Granite UI syntax. Example: A custom text input field with validation.

<custom-field
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="My Custom Field"
    name="./customField"
    required="{Boolean}true"
    validation="my-custom-validation"
    maxlength="100"/>

You can place this under:

/apps/dam/cfm/models/formbuilderconfigurations/custom-mydatatype/cq:dialog/content/items

3. Register Your Custom DataType in CFM Registry

You’ll need to update the registry so the Content Fragment Model editor recognizes your custom type.

Under:

/apps/dam/cfm/models/formbuilderconfigurations

Create or modify:

/apps/dam/cfm/models/formbuilderconfigurations/custom-mydatatype

Add:

jcr:title = My Custom DataType
name = custom-mydatatype
sling:resourceType = dam/cfm/models/editor/components/formbuilder/formfield

4. Test Your Custom DataType

Go to Tools > Assets > Content Fragment Models

Open a model or create a new one.

You should now see “My Custom DataType” as an option.

Add it to the model and use it in a new Content Fragment.

Regards,
Amit

aanchal-sikka

Community Advisor

@sanjeevkumart45 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Aanchal Sikka

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded