Content Fragment custom component breaks in new editor of AEM as a cloud

[aem_2718]

Hello,

I've implemented a custom colour picker for the content fragment model, following the steps outlined in this blog post: Adding a Color Picker to the AEM Content Fragment Model Editor.

The custom colour picker functions properly within the content fragment model and when creating content fragments using the standard content fragment editor when going via the Assest tab. However, when using AEM as a cloud, a new editor for content fragments is available, and the custom component encounters an issue, resulting in the error.

Error in UI:

New Editor Path:

Sample new editor URLs: 
https://experience.adobe.com/?repo=author-e1233-p1234.adobeaemcloud.com#/@we-retail/us/en/cf/editor/editor/content/dam/we-retail/cf?appId=aem-cf-editor 

Error in logs:

27.10.2023 13:38:12.570 [cm-aem-author-fddqm] *ERROR* [qtp837509477-83] com.adobe.cq.dam.cfm.impl.persistence.legacy.Converter Received unsupported field bgColor for Content Fragment Model with the name we retail CF

[kautuk_sahni]

@aem_2718 

he error message Received unsupported field bgColor for Content Fragment Model with the name we retail CF indicates that the new AEM Cloud content fragment editor does not support the custom color picker field that you have added. This is because the new editor is based on a different codebase than the standard content fragment editor.

Solutions: There are two possible solutions to this problem:

1. Update your custom color picker component to be compatible with the new AEM Cloud content fragment editor. This may require some code changes, but it is the best solution if you want to continue using your custom color picker component.
2. Use a different color picker component that is compatible with the new AEM Cloud content fragment editor. There are a number of third-party color picker components available, and some of them are specifically designed for use with AEM Cloud.

Blog that you are using is from 2020, old one.

[aem_2718]

Hi @kautuk_sahni 

We are already using a coral color picker which should be ideally compatible with AEM as a cloud. I've followed below steps:

To enable a custom data type, specifically a colour picker, within the content fragment model, you'll need to perform the following steps:

• Overlay the following path:
  /libs/settings/dam/cfm/models/formbuilderconfig/datatypes/items.

• Add the custom field as described below:
  

  <color-picker
          jcr:primaryType="nt:unstructured"
          fieldIcon="colorPalette"
          fieldProperties="[labelfield,maptopropertyfield,placeholderfield,textvaluefield,requiredfield,textfieldvalidation,customerrormessage]"
          validationTypes="[]"
          fieldPropResourceType="dam/cfm/models/editor/components/datatypes/field"
          fieldResourceType="[granite/ui/components/coral/foundation/form/colorfield]"
          fieldTitle="Color Picker"
          fieldMetaTypes="color-picker"
          listOrder="9"
          renderType="text"
          valueType="[string]"/>

When you say third-party colour picker, what do you mean by it?

[Marina_K]

Customization via overlays does not work with the new content fragment editor.
You can add custom fields using the UI Extensibility Framework.
See documentation:
https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/custom-fields/