Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

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




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


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


Please use this thread to ask the related questions.

Kautuk Sahni

Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply


Level 1

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"
<items jcr:primaryType="nt:unstructured">
fieldTitle="Color Picker"
valueType="[string, String[]]"/>