AEM Content Fragment Custom DataTypes and React Spectrum

[sanjeevkumart45]

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/extensi...

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?

[AmitVishwakarma]

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]

@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!