Content Fragment custom component breaks in new editor of AEM as a cloud | Community
Skip to main content
A
aem_2718
Level 2
October 29, 2023

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

  • October 29, 2023
  • 3 replies
  • 1171 views

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

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

3 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
November 2, 2023

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

Kautuk Sahni
A
aem_2718Author
Level 2
November 3, 2023

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?



M
Marina_K
New Member
January 31, 2024

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/

 

Terms & ConditionsAccessibility statement

Loading footer...