Adding a Color Picker to the AEM Content Fragment Model Editor | AEM Community Blog Seeding

[kautuk_sahni]

Adding a Color Picker to the AEM Content Fragment Model Editor by Perficient Blogs

Abstract

Recently, one of our clients looked to add a custom field in the Adobe Experience Manager (AEM) Content Fragment Model Editor. If you’re wondering what AEM Content Fragments are, check out Dan Klco’s post, as he does a great job explaining.

Content Fragment Models are built with elements from various out-of-the-box data types, including single-line text, multi-line text, number, boolean (only for checkboxes), date/time, enumeration (only for static dropdown values), tags, and content reference.

Adding a Custom Field to the AEM Content Fragment Model Editor
After investigating the structure of the Content Fragment Model form builder configuration inside CRXDE,I found that we can easily add most other data types (there are some restrictions for a few datatypes). To extend and customize this form builder configuration of Content Fragment Model Editor, we need to overlay the Content Fragment form builder resource.

In our client’s case, we needed to set the requirement to add the Color Picker field in the Content Fragment Model in AEM 6.5. In this post, I’m going to show you how extended the functionality of the Content Fragment Model to set the Color Picker data type.

How to Set the Color Picker Data Type:
1. First, open the CRXDE Lite console. http://localhost:4502/crx/de/index.jsp
2. Enter the following path in the search bar and hit enter. /libs/settings/dam/cfm/models/formbuilderconfig/datatypes/items
3. Right-click on the items node. This will open a pop-up menu.
4. Click on Overlay Node Option from the pop-up menu. This will open another model dialog. Then click on select the Match Node Types option.

Make sure the model dialog contains the following values.

Path: /libs/settings/dam/cfm/models/formbuilderconfig/datatypes/items

Read Full Blog

Adding a Color Picker to the AEM Content Fragment Model Editor

Q&A

Please use this thread to ask the related questions.

[tian33333]

add fieldMetaTypes="color-field" to make it works

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<color-picker
jcr:primaryType="nt:unstructured"
fieldIcon="colorPalette"
fieldMetaTypes="color-field"
fieldProperties="[labelfield,maptopropertyfield,placeholderfield,textvaluefield,requiredfield]"
fieldPropResourceType="dam/cfm/models/editor/components/datatypes/field"
fieldResourceType="[granite/ui/components/coral/foundation/form/colorfield]"
fieldTitle="Color Picker"
listOrder="9"
renderType="text"
valueType="[string, String[]]"/>
</items>
</jcr:root>